Solved

Jquery UI - submit button

Posted on 2013-06-10
13
981 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
  • 5
  • 5
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39237075
0
 
LVL 51

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
 
LVL 51

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 51

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 51

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 51

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
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…

758 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

20 Experts available now in Live!

Get 1:1 Help Now