Question

I would like to load a page with results from an AJAX call, which works fine, but for each result there should also be a jQuery slider. The code works fine if I create a static php page and display the results. But when I load the results into another page is when the slider does not appear. The placement of it work and the console.log(s) tell me that the slider is updating, but there is no actual slider visually.

I found a few posting on Stackoverflow mentioning that you need use .page(), but I could not find info on jQuery’s site about this.

Has anyone had experience with dynamically creating sliders via an AJAX request? Is there a better method?

The use of the slider is for a custom audio player.

Thanks in advance.

EDIT: Code added

EDIT: $('.slider').slider(); added

EDIT: Response page not needed

Main Page:

function showInfoTracks(){
    ajaxConnection.onreadystatechange = function(){
        if (ajaxConnection.readyState == 4 && ajaxConnection.status == 200) {
AJAX RESPONSE               
        }
    }
    ajaxConnection.open("GET", "file.php, true);
    ajaxConnection.send();
}

Answer 1

The answer ended up being that in the AJAX response section you define the slider.

   $(document).ready(function() {

                $(document).on('mouseenter', '.playButton', function() {    
                    var newSliderID = this.id;
//Run this if so that you dont reload the same slider over and over again
                    if($("#sliderActivated"+newSliderID).val() == 0){
                        $("#sliderActivated"+newSliderID).val(1);
                        $( "#slider"+newSliderID ).slider({ 
                            animate: true ,
                            value: 0,
                            min: 0,
                            start: function( event, ui ) {
                                ...
                            },
                            slide: function( event, ui ) {
                                ...
                            },
                            stop: function( event, ui ) {
                                ...
                            }

                        });
                    }

                }); 
            });