Featured Content Slider: Embedding inline content using js

[yuengling25]

1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: As the title indicates, I am using the contentsource: ["inline", ""] method. I have written a script that is intended to make an API call and parses each piece of the returned JSON data into its own “contentdiv” item and appends it to the “.sliderwrapper” in my html page:


(function() {
var url = "http://xxxxxx";

var apiKey = "XXXXXXXXX";

$.getJSON(url + apiKey).done(function(data) {

$.each( data.sports[0].leagues[0].events, function() {

var score = $("<div/>", {class: "contentdiv"}).html('<table>' + '<tr>' + '<td>' + this.competitions[0].competitors[1].team.name + '</td>' + '</tr>' + '<tr>' + '<td>' + this.competitions[0].competitors[0].team.name + '</td>' + '</tr>' + '</table>');

$(score).appendTo($(".sliderwrapper"))
});

});


Problem is, I can’t get that data to display in the featured content slider at all. If I look at the source code after page load, everything appears to be as it would need to be in order for things to work. That is, my script appears to be working as intended. Just to make sure I wasn’t missing something simple, I even ran a test using some truly in-line content (i.e., <div class=”contentdiv”><p>This is a test…</p></div>), which worked just fine.

My question: is this a problem of timing between my own script and the contentslider.js file, considering that both are referenced in the head of my html? Or am I not seeing something in my own script that is causing things to not work? Any insight would be greatly appreciated.

[ddadmin]

The FCS runs as soon as you call featuredcontentslider.init(), any additional DIVs you add to the slider afterwards won't be properly recognized by the script. Looking at your code it seems to be asynchronous- in that case, you might try initializing the slider only after having finished adding the DIVs to it dynamically, such as:


(function() {
var url = "http://xxxxxx";

var apiKey = "XXXXXXXXX";

$.getJSON(url + apiKey).done(function(data) {

$.each( data.sports[0].leagues[0].events, function() {

var score = $("<div/>", {class: "contentdiv"}).html('<table>' + '<tr>' + '<td>' + this.competitions[0].competitors[1].team.name + '</td>' + '</tr>' + '<tr>' + '<td>' + this.competitions[0].competitors[0].team.name + '</td>' + '</tr>' + '</table>');

$(score).appendTo($(".sliderwrapper"))

});

// initialize slider with your own settings:


featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex, contentdivs){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (0=1st slide, 1=2nd etc)
//curindex holds index of currently shown slide (0=1st slide, 1=2nd etc)
}
})

});

[jscheuer1]

I'm not really familiar with your method (shown in your post). But I've seen similar, and it may very well be timing. You don't want the slider initializing until after the content is there. And it cannot initialize until after document ready and content import. And I see you're using jQuery, so I would combine your script and the init under a doc ready call and hope for the best:


<script type="text/javascript">
jQuery(function($){
var url = "http://xxxxxx";
var apiKey = "XXXXXXXXX";
$.getJSON(url + apiKey).done(function(data) {
$.each( data.sports[0].leagues[0].events, function() {
var score = $('<div class="contentdiv"></div>');
score.html('<table><tr><td>' + this.competitions[0].competitors[1].team.name +
'</td></tr><tr><td>' + this.competitions[0].competitors[0].team.name +
'</td></tr></table>').appendTo(".sliderwrapper");
});
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex, contentdivs){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (0=1st slide, 1=2nd etc)
//curindex holds index of currently shown slide (0=1st slide, 1=2nd etc)
}
});
});
});
</script>

Just make sure everything is right in the init for your purposes, and that the url/key combo is correct to connect with the desired service.

NOTEs: This replaces both your import code and the slider init code and should be placed after the slider markup (where the slider init would have been). I cleaned up your code a bit and tested all the code for syntax errors. But there could be other issues once the getJSON call is executed.

The page may need to be refreshed and/or the browser's cache cleared to see changes.

If you want more help - please post a link the page on your site that has the problematic code.

[yuengling25]

Thank you both for the help. Since I plan on adding multiple getJSON calls to this, I stuck to using my off-page js file as I didn't want to complicate the html too much with a lot of script code as well. It really was just a simple matter of removing the slider initialization code from my html and into the js file following the getJSON call in order to make sure its allowed to finish. Everything is working fine now :D.