AJAX使用GET方法加载php文件并在加载时但是没有出现一些jquery插件

Question

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,

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

It's like the image-picker not loaded

I'm sorry my english is bad.

Answer 1

you need to reinitialize the plugin after ajax requests.

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

remember that, most jquery plugins doesn't apply its effects on dynamically generated html.

Answer 2

Your script should be the following:

function viewdata(){
    $.ajax({
        type: "GET",
        url: "php/getdata.php",
        dataType: "html",
        success: function(data){
            $('#viewdata').html(data);
            $('select').imagepicker(); // to reinitialize the plugin.
        }
        error: function(data){
            // error handling
        }
    }).done(function(data){
        // something to do after, even if it throws an error.
    });
}