jquery sliders not working when loading through aj

Question

I am using the jquery slider plugin to create some sliders. This works fine when I load them directly when the dom is initiated however when I try to load the sliders into a div using the ajax innerHTML method they do not get intiated.

Does anything know how I can do this?

Answer 1

Sliders are not being initialized when creating them by settings the innerHTML of an object. Try this instead (for a range slider):

$.ajax({
  url: "get_slider.php",
  success: function(data){
    if(typeof(data) == 'string') data = JSON.parse(data);
    $('#my_slider_id').slider({
            range: true,
            min: data.min,
            max: data.max
        });
  },
  error: function(data){
    // Something went wrong, do stuff here
  }
});

Here we expect get_slider.php to return a JSON object containing at least a min and a max property for instantiating the slider.

Answer 2

When u are adding sliders to div using innerHTMl, you have to again call the sliders setup methods so that the events are attached to the sliders when the sliders are added to div. Thanks Ashwani

Answer 3

Try use the OnComplete property within the $.ajax method to trigger the method for the sliders. That will ensure that the method will only be triggered once the ajax content has been loaded.

Answer 4

You have to initiate / bind your events again.

e.g

//Ajax done and innerHTML is set
$('container').slider(); //Just an example... this will bind events.

Or

You can change the event handlers to .live . This handles dynamic content.