Dynamic jQuery slider not appearing

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();
}

You should really provide some code or a jsFiddle so we can dig into your problem. — Christian, Nov 12 '12 at 17:57
We'll need to see your code in order to help. What you're doing in principle is fine, and normal, so you're doing something wrong. — Reinstate Monica Cellio, Nov 12 '12 at 17:57
I found this [link](http://stackoverflow.com/questions/6829879/jquery-sliders-not-working-when-loading-through-ajax) which then I added this $('.slider').slider(); to the end of this function showInfoTracks and the sliders appeared. The sliders are there but the functionality to slide is not. The slider moves as the audio file plays but you can not interact with it. — ImaginedDesign, Nov 12 '12 at 23:00

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

There maybe a chance that your code on .page() causes infinite loop. That's the reason why it just keeps on loading on the log and don't give out results.

Here's a link. JQuery Mobile .page() function causes infinite loop?

edited May 23 '17 at 11:51

Community

1
1

answered Nov 12 '12 at 18:06

Franz Noel

1,820
2
23
50

Is there a non jQuery Mobile fix? I understand that is where .page is from. Thanks for the input. – ImaginedDesign Nov 12 '12 at 18:12
I cannot find any jquery and ajax slider that best suits this problem. However, if I were to create an ajax slider, I would use any slider frameworks. Then, generate a json file from the server listing all variables I need such as: `imageURL`, `description`, and `title`. Then, get the results from that page using `jQuery.ajax()`. Then, parse the variables with `jQuery.parseJSON()`. Then distribute the variables by `jQuery.append()` (with the layout that I want) on the page of the slider. – Franz Noel Nov 12 '12 at 19:08

score 0 · Accepted Answer · answered Nov 13 '12 at 03:05

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 ) {
                                ...
                            }

                        });
                    }

                }); 
            });

Dynamic jQuery slider not appearing

2 Answers2