Solved

Question: JQuery UI Diaolg on Button Click

Posted on 2009-05-11
4
804 Views
Last Modified: 2013-11-05
Does anyone know how to get any variant of the JQuery UI Modal Dialog to pop up and stay popped up when the user clicks a button?

I got the default example working great on my local machine (http://jqueryui.com/demos/dialog/#modal-confirmation).  The default example pops up on docready.  No problem.  Then I wanted it to only pop up when the user clicks "submit" on a form.  I thought this would take seven seconds, and seven hours later I'm out of options.

No code sample provided. ANY pointing in the right direction or any sample will be greatly appreciated.  BTW - I can get the modal dialog to pupup on the click event, but it disappears in a split second because of postback / form submit.  I'd think the modal: true would stop form submit in the same way that alert('hello world'); will totally stop a form submit but ... nope it doesn't.

Anyone?  Thanks in advance.
0
Comment
Question by:hb69
  • 3
4 Comments
 
LVL 12

Accepted Solution

by:
alien109 earned 500 total points
ID: 24358865
shouldn't be too tough...

add an onsubmit event handler to the form (that returns false!) then in that handler function get the node that holds the content you want displayed and execute the dialog method.

something like:
<script type="text/javascript">
function openDialog() {
    $("#dialogContent).dialog();
    return false;
}
</script>

<div id="dialogContent" style="display:none;">Hi there</div>
<form id="test" onsubmit="return openDialog();">
....
</form>
0
 
LVL 1

Author Comment

by:hb69
ID: 24364383
Here's the deal.  I'm going to give you the points because what you suggested worked in non IE browsers.  That it totally crashes Internet Explorer is not your fault and not a fault of your solution.  But, none the less I cannot do what you suggested because of a well known IE issue.  I'm using .net BTW.

If you are aware of how to work around the IE Bug (freezes the screen so hard that you can't even close IE except through the task manager and even then doesn't shut down gracefully) you or somebody else should post that as a separate solution.

Thanks!
0
 
LVL 1

Author Closing Comment

by:hb69
ID: 31580319
Very good, except for the IE Bug that makes it impossible to implement your suggestion.
0
 
LVL 1

Author Comment

by:hb69
ID: 24366110
UPDATE:

I used a workaround and rescued my pretty dialog box from oblivion.  What I did was I created two panels on my form.  During initial login we show one panel.  That panel does not contain the <div> for the UI Dialog, and it does not contain the JS.  IF upon postback the conditions exist for the dialog to display, I then set the first panel to visible=false, and visible = true to the other panel which contains the dialog box and it's JS.  It pops up and asks it's questions.

Apparently, IE is totally OK with this solution.  It does not affect how the javascript is written, but does affect when it can be placed on the page.  I don't know if this is the best solution or even a good solution but it works and I'm moving forward with it.

Adding the attribute to the form itself (onSubmit do this)  so that a validate javascript halts the execution of code seems to not work well in .net/IE.  So my advice for those who read this is if you are using .net, then place your dialog in panels and show the panel with the dialog as needed, and place all dialog code (html and js) inside of that panel.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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…

707 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

15 Experts available now in Live!

Get 1:1 Help Now