Grow your CSS skills. Land your dream job.

run scripts in a page loaded by ajax

  • # September 27, 2012 at 10:54 pm

    The fact that all script code is being removed when you use jquery.load is really annoying. I am trying to use AJAX so I do not need to reload the entire page.

    Script, currently:

    $(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $(‘#nav li a, #nav-top li a, #nav-left li a, #nav-right li a’).not(‘.scroll’).each(function(){
    var href = $(this).attr(‘href’);
    if(hash==href.substr(0,href.length-4)){
    var toLoad = hash+’.php #content';
    $(‘#content’).load(toLoad)
    }
    });

    $(‘#nav li a, #nav-top li a, #nav-left li a, #nav-right li a’).not(‘.scroll’).click(function(){

    var toLoad = $(this).attr(‘href’)+’ #content>*'; // there must be a blank space in ‘ #content>*’
    $(‘#content’).hide(888,loadContent);
    $(‘#load’).remove();
    $(‘#wrapper’).append(‘LOADING…‘);
    $(‘#load’).fadeIn(888);
    window.location.hash = $(this).attr(‘href’).substr(0,$(this).attr(‘href’).length-4);
    function loadContent() {
    $(‘#content’).load(toLoad,”,showNewContent())
    }
    function showNewContent() {
    $(‘#content’).show(888,hideLoader());
    }
    function hideLoader() {
    $(‘#load’).fadeOut(888);
    }

    return false;

    });
    });

    Working demo example page here:

    http://www.ideagasms.net/index2 (Just click the ‘home’ and ‘about’ links to see it in action.)

    I have all of my jquery in three files that are minified; they include things like php/jquery shopping cart, lazyload, lightbox, and more. I’d like all three of my main js files to “stay alive” so that, when I add, for example, an ‘add to cart’ button or img.lazyload to the #content div, those things will still function.

    I’ve heard that the livequery plugin is a decent solution, but it’s way over my head, and to me it seems like possible overkill.

    There must be a way to modify the above script to include one.min.js two.min.js and three.min.js and thus “retrigger” them so they stay active.

    If this question is a big deal I’m willing to hire whoever can figure this out. I can then re-post the solutions here. (This question I’m asking has been asked all over the place, including the main nettuts page where I got the above “load in and animate content using jquery” script, and the solution still evades most people, although some have managed to fix this, I can’t figure out how to implement their solutions. Whoever can resolve this once and for all will be helping hundreds of frustrated people in one shot. You build a whole new site using a nettuts tutorial, only to find out a week into the job that it’s no good for loading content that has associated scripts… it’s damn frustrating.)

    # September 27, 2012 at 11:47 pm

    You’ll just have to grab whatever functions you need and run them on your new content.

    # September 28, 2012 at 5:10 am

    I’ve tried about 40 different things; if someone here is interested in a little freelancing let me know.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".