How to redirect to page when there is 404 and 500 error on jquery load function

Question

Hi Guys,

I am using JQuery

I have got below JQuery code

$(document).ready(function() 
{
        //Looking for each element in the file which has a class "load-fragment" in it
        $(".load-fragment").each(function()         
        {          
            var $objThis = $(this);
            var fname = $objThis.attr("href"); //Getting the href of the element
            var dynDivID = "divContent"+ $objThis.attr("id");  //Name of the dynamic div ID
            var newDiv = $("<div>").attr("id",dynDivID)
            .load(fname+ " #tab-container", {pupdate:"true"},function(response, status, xhr) 
            {
                if (status == "error") 
                {
                    //var msg = "Sorry but there was an error: ";
                    //newDiv.append(msg + xhr.status + " " + xhr.statusText);

                    window.location.href = "www.myerrorpage.aspx";
                }

            })//Loading page fragment from the given link
            .hide()//Hiding all the newly created DIVs
            .addClass('dynDiv')//Adding CSS to newly created Dynamic Divs
            .append($('<img/>').attr({ src: '/system/Images/ajax-loader-circle-thickbox.gif', alt: '', style:'margin:50px 0px 50px 185px' }));//Adding the loading.gif file
            $("#container-4").append(newDiv);//adding new div in div column2
        });    
        $(".load-fragment").click(function(event) 
        {
            // load page on click  
            var $thiz = $(this); //making the current object    
            $thiz.attr("href", "#");         
            $(".tabs-nav li").removeClass("tabs-selected"); //removing the css from the li
            $thiz.parent().addClass("tabs-selected"); //adding the selected class to the parent on click
            $("#tab-container").hide(); //playing with hide and show
            $(".dynDiv").hide();
            $("#divContent" + $thiz.attr("id")).show(); 
            return false;   
        });           

}); 

If you see above Jquery code I am using .load function and further checking for the errors coming on httprequest. Now as this .load function is written on $(".load-fragment").each(function() it redirecting to the error page on the first page load only if there is any error coming while sending httprequest for any links having .load-fragment class on it, I want that should be redirect only if user clicks that link only not on the page load.

Please suggest!

Answer 1

Hi Guys,

I solved the above issue with below code changes. //Function added for destination Tabs functionality

$(document).ready(function() 
{
        //Looking for each element in the file which has a class "load-fragment" in it
        $(".load-fragment").each(function()         
        {          
            var $objThis = $(this);
            var fname = $objThis.attr("href"); //Getting the href of the element
            var dynDivID = "divContent"+ $objThis.attr("id");  //Name of the dynamic div ID
            var newDiv = $("<div>").attr("id",dynDivID)
            .load(fname+ " #tab-container", {pupdate:"true"},function(response, status, xhr) 
            {
                //Checking whether response contains class "formContainer" in it or not
                if( $(response).find('#tab-container').find('.formContainer').length ) 
                {                    
                    ($objThis).unbind("click"); //Removing the attached click event                                                  
                }      
                if (status == "error") 
                {               
                    newDiv.removeClass('dynDiv');
                    newDiv.addClass('errorDiv');
                }
            })//Loading page fragment from the given link
            .hide()//Hiding all the newly created DIVs
            .addClass('dynDiv')//Adding CSS to newly created Dynamic Divs
            .append($('<img/>').attr({ src: '/system/Images/ajax-loader-circle-thickbox.gif', alt: '', style:'margin:50px 0px 50px 185px' }));//Adding the loading.gif file
            $("#container-4").append(newDiv);//adding new div in div column2
        });    
        $(".load-fragment").click(function(event) 
        {
            // load page on click  
            var $thiz = $(this); //making the current object   
            var link =  $thiz.attr("href");

            $(".tabs-nav li").removeClass("tabs-selected"); //removing the css from the li
            $thiz.parent().addClass("tabs-selected"); //adding the selected class to the parent on click
            $("#tab-container").hide(); //playing with hide and show
            $(".dynDiv").hide();

            if ( $("#divContent" + $thiz.attr("id")).hasClass("errorDiv") )
            {
                $("#divContent" + $thiz.attr("id")).show();                         
                setTimeout(function(){location.href=link;},200);    
            }
            else
            {            
                $("#divContent" + $thiz.attr("id")).show(); 
                $thiz.attr("href", "#");  
                $(".errorDiv").hide(); 
            }
            return false;   
        });           

}); 
//End of function

Please have a look and suggest if any changes required!