How to redirect to page when there is 404 and 500 error on jquery load function
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 开发者_StackOverflowin 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!
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!
精彩评论