jquery ajax using 'addresses' to update url for bookmarking

Question

$("document").ready(function(){
    contM = $('#main-content');
    contS = $('#second-content');
    $(contM).hide();
    $(contS).hide();
    function loadURL(url) {
        console.log("loadURL: " + url);
        $.post(url,{post_loader: 1},{post_loader: 1}, function(data){
                                                               $(contM).html($(data));
                                                               $(contM).show();
                                                               });
    }


    // Event handlers
    $.address.init(function(event) {
        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
        $.post($('[rel=address:' + event.value + ']').attr('href'), {post_loader: 1}, function(data){
                                                                                               $(contM).html($(data));
                                                                                               $(contM).show();
                                                                                               });
        console.log("change");
    })

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

I'm using this code to make calls to a server to update the main content of a web page. Everything works fine in Google Chrome, but fails to execute properly in Firefox.

The strange thing is that when I have the console open to monitor server communication, the application works fine, only when it is closed do problems occur : the script starts to communicate with the server, but before it receives the data the browser jumps to the source url.

I keep getting this error in the firebug console : e.success.call is not a function http://localhost/webDev/lostine/wp-content/themes/lostine/js/jquery-1.4.1.min.js Line 121

any ideas?

Answer 1

As wesgarrison commented, console isn't always present in FireFox like it is in Chrome and you'll get an console is undefined error. You need to comment out the console.log() lines when not debugging, or wrap them in a if(console){} check.

The reason it works when the console is out...console is defined then, no errors :)

Answer 2

To handle different browsers with and without console, I use a slightly adapted version of Paul Irish's wrapper, http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog :

window.log = function () 
{
    if (window.console) {
        if (console.firebug) {
            console.log.apply(console, Array.prototype.slice.call(arguments));
        } else {
            console.log.call(console, Array.prototype.slice.call(arguments));
        }
    }
};