Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1035
  • Last Modified:

Jquery UI - submit button

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
Rose_Taylor
Asked:
Rose_Taylor
  • 5
  • 5
1 Solution
 
Michel PlungjanIT ExpertCommented:
0
 
Julian HansenCommented:
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
 
Rose_TaylorAuthor Commented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Julian HansenCommented:
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
 
Rose_TaylorAuthor Commented:
Please give me details about another solution.How to to call the form again ?
0
 
Julian HansenCommented:
Read the second part of my last post ...
0
 
Rose_TaylorAuthor Commented:
<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
 
Julian HansenCommented:
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
 
Rose_TaylorAuthor Commented:
Please give me example using ajax ?
0
 
Julian HansenCommented:
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
 
Rose_TaylorAuthor Commented:
Partial accepts
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now