Solved

stay on the same jquery tab after submit

Posted on 2013-05-13
4
3,568 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 

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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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…

636 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