How to degrade gracefully with ajax loops

Question

I have a main loop that I replace with other loops when certain icons are clicked. Each loop actually has it's own page but for users using javascript I simply allow them to switch loops in the homepage content area. I read a tutorial on how to do it and it uses # as the href for links which doesn't allow me to link to the actual page and just have javascript ignore that link and do the ajax instead. So my question is how can I set this process below up so it degrades gracefully.

I have a page called mysite.com/my-favorites.

This is how I call that pages content with ajax on my homepage.

<a id="fav" class="trigger-loop" href="#"><div id="favorite-icon"></div></a>

jQuery(document).ready(function($){
 $('#fav.trigger-loop').click(function(){
    $('.trigger').removeClass('active');
    $('.trigger-loop').removeClass('active');
    $('#fav.trigger-loop').addClass('active');
    $('#boxes').empty();
    $.post(
        WPaAjax.ajaxurl,
        {
            action : 'loop_fav',
        },
        function( response ) {
            $('#boxes').append( response ).masonry( 'reload' );
            $('.panel').hide("slow");
        }
    );
 });

});

add_action('wp_ajax_loop_fav', 'loop_fav');
function loop_fav(){
 wpfp_shortcode_func();

 exit;
}    

Answer 1

If I've got your question right.

Add the url instead of #,

<a id="fav" class="trigger-loop" href="mysite.com/my-favorites"><div id="favorite-icon"></div></a>

and in your click function, return false; so your page does not jump to the specified url and do an ajax instead.

 $('#fav.trigger-loop').click(function(){
     ... your code...
     ... your code....
     return false; 

 })