Hallo I beginner learning AJAX and JQuery, Maybe this is a stupid question, but please don't judge me.
I create the live showing data, the data is loaded without refresh the page, so I use the AJAX, I load the function onload in body tag.

I use image picker, it's look good when not using AJAX GET,

[![image1](https://i.stack.imgur.com/Hcfec.png)](https://i.stack.imgur.com/Hcfec.png)

and separated my file index.html is the main file, and I also add getdata.php the file show.

on index.html

```
<div class="col-xs-8 picker" id="viewdata">
     // content getdata.php here                
</div>

```

on script.js

```
function viewdata(){
   $.ajax({
   type: "GET",
   url: "php/getdata.php",
   dataType: "html"
  }).done(function( data ) {
  $('#viewdata').html(data);
  });
}

```

on getdata.php

```
<select class="image-picker">
        <?php
            include "config.php";
            $res = $conn->query("select * from images");
            while ($row = $res->fetch_assoc()) {
            ?>
        <option data-img-src="images/<?php echo $row['file_name'];?>" value="<?php echo $row['file_name'];?>"> <?php echo $row['file_name'];?> </option>
        <?php } ?>
    </select>

```

but the result become like this

[![image2](https://i.stack.imgur.com/RQwTs.png)](https://i.stack.imgur.com/RQwTs.png)

It's like the image-picker not loaded

I'm sorry my english is bad.