In this post Asp.Net jQuery
UI Tab Error Handing for Dynamic Tabs we shall on
how to handle errors which occur while creating dynamic tabs and loading remote
data.
All exceptions which are thrown while creating and loading dynamic tabs can be handled using AjaxOption handlers as follows.
ajaxOptions:
{
error: function(XMLHttpRequest,
reqStatus, errIndex, Anchor)
{
$(Anchor.hash).html("Unable to load,contact Administrator");
}
}
When there is an exception in loading the tab data the message ("Unable to load,contact Administrator" will get displayed in the tab.
Full Example
When there is an exception in loading the tab data the message ("Unable to load,contact Administrator" will get displayed in the tab.
Full Example
Add a DIV tag SimpleTab to
the page, and add the below jQuery script. Change the
references of the jQuery library files to map to your local path.
Click the Handle Error button, this will error out as this is trying to load a page which does not exist, hence the error message ("Unable to load,contact Administrator" will get displayed in the new tab.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Tabs</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
// Simple Tab
$("#SimpleTab").tabs({ collapsible: true });
//
// Tabs -
AjaxOption Error Handling
$('#btnHandleError').click(function(event) {
event.preventDefault();
$("#SimpleTab").tabs(
{
collapsible: true,
ajaxOptions:
{
error: function(XMLHttpRequest, reqStatus, errIndex, Anchor)
{
$(Anchor.hash).html(
"Unable to load, contact Administrator");
}
}
});
$('#SimpleTab').tabs("add", 'Error.aspx?TabID=5',
'Tab-4');
});});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Simple Tab: </td>
<td>
<div id="SimpleTab">
<ul>
<li><a href="#tab1">Tab-1</a></li>
<li><a href="#tab2">Tab-2</a></li>
<li><a href="#tab3">Tab-3</a></li>
</ul>
<div id="tab1">
Tab-1 Content goes here.
</div>
<div id="tab2">
Tab-2 Content goes here.
</div>
<div id="tab3">
Tab-3 Content goes here.
</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Tabs - Ajax Error Handling</td>
<td>
<asp:Button
ID="btnHandleError"
runat="server"
Text="Handle Error" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
No comments:
Post a Comment