Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript anythingslider questions on loading from ajax

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #36933
    whipdancer
    Member

    I’m attempting to use anythingslider. So far I’ve been able to get it on my page and load it with data, but the sizing has been inconsistent and sometimes it seems like the page & control loads before my ajax call finishes. So I assume that I’m not doing “something” correctly.

    As for the load of the slider – the main call


    $(function () {
    getAssets();
    });

    which calls these functions


    function getAssets() {
    var urlMethod = "../MediaAsset.svc/GetAssets",
    jsonData = { id: "0" };
    jsonData = JSON.stringify(jsonData);
    sendAjax(urlMethod, jsonData, populateSlider, errorFunction);
    }
    function populateSlider(data) {
    var strHtml;
    $.each(data, function(key, val) {
    strHtml += "
  • " + val.AssetName + "
  • ";
    });
    $('#slider').html(strHtml);
    $('#slider').anythingSlider({
    buildStartStop: false,
    easing: 'swing',
    navigationSize: 3,
    resizeContents: false
    });
    }
    function errorFunction(xhr, status, error) {
    var errval = jQuery.parseJSON(xhr.responseText);
    errval += xhr.status;
    errval += error;
    $('#message').html(errval);
    }

    Populate slide is where I build the

  • elements to be used in the slider. I found an example that made me think I should be using a callback method and “.append” instead. Is that the recommended course of action – or is there someway I can get the control to wait for the return data?
#97895
Mottie
Moderator

Did you see this demo?

Has the slider already been initialized before it’s populated, or after (as I see in the code)? Because if it was initialized before, then all of the options will be ignored the second time it is called.

#97897
whipdancer
Member

I think that the slider is initialized after loading the data/new elements – or at least that is my intent, so that the slider window is the appropriate size. Sometimes the slider view window is very, very narrow – but when I refresh, it will then resize appropriately for the images in the slider.

I think it was coming across that demo that made me question how I am doing it. I’m very new to jquery (and javascript in general)…

With that in mind – I think the processing on my page is:

$(Document).ready calls the getAssets function, which calls the sendAjax function. The parameters I pass into sendAjax are my url for the ajax call, the parameters for the ajax call, the function to call on success, the function to call on failure.

On success, I call the function populateSlider – which performs “.each” on the data that was returned, building a series “<li>” and “<img>” tags, which then get added to the slider via “.html” – after which, I think i’m initializing the slider with specific options.

Based on that – am I initializing the slider when I call “.html”?

Should I instead be appending in the “.each” processing, as in the sample?

#97900
whipdancer
Member

After a bit more research, it appears that the only sure-fire way to know i have my data from the ajax call – is to not initialize the slider until I get a readystate==4 from the ajax call. Wouldn’t happen to be able to offer some guidance on that, would you?

#97936
Mottie
Moderator

LOL, to be honest, I actually suck at javascript… I learned how to program starting from jQuery so going back to pure js is difficult. I tend to use the getJSON function to do all that work. To check for errors, you can use ajaxError.

The way you have the code now should work fine… initializing the slider after the html addition is perfect. I was just asking because it is possible to replace all of the slider content and just call the plugin again to update: $('#slider').anythingSlider(); – at this point it will ignore any options added inside of the function call.

Based on the other question you asked about centering the image, I think you’ll need to wrap the image in a div and set the “resizeContents” option to true

strHtml += "
  • " + val.AssetName + "
  • ";

    that with the css magic Chris shared to center the image horizontally and vertically should make everything purdy!

    Viewing 5 posts - 1 through 5 (of 5 total)
    • The forum ‘JavaScript’ is closed to new topics and replies.