On error no prevent default - reload page not using AJAX

Question

I have the following code to load data via AJAX:

   $().ready(function() {
        $('a:not(.flags a)').filter(function() {
            return this.hostname && this.hostname === location.hostname;
        }).addClass('internal_link');


        $(document).on('click', '.internal_link', function(e) {
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                dataType: 'json',
                success: function(data) {

                   contentWrapper = $('<div />').html(data.content);

                    $(contentWrapper).find('a').filter(function() {
                        return this.hostname && this.hostname === location.hostname;
                    }).addClass('internal_link');

                    document.title = data.meta_title;

                    $('#articlecontent').fadeOut(400, function()
                    {
                        $(this).fadeOut('slow').html(contentWrapper.html()).fadeIn('slow');
                    });

                    $('nav li a').removeClass('selected');
                    $('#nav_'+data.code).addClass('selected');
                    $('meta[name=keywords]').attr('keywords', data.meta_keys);
                    $('meta[name=description]').attr('description', data.meta_desc);

                    $("html, body").animate({ scrollTop: 0 }, "slow");
                },
                error: function(jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].');
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        alert('Time out error.');
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.');
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }
            });
            e.preventDefault();
        });

    });

I've prepared my PHP output to display in error Requested JSON parse failed. for testing purposes. At the moment when AJAX error occur at the moment I display alert what for normal user is useless. When I don't display any error using alert, user won't know what is going on. Maybe I'm wrong but the best would be in that case simple "unprevent default" what mean site should be reloaded not using AJAX.

I've already seen for example Best way to remove an event handler in jQuery? but when I add at the beginning of error function:

$(document).off('click', '.internal_link');

it makes that I have to click again on the link to reload page not using AJAX.

Also when I added in this function

return true;

the site isn't reloaded not using AJAX.

Is there any way to do that?

score 1 · Accepted Answer · answered Jun 01 '14 at 10:26

Ajax is asynchronous, so when the error handler fires it's too late to start removing the preventDefault or the event handler, but you could just redirect with javascript instead as these look like they are anchors.

Something like

$(document).ready(function () {
    var links = $('a:not(.flags a)').filter(function () {
        return this.hostname && this.hostname === location.hostname;
    });

    links.on('click', function (e) {
        e.preventDefault();

        var url = this.href;

        $.ajax({
            url: url,
            dataType: 'json',
            success: function (data) {

               // success handler
            },
            error: function (jqXHR, exception) {
                window.location.href = url; // redirect here
            }
        });
    });

});

Thank you. That's enough in my case – Marcin Nabiałek Jun 01 '14 at 12:19 — Marcin Nabiałek, Jun 01 '14 at 12:19

On error no prevent default - reload page not using AJAX

1 Answers1