When working with JavaScript, we can have more problems than not having JavaScript available; for example, the called URL not being available, a timeout, or something similar.

That can be quite inconvenient for our visitors, especially if they don't know that something bad has happened. Taking our mod_littlecontact as an example again, this module uses the following script to make the AJAX call:

$.post("index.php", $("#sc_form").serialize(), show_ok());
        

Instead of writing this URL, misspell it as follows:

$.post("inde.php", $("#sc_form").serialize(), show_ok());
        

Well, you can give it a try, but I would like to tell you that no errors will occur. All will work as expected, except that the mail will not be sent.

This can be quite a problem when developing, as we won't really know where the error is happening. But think about our visitors; they will see the "mail sent ok" message, which is not true.

Of course, we can do something about this. For example, let's modify our modules/mod_littlecontact/js/littlecontact.js file just after this line of code:

jQuery(document).ready(function($){
        

We are going to add this little piece of JavaScript:

$.ajaxSetup({
            error:function(x,e){
            if(x.status==404){
            alert('URL not found.'),
            }else if(e=='timeout'){
            alert('Request Time out.'),
            }else {
            alert('Unknow Error.
'+x.responseText);
            }
            }
            });
        

Here we are using the ajaxSetup method to set default values for all AJAX calls that are going to be made—in our example, only the post one. We are defining some possible errors, and if we now try to send the form, we will see an alert as follows:

This is a good start, as now when the error happens, we see some advice. That can help us while developing, but for our visitors, it can be a bit misleading. That's because our visitors will see the error message, but in our module they will read the following:

So they will see the error alert message, but also the module saying the form has been sent okay. Anyway, I don't like alerts, as visitors may think they have done something bad. So, we are going to remove the alert and use our Firebug instead:

$.ajaxSetup({
            error:function(x,e){
            if(x.status==404){
            console.log('Url not found'),
            }else if(e=='timeout'){
            console.log('Request timeout'),
            }else {
            console.log('Unknow Error.
'+x.responseText);
            }
            }
            });
        

And the result of this code, when the form is submitted again, would be something quite similar to the next Firebug screenshot:

Here we can see our message telling us the problem that continues to be of help for us. But what about our visitors? Let's help them. To do this we are going to modify the ajaxSetup method just a bit, as follows:

$.ajaxSetup({
            error:function(x,e){
            if(x.status==404){
            console.log('Url not found'),
            show_error('There was a problem sending the form, please try later.'),
            }else if(e=='timeout'){
            console.log('Request timeout'),
            show_error('There was a problem sending the form, please try later.'),
            }else {
            console.log('Unknow Error.
'+x.responseText);
            show_error('There was a problem sending the form, please try later.'),
            }
            }
            });
        

As we can see now, after the console.log call, we make a call to another function, show_error, which has the following code in it:

function show_error(message){
            $("#message_sent").html("<br/><br/><br/><h1>"+message+"</h1><br/> <br/><br/><a href='http://index.php' class='message_link' id='message_back'>Back to the form</a>");
            $("#sending_message").addClass("hidden_div");
            $("#message_sent").removeClass("hidden_div");
            $("input:text").val(''),
            $("textarea").val(''),
            }
        

This function modifies the content of the message_sent DIV, using the HTML jQuery method. So, we can show an error message to our visitors when something goes bad. They will see a message like the one in the following screenshot:

This way our visitors will know that something has gone wrong. Their form has not been sent, and they must try again, or use another way of contacting us.

Of course, there are more request states, and not just the 404. Just in case you want to take into account other possible errors, you can check them at the following URL:

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html.