Solved

stay on the same jquery tab after submit

Posted on 2013-05-13
4
3,289 Views
Last Modified: 2013-05-19
Hi all,

I'm new with JQuery, and I'm trying to work with JQuery Ajax Tabs, in a java/JSP app.

There is a results list on every tab, and users should be able to modify any of these records.

When the user click on the "edit" link of any record, a form is invoked and loaded on the current tab.

So far, everything works fine.

The problem comes when the user clicks the submit button, then the JSP called is executed but the tabs are gone, it's executed in it's normal original way, and I want this to be shown inside the tab.

I've seen some examples where pretty much they handle all the logic of the operation on the JQuery side. That logic is already implemented on my JSP, and even though I could get rid of that, and develop a new one on the JQuery side, that's not desirable at all.
I just want the JSP to be executed normally and show the output in the same tab where the form is/was.

In this particular case, I'm talking about a couple of fields only, but there are other JSP's in the app that handle more fields and more complicated logic, which would be really painful to develop using JQuery, at least for a newbie in that area like me.

Here's the code of the main JSP which contains the JQuery tabs, there are some comments too:

<link rel="STYLESHEET" type="text/css" href="../resources/jquery/1.9.1/themes/base/jquery.ui.all.css">

<script type="text/javascript" src="../resources/jquery/1.9.1/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../resources/jquery/1.9.1/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../resources/jquery/1.9.1/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../resources/jquery/1.9.1/ui/jquery.ui.tabs.js"></script>


<script type="text/javascript">
	$(function(){
		$('#tabs').tabs({
			load: function(event, ui) {
				$(ui.panel).delegate('a.myClass', 'click', function(event) {
					$(ui.panel).load(this.href);
					event.preventDefault();
				});

				$(ui.panel).delegate('a.anotherClass', 'click', function(event) {
					if (confirm('Are you sure you want to delete: \"' + $(this).attr('ID') + '\" ?')){
						$(ui.panel).load(this.href);
						event.preventDefault();
					} else {
						event.preventDefault();
					}

				});

				// here is the relevant part of the code. I use this 'delegate' event handler because otherwise, the function was ignored.
				
				$(ui.panel).delegate('form', 'submit', function(event) {
					event.preventDefault();
					var formSrc = $(this).attr('action'); // I've tried setting form's action to nothing and then specify it here, instead of reading it like it is now. What happened then was that the JSP wasn't called/executed, and I'm 100% that the string value was exactly the same in both cases.
					var formMethod = $(this).attr('method');
					var formData = $(this).serialize();

					var request = $.ajax({
					  url: formSrc,
					  type: formMethod,
					  data: formData,
					  success: function(data){
						$(ui.panel).html(data);
					}
					});

					// alert('if i un-comment this alert box, then it works...but only some times, and also only if the formSrc variable is specified explicity, WEIRD RIGHT??');
					
					request.fail(function(jqXHR, textStatus) {
						alert( "Request failed: " + textStatus ); //this one doesn't do anything
					});

				});

			}
		});
});

</script>

Open in new window


Here is the code where the tabs are created:

<div id="tabs">
	<ul>
		<li><a href="listUsers.jsp?tipoU=1" class="myMenu">Firs Tab</a></li>
		<li><a href="listUsers.jsp?tipoU=2" class="myMenu">Second Tab</a></li>
		<li><a href="listUsers.jsp?tipoU=3" class="myMenu">Third Tab</a></li>
		<li><a href="listUsers.jsp?tipoU=4" class="myMenu">Fourth Tab</a></li>
	</ul>
	<div id="tabs-1" class="tab">



	</div>
</div>

Open in new window


Now, here's the code of the form where the submit is done. There are no JQuery functions nor JQuery includes, since that's on the main JSP that contains the tab (the previous one).
I've also removed the <html></html> tags, on this JSP.

It's just a regular form, and the relevant code is:

<form action="changeUser.jsp" method="POST" name="myForm">

<div style="margin-left:240px">
<INPUT NAME="uName" class=inputBD value='<%= userData[1].trim()%>' size="20" maxlength=60>
.
.
.
some other fields...
.
.
.
</div>
</form>

Open in new window


There is a couple of plain and pure javascript functions here too that validates the form. I don't think they're relevant in this case since those are called before the form is submitted.

And finally, there's another JSP that actually performs the update operation. It's mostly java. Retrieves the parameters and call some java libraries and prints some small output, nothing to do with my problem now, so I'm not including it. The JSP works, I just want it to stay inside the tab!!

Any help will be really appreciated.

Regards!!
0
Comment
Question by:sergiomn
  • 2
  • 2
4 Comments
 
LVL 6

Expert Comment

by:worm-getter
ID: 39164290
0
 

Accepted Solution

by:
sergiomn earned 0 total points
ID: 39164339
After some error-trial-research session, I've fixed it.

The "problem" was that the submit was triggered from a normal, plain javascript function.

Originally, after some form input validation, I had this: myform.submit(); line, and there was no submit element, a simple button would call this js function.

I've changed it so the submit event is triggered by a submit element instead of a javascript call, and now it works.
0
 
LVL 6

Expert Comment

by:worm-getter
ID: 39164549
good work.
0
 

Author Closing Comment

by:sergiomn
ID: 39178254
After some error-trial-research session, I've fixed it.

The "problem" was that the submit was triggered from a normal, plain javascript function.

Originally, after some form input validation, I had this: myform.submit(); line, and there was no submit element, a simple button would call this js function.

I've changed it so the submit event is triggered by a submit element instead of a javascript call, and now it works.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now