Archive for the 'Ajax' Category
Validating Controls within Ajax Tab Panels/Tab Control
Normally when we are using Ajax TabContols in aspx page with validation controls enabled on each and every TabPanel. Suppose if iam having 3 tab panels in TabControl and every tabpanel has some validations enabled and if iam in 1st panel and I submitted the form by clicking the button and in the 1st panel every thing is ok i.e. I filled all my required fields on the 1st TabPanel. But I left some fields blank on the 2nd and 3rd TabPanel; when you click on submit button the validations will be enabled on 2nd and 3rd panel but the tab index of the TabControl will be still on the 1st TabPanel only. But we want TabIndex to automatically change based on the validation failed on the TabPanel. In order to do that we have to write a piece of JavaScript as show below:
<script type=”text/javascript”>
var handleTabChange = true;
function ValidatePage()
{
if(handleTabChange)
{
if (Page_ClientValidate(‘Tab1′) == false)
{
$find(“<%=TabContainerAddEnquiry.ClientID%>”).set_activeTabIndex(0);
}
else if (Page_ClientValidate(‘Tab2′) == false)
{
$find(“<%=TabContainerAddEnquiry.ClientID%>”).set_activeTabIndex(1);
}
else if (Page_ClientValidate(‘Tab3′) == false)
{
$find(“<%=TabContainerAddEnquiry.ClientID%>”).set_activeTabIndex(2);
}
}
else
{
handleTabChange = true;
}
}
</script>
No comments
Maintain tab index on Ajax tab control with post back
I have a DropDownList in 2 different Tab Panels in a TabContainer (from the AJAX control toolkit on ASP.NET’s website) and I discovered that the TabContainer does not maintain state on postbacks for DropDownLists. In other words, if I am on the second tab and I changed the value of the DropDownList (w/ AutoPostBack=”true”), I always return to the first tab (index 0).
In order to solve the above problem, we have to write a piece of Code in JavaScript as show below:
<script type=”text/javascript”>
function SaveActiveTabIndex(sender, e)
{
var activetabindex = sender.get_activeTab().get_tabIndex();
setCookie(activetabindex);
}
function setCookie(value)
{
document.cookie = “tabIndex=” + escape(value) ;
}
</script>
No comments
