jQuery UI tabs not loading in the same tab

[Joe San]

The following snippet renders a jQuery UI tab (let's call this screen-1). Each tab has a set of form which calls its respective action. One strange problem that I noticed is the following:

Click on one of the forms in any one of the tabs. This will load the contents of the new jsp page in the same tab. This new jsp page has a so called "Get me home" link and on click of this link, I can return to the main page that renders the tab (the screen-1). When I'm in the new jsp page rendered by one of the tabs, I click on another tab which also has a form and it opens the corresponding jsp in a new window rather than opening it in the same tab.

<%@ taglib prefix="s" uri="/struts-tags" %>
<link type="text/css" href="<%=request.getContextPath()%>/css/common/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common/url-param.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common/jquery-ui-1.8.14.custom.min.js"></script>

<div class="content">		
    	<div class="item">
		<h1>Mock Exams and Stuff</h1>
		<p>Please click on the tabs below to learn more!</p>
	</div>
	<div class="item">
		<script>
		$(document).ready(function() {
		    $(function() {
			$( "#tabs" ).tabs();
		    });
		});

		$(document).ready(function(){
		    var param = $(document).getUrlParam('selectedTab');
		    $('#tabs').tabs();
			$('#tabs ul a').tabs('select', param);

		});

		$(document).ready(function(){
		    // set the tabs
	            $("#tabs").tabs();
		    // Capture the form's submit event
	            $('.inlineForm').live('submit', function() {
		    	var $tabs = $('#tabs').tabs();
		    	var selected = $tabs.tabs('option', 'selected');
		    	$('#hiddenTabId').val(selected);
		    	alert($('#hiddenTabId').val());
		    	$.ajax({ // create an AJAX call...
		        	traditional: true,
				data: $(this).serialize(), // get the form data
				type: $(this).attr('method'), // GET or POST
				url: $(this).attr('action'), // the file to call
				success: function(response) { // on success..
					$('.ui-tabs-panel:visible').html(response); // update the DIV			
				}
		    	});
	       	    return false; // cancel original event to prevent form submitting
		    });
		});
		</script>
		<div id="mockExamTabs">
			<div id="tabs" style="height:420px;" >
				<ul>
				  <li><a href="#tabs-1">Read Me</a></li>
				  <li><a href="#tabs-2">Core Java</a></li>
				  <li><a href="ajax/content2.html">JSP and Servlets</a></li>
				  <li><a href="ajax/content2.html">JSF</a></li>
				  <li><a href="ajax/content3-slow.php">EJB</a></li>
				  <li><a href="ajax/content4-broken.php">JPA</a></li>
				  <li><a href="ajax/content4-broken.php">Spring</a></li>
				  <li><a href="ajax/content4-broken.php">Other Frameworks</a></li>
				</ul>
			    <div id="tabs-1">
				  <p style="color:black">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxx
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find

					<s:form action="startExam" namespace="/content" cssClass="inlineForm">
						<s:textfield name="firstname" id="firstName" label="First Name"/>
						<s:hidden id="hiddenTabId" name="hiddenTab" value=""/>
						<s:submit value="Submit Registration"/>
					</s:form>

					
				  </p>
			    </div>
			    <div id="tabs-2">
				  <p style="color:black">
					This page has a lot to offer. But it is in the very beggining of its inception... Just browse through the tabs and you will find
					ample resources to articles and certifications.</br></br>
					
					The following sample exams are available. (This will be iterated and shown here)</br></br>


					<s:form action="startExam" namespace="/content" cssClass="inlineForm">
						<s:textfield name="firstname" id="firstName" label="First Name"/>
						<s:hidden id="hiddenTabId" name="hiddenTab" value=""/>
						<s:submit value="Submit Registration"/>
					</s:form>

					<s:url id="url" action="startExam" namespace="/content" />
					<s:a cssClass='tab-loader' href="%{url}" >My Link</s:a></br></br>				
					
					
					<a class='tab-loader' href="<s:url action='startExam' namespace="/content"/><s:param name="/attr/" value="/player"/>">Java Test 2</a> : 
                                         Focus on Constructor and Object creation</br></br>
					<a class='tab-loader' href="<s:url action='startExam' namespace="/content"/>">Java Test 2</a> : 
                                         Focus on Constructor and Object creation</br></br>
					<a href="<%=request.getContextPath()%>/pages/content/test3.html">Java Test 3</a> : Focus on Constructor and Object creation</br></br>
					<a href="<%=request.getContextPath()%>/pages/content/test4.html">Java Test 4</a> : Focus on Constructor and Object creation</br></br>
					<a href="<%=request.getContextPath()%>/pages/content/test5.html">Java Test 5</a> : Focus on Loops	
				  </p>
			    </div>
		    </div>
	    </div>
    </div>
</div>

[Joe San]

Unable to find out the reason why this happens, I tried to get rid of the problem by disabling the rest of the tabs excepting the currently selected tab.

[Joe San]

I have another simple question. How does this source code rendered above render the source code along with line numbers? Is this any UI widget that I can plug and use?

[Joe San]

I guess it is the syntax highlighter? Is there any open source tool that I can use?

[Bear Bibeault]

Please limit a topic to one question. Otherwise the responses can overlap and make the topic hard to follow.

[Joe San]

I'm sorry here. Though I'm here at the ranch for quite some time, felt a bit lazy to open a new thread!

[Bear Bibeault]

You will reap what you sow. Lazy, sloppy questions get lazy sloppy answers, or none at all.