Hi,
We have looked into the issue and found the root of the problem to be the way JQuery loads the tab page (PageLoader.aspx) into the host page (NotWorking.aspx). Detailed analysis about this issue and a few possible solutions are provided below. The issue can affect any ASP.NET page and is not particular related to our product.
How JQuery Tab worksJQuery tab works by AJAX loading the tab page (in your case PageLoader.aspx), taking the HTML output of that page, "clean it up" and then "place" the cleaned up output into your tab container in your host page (in your case "container-1" in NotWorking.aspx). An example:
Step 1: Your host page is loaded
Code: HTML/ASPX
<form id="form1">
....
<div id="container-1" class="tab_container">
....
</div>
....
</form>
Step 2: The tab content page is loaded
Code: HTML/ASPX
<html>
<body>
<form id="form1">
tab page contents....
</form>
</body>
</html>
Step 3: "Clean up" tab content page output. Note the code actually takes a string input and returns an array of DHTML elements. Here we show the "cleaned up" HTML only for demonstration purpose:
Code: HTML/ASPX
<form id="form1">
tab page contents....
</form>
Step 4: "Place" the cleaned up HTML into the container DIV:
Code: HTML/ASPX
<form id="form1">
....
<div id="container-1" class="tab_container">
<form id="form1">
tab page contents....
</form>
</div>
....
</form>
Now the contents of PageLoader.aspx appears inside NotWorking.aspx as a tab (causing JavaScript error though).
The ProblemAs step 4 demonstrates, the final HTML generated by JQuery Tab created nested form elements (even with the same ID!). This is not allowed in HTML and it seriously confused browser. This is the root cause of all sorts of mysterious JavaScript errors when you use JQuery Tabs with ASP.NET.
The SolutionIn order to solve the problem, nested form elements must be avoided. That means you need to either remove the form element in your host page (NonWorking.aspx) or in your tab page (PageLoader.aspx), or rearrange them so that they do not overlap.
Rearranging them should be the easiest solution. If the host page can be changed to:
Code: HTML/ASPX
<form id="form1">
....
</form> ....
<div id="container-1" class="tab_container">
....
</div>
That should solve the problem nice and clean. Note the tab container is no longer inside the form element.
If you can not arrange the form element that way, the you must removing one of the form element. Removing form element in your host page should be rather straight forward --- just remove the form element from the page. That should fix the JavaScript errors. However it can break other code in your page since ASP.NET is so profoundly built on top of HTML forms. Specifically, all input controls in your host page will stop working. For example, if you have a TextBox control in your host page, then it will stop working once you remove the form element. As such removing the form element from your host page can only be a solution for you when you have no other input elements in the page.
Removing form element in your tab page poses the same problem ---- DatePicker itself is an input element. So removing form element would cause that to stop working. In fact DatePicker control throws out an error unless it is being placed inside a form element.
The most effective solution, as our research indicates, seems to be modifying JQuery script so that step 1 and step 2 (see "How JQuery Tab works" section) is not changed, but take the form element out in step 3. This changes the final output in step 4 into:
Code: HTML/ASPX
<form id="form1">
....
<div id="container-1" class="tab_container">
tab page contents....
</div>
....
</form>
This is valid HTML and should not cause any problem.
Follow these steps to take this approach:
1. Open JQuery.js (or JQuery.source.js in your case) with a text editor;
2. Search for the following code segment:
Code: JavaScript
clean: function( elems, context ) {
.....
if ( typeof elem == "string" ) {
// Fix "XHTML"-style tags in all browsers
....
3. Change it to:
Code: JavaScript
clean: function( elems, context ) {
.....
if ( typeof elem == "string" ) {
// Remove form tags
elem = elem.replace(/<form[\w\W]*?>/gi, "");
elem = elem.replace(/<\/form>/gi, "");
// Fix "XHTML"-style tags in all browsers
....
Note the two added lines that removes open and close form tag.
Please keep in mind since this still removes the form element, it would inevitably break the normal ASP.NET page life cycle. Specifically, server events in your tab page will stop working. For example, if you have an ASP.NET Button in PageLoader.aspx, once it is loaded into NonWorking.aspx (which should be working now), the button's server side event handler will
no longer be called when you click the button. The first solution (rearranging form elements so that they do not overlap) does not have this issue.
Hope this helps.
Thanks