Refreshing slideshow via AJAX with appendSlide() and removeSlide()

Masuga Design's Avatar

Masuga Design

28 Sep, 2012 03:18 PM

We're trying to refresh our slideshow via AJAX using the appendSlide() and removeSlide() API functions. Those functions work great but here is our issue : We are performing an AJAX call to the server every so often that returns a JSON response containing a list of every slide along with its proper index and whether or not it should appear in the slideshow. Using this list, we want to be able to add new slides, change existing slide positions and remove slides that should no longer be in the slideshow. Before the slideshow is initialized on the page, we gave each slide an HTML id attribute that we use to check to see if the slide exists on the page, but every method we've attempted to check to see if a slide exists with JavaScript fails.

For instance, we may have a slide that looks like this :

<div id="slide_05" data-rsBigImg="slideImg05.jpg" data-rsTmb="slideThumb05.jpg" >
    <img class="rsImg" src="slideImg05.jpg" style='height:100%;width:100%' />

But when we use JS to check if it exists:


It always returns 0 like it isn't on the page even though we can see it in the rendered source. My theory is that Royal Slider is replacing our initial HTML markup with markup of its own without adding it to the DOM. We've tried other methods to determining if the slide is already on the page and they fail in the same manner. Is there a way we can verify the existence of a slide before attempting to append it to the slideshow? Either a Royal Slider custom attribute or an API function that checks for something other than the index (since the indexes can change)?

  1. 1 Posted by Masuga Design on 28 Sep, 2012 03:26 PM

    Masuga Design's Avatar

    Also, I should mention that in our example, the "05" represents a record ID and is not related to the position in the slideshow in any way.

  2. Support Staff 2 Posted by Dmitry Semenov on 29 Sep, 2012 06:11 PM

    Dmitry Semenov's Avatar


    Sorry for late reply. RoyalSlider removes usused slides based on numImagesToPreload option, so slide that you're trying to select may not be available in DOM. You may send me link to your work and I'll tell you exactly why it doesn't see it.

    You may use slides public array, it contains some data about slides, log it to see what's inside. jQuery('.royalSlider').data('royalSlider').slides

    Also, you may extend _parseNode method and add some special ID to objects of slides array.


  3. 3 Posted by Masuga Design on 01 Oct, 2012 07:13 PM

    Masuga Design's Avatar


    Thanks for the response. We increased the value of the "numImagesToPreload" parameter to a number that will easily cover the total number of slides now. I actually did look at the slides array using the console logger and we're trying to figure out a way we can use the data there.

    One of the problems we are running into is that when we need to add a bunch of slides or remove a bunch of slides at one time, the indexes will change which might make it difficult to add/move/remove slides in the correct positions in the slideshow. Is there a method for us to move or remove a slide based on some criteria other than the index? Suppose we do add unique IDs to each slide that are created from our own data on the server (like row ID), could we remove slides cleanly using that data as the parameter rather than the index which might change periodically?

  4. Support Staff 4 Posted by Dmitry Semenov on 01 Oct, 2012 08:11 PM

    Dmitry Semenov's Avatar

    Unfortunately, there is no such option, by default slides can be removed only by index.


Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac