• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 925
  • Last Modified:

Loaded ajax data not being recognized by jQuery Scrollable function

I'm using a simple jQuery "scrollable" function from the jQuery Tools library. I combined it with jQuery Ajax $.get function... so when you click certain links on the page it loads the HTML data for the respective Scrollable item.

Link to jQuery Scrollable demo

The Ajax is WORKING, when I click the item it loads in the Scrollable item (HTML data), for example (pulls the ID from the element ID):

function ajax(file){
    $.get(file,function(data) {
        $("#mydiv").html(data);
    });
}

$(".scrollindex").click(function() {
    var myid = $(this).attr("id");
    ajax('content.asp?i=' + reelId);
});

Open in new window


But the Scrollable function is not being applied to the Ajax loaded data, for example:

$(".scrollable").scrollable({ next: ".next", prev: ".prev" }).navigator(".nav"); 

Open in new window


The navigation elements which are created with the 'next', 'prev', and 'navigator' assignments are simply not working / not being created.

It works fine when I don't use the Ajax method.

Is there something I'm doing wrong? Is there a limitation of Ajax? Should I be using a different Ajax method here?
0
intoxicated_curveball
Asked:
intoxicated_curveball
1 Solution
 
mcnuteCommented:
a jsfiddle or test version online would help to understand your problem.
0
 
Chris StanyonCommented:
Without seeing your full code, or when you are calling certain functions it's impossible to be specific. A couple of things to look out for.

In your ajax call, you may be using the wrong variable. You set a variable called myid, but then make the ajax call with a variable called reelId, which doesn't seem to be set anywhere!:

$(".scrollindex").click(function() {
    var myid = $(this).attr("id");
    ajax('content.asp?i=' + reelId);
});

Open in new window

You are calling your scrollable function on $('.scrollable'). If you call this on page load (document.ready) then it will apply to the elements that exist AT THAT TIME. If you then load new content using ajax which has $('.scrollable') elements, the function won't be applied (because they didn't exist when you first called the function). If that's the case, you need to re-call you scrollable function once you've got the new data.

function ajax(file){
    $.get(file,function(data) {
        $("#mydiv").html(data);

        //now you've got new data, call the scrollable function again.
        $(".scrollable").scrollable({ next: ".next", prev: ".prev" }).navigator(".nav"); 
    });
}

Open in new window

0
 
alorentzCommented:
Look at .live or .on in jQuery.  It may be because the new content from AJAX is not recognized in the DOM.  live or on should resolve.

http://api.jquery.com/live/
0
 
intoxicated_curveballAuthor Commented:
WOW! ChrisStanyon's solution worked and it was so simple... THANK YOU!!
0
 
intoxicated_curveballAuthor Commented:
Note: It was the solution to add the Scrollable function call within the Ajax $.get function.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now