Solved

Jquery UI - submit button

Posted on 2013-06-10
13
1,015 Views
Last Modified: 2013-06-18
Hello,

I have popup form with search function and datatable for display the results.Look into the below sample screen, have a text box and search button.search results get display in the below datatable and selecting the one value from datatable , that values will go to parent page.

Is kind of functionality is possible in Jquery UI model form ?

Thanks for help.
popup window
0
Comment
Question by:Rose_Taylor
[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
  • 5
  • 5
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39237075
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39237378
JQuery UI can handle the popup code for you but the rest of the functionality you will have to implement your self

In other words by doing the following with JQueryUI will create a popup using the html in the searchdialog div.
<div id="searchdialog">
<form>
 <p> Rest of form here</p>
</form>
</div>

$(function() {
  // on some event .... 
  $('#searchdialog').dialog();
});

Open in new window

To take the input from the search popup and populate your datatable and pass value from their to your parent page will require you to write code specifically to do that.
0
 

Author Comment

by:Rose_Taylor
ID: 39238690
Yes, I'm referring - http://jqueryui.com/dialog/#modal-form.

I have page which created by struts2 and in that page have link to open popup window which created using jquery UI dialog model form.

i have created the another form in same jsp page and have action button to do connect the database.Now while return back, i need to maintain the same popup window in the page.

How to maintain the same popup window ?

Example :

page A (parent jsp page) has form with action and buttons). Now i have created another form for popup window in same jsp page with another action button.

After submit the popup window submit button , i need to maintain the same popup window.

How to achive this ?
$( "#popup" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
});

$( "#dialog-form" ).dialog({ 
 autoOpen: false,
 height: 300,
 width: 350,
 modal: true,
 buttons : {
 "Use Selected" : function(){

 }
 }

 });

Open in new window


struts action form:

<div id="dialog-form">
<form action="product!finder" method="post">
<textarea id="TextArea" name="productNbr" ><s:property value='productNbr'/></textarea>
<s:submit action="product" method="finder" value="Search" />

Open in new window

0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39239139
The standard way is to use an AJAX call on submit of your Modal dialog so you don't do a post back for your whole page. This way the modal box remains open while the AJAX call completes in the background.

If you don't want to / can't do it that way then the other solution is when you render the page check to see if you need to display the model and then output the following javascript
<script type="text/javascript">
$(function() {
  $( "#dialog-form" ).dialog( "open" );
});
</script>

Open in new window

This will open the dialog when the page loads.
0
 

Author Comment

by:Rose_Taylor
ID: 39239183
Please give me details about another solution.How to to call the form again ?
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39239260
Read the second part of my last post ...
0
 

Author Comment

by:Rose_Taylor
ID: 39239299
<div id="aaa">
<form action="productxxx" methid="post">
---
 ----
</form>

<div id="dialog-form">
<form action="productfinder" method="post">
<textarea id="TextArea" name="productNbr" ><s:property value='productNbr'/></textarea>
<s:submit action="product" method="finder" value="Search" />

Form "xxx" is original form which forwarding to another page after submit the button.but second form is for popup window which has submit button, So I'm submitting the second form button, its searching another jsp page to forward,which is not correct.because i given action class return type as finder.So i given the return as "xxx" but its closing the popup window.But i need to maintain the popup window after submit the button.

So Are you saying that need to check the return type as finder , then open dialog box ?
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39239413
In that case you should consider using AJAX.

on submitting your form do a $.post to the search page and respond to the return data.
0
 

Author Comment

by:Rose_Taylor
ID: 39239484
Please give me example using ajax ?
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39240206
Without having the required information about your application - here is the basics of what you need - explanation below

$(function() {
  $('#productfinder').submit(function() {
   $.post('putformurlhere', $(this).serialize(), function(response) {
      $('#aaa').html(response);
   });
   return false;
  });
});

Open in new window

1. Intercept the form submit - for this give your form an ID (in the example I used id="productfinder")
2. Use the JQuery post to send your form data to the receiving page
3. In the $.post substitute the 'putformurlhere' constant with the url to your processing page.
4. the $(this).serialize() will collect all the form variables into a string to post to the  receiving script
5. The callback function receives the response from your script - again no information on how your page is structured so I am making assumptions
   a) That you want to change what is displayed in div id="aaa"
   b) That the responding script will generate the necessary html for this div
6. The productfinder script should then return the updated html to the $.post
7. The callback function then replaces the html in the div id="aaa" with the returned content.

Done.
0
 

Author Comment

by:Rose_Taylor
ID: 39248882
Partial accepts
0

Featured Post

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 how to implement Singleton Design Pattern in Java.
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)
Suggested Courses
Course of the Month10 days, 23 hours left to enroll

631 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