jquery ajax call from link loaded with ajax

Question

//deep linking 

$("document").ready(function(){
    contM = $('#main-content');
    contS = $('#second-content');
    $(contM).hide();
    $(contM).addClass('hidden');
    $(contS).hide();
    $(contS).addClass('hidden');
    function loadURL(URL) {
        //console.log("loadURL: " + URL);
        $.ajax({ url: URL, 
                type: "POST",
                dataType: 'html',
                data: {post_loader: 1},
                success: function(data){
                    $(contM).html(data);
                    $(contM).animW();
                    }
        });
    }

    // Event handlers
    $.address.init(function(event) {
        //console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
        $.ajax({ url: $('[rel=address:' + event.value + ']').attr('href'), 
                type: "POST",
                dataType: 'html',
                data: {post_loader: 1},
                success: function(data){
                    $(contM).html(data);
                    $(contM).animW();
        }});
        //console.log("change");
    })

    $('.update-main a').live('click', function(){
        loadURL($(this).attr('href'));
    });

  $(".update-second a").live('click', function() {
    var link = $(this);
        $.ajax({ url: link.attr("href"), 
                dataType: 'html',
                data: {post_loader: 1},
                success: function(data){
                    $(contS).html(data);
                    $(contS).animW();
        }});
  });

});

I'm using jquery and the 'addresses' plugin to load content with ajax and maintain pagination. The problem I'm having is some content loads with links which are intended to load content into a secondary window.

I'm using the .live() method to allow jquery to listen for new links loaded into the primary content div.

This works until the .ajax() method is called for these fresh links loaded with ajax, where the method begins, but follows the original link before data can be received. I'm assuming the problem is in the client-side scripting, but it may be a problem with the call made to the server. I'm using the wordpress loop to parse the url and generate the html loaded via jquery.

Thanks for any tips!

Answer 1

The problem is when you click on an <a>, your browser says "hey go there"...need to stop this behavior in the script by adding return false; (or e.preventDefault();), like this:

$('.update-main a').live('click', function(){
    loadURL($(this).attr('href'));
    return false;
});

$(".update-second a").live('click', function() {
  var link = $(this);
    $.ajax({ url: link.attr("href"), 
            dataType: 'html',
            data: {post_loader: 1},
            success: function(data){
                $(contS).html(data);
                $(contS).animW();
    }});
    return false;
});

The alternative is this format:

$('.update-main a').live('click', function(e){
    loadURL($(this).attr('href'));
    e.preventDefault();
});