Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Jquery UI - submit button

Posted on 2013-06-10
13
Medium Priority
?
1,026 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 59

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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 59

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 59

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 59

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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

704 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