Hinzufügen bxSlider ein div mit AJAX generiert
Habe ich diese zwei Zeilen html-code...
<div id="slider1" data-param1="XXX" data-param2="XXX"></div>
<script src="script.js" type="text/javascript"></script>
erstellen Sie ein widget durch die script.js Datei mit jQuery, JSON und PHP. Gut, wie Sie im code sehen mein Ziel ist es, etwas erzeugen, wie dies in body
<div id="slider1">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
basierend auf dieser extra einfaches Beispiel (das funktioniert perfekt überall, Sie versuchen es). Mein problem ist, dass ich nicht bekommen können, bxSlider, um Arbeit zu bekommen und vielleicht bin ich etwas fehlt mit AJAX. Hier haben Sie die 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>");
});
}
});
});
}
})();
Wenn ich führen Sie die widget-die Inhalte der Daten wird korrekt angezeigt, aber bxSlider scheint nicht zu funktionieren.
Wissen Sie, was falsch sein kann? Wie und wo kann ich anrufen $('#slider1').bxSlider();
um einen Schieberegler, richtig?
Wenn Sie weitere Erklärungen oder details, nur sagen Sie es mir.
Edit: ich habe auch dies versucht, aber funktioniert nicht, entweder
(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();
}
});
});
}
})();
- können Sie die Ausgabe der Konsole beim laden der Seite. Für Infos über die Konsole - developers.google.com/chrome-developer-tools/docs/console.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie anrufen
$('#slider1').bxSlider();
innerhalb der ajax-success-callback. Nach dem hinzufügen des div ' s mit dem $.jeder, können Sie direkt$('#slider1').bxSlider();
ohne Zugabe von der Skript-tag.