Question

I have this two lines of html code…

<div id="slider1" data-param1="XXX" data-param2="XXX"></div>
<script src="script.js" type="text/javascript"></script>

which generate a widget thanks to the script.js file using jQuery, JSON and PHP. Well, as you will see in the code my aim is to generate something like this inside body

<div id="slider1">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

based on this extra simple example (that works perfectly everywhere you try it). My problem is that I can’t get bxSlider to get work and maybe I’m missing something with AJAX. Here you have the script.js code.

(function() {
// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() {   
    jQuery(document).ready(function($) { 

        /******* Capture Data Attributes *******/
        var param1 = $('div').data('param1');
        var param2 = $('div').data('param2');

          /******* Load BxSlider *******/
        var slider   = document.createElement("script");
        slider.type  = "text/javascript";
        slider.src   = "http://bxslider.com/sites/default/files/jquery.bxSlider.min.js";
        document.head.appendChild(slider);

        /******* Load BxSlider action (IS THIS RIGHT???) *******/
        var slide   = document.createElement("script");
        slide.text  = "$(document).ready(function(){ $('#slider1').bxSlider(); });";
        document.head.appendChild(slide);

        /******* Load CSS *******/
        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "css/style.css" 
        });
        css_link.appendTo('head');  

        $.ajax({
          type: "GET",
          url: "something.php?api_key=" + param1 + "&shop_id="  + param2,
          async: true,
          dataType: "json",
          success: function(data){
            $("#slider1").empty();
            // This works fine, data is correct
            $.each(data,function(index, value) {
              $("#slider1").append("<div>" + data[index].title + "</div>");
            });
          }
        });
    });
}

})();

When I execute the widget the data content is displayed correctly, but bxSlider doesn’t seems to be working.
Do you know what may be wrong? How and where can I call $('#slider1').bxSlider(); to get a slider properly?

If you need more explanations or details, just tell me.

Edit: I’ve also tried this, but doesn’t work either

 (function() {
// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() {   
    jQuery(document).ready(function($) { 

        /******* Capture Data Attributes *******/
        var param1 = $('div').data('param1');
        var param2 = $('div').data('param2');

          /******* Load BxSlider *******/
        var slider   = document.createElement("script");
        slider.type  = "text/javascript";
        slider.src   = "http://bxslider.com/sites/default/files/jquery.bxSlider.min.js";
        document.head.appendChild(slider);

        /******* Load CSS *******/
        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "css/style.css" 
        });
        css_link.appendTo('head');  

        $.ajax({
          type: "GET",
          url: "something.php?api_key=" + param1 + "&shop_id="  + param2,
          async: true,
          dataType: "json",
          success: function(data){
            $("#slider1").empty();
            // This works fine, data is correct
            $.each(data,function(index, value) {
              $("#slider1").append("<div>" + data[index].title + "</div>");
            });
                $('#slider1').bxSlider();
          }
        });
    });
}

})();

Answer 1

You can call $('#slider1').bxSlider(); inside of the ajax success callback. After you add the div’s with the $.each, you can directly call $('#slider1').bxSlider(); without adding the script tag.