• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 544
  • Last Modified:

Opening jQuery Dialogs on Click

I have spent all day wrestling with jQuery syntax to call a dialog by clicking on a button. Each of the few examples I have found approach it differently and I cannot find a good middle ground. The official site examples only show how to open a dialog on page load, not when a button is clicked.

Below is a very simple form with the code at the state where I finally gave up. ;-) There is currently not $(document).ready function because I never got it correct.

I just need each of the two buttons in the form to open its own confirmation dialog. One should confirm to follow a link. The other should confirm to submit the form. (The third button is just a standard Submit button.)  

Could anyone fix this for me so I have a working example and can get back to work?

Thank you.
<html>
<head>
  <title>jQuery Dialog Test</title>
  <script type="text/javascript" src="ui/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.draggable.js"></script>
  <script type="text/javascript" src="ui/ui.resizable.js"></script>
  <script type="text/javascript" src="ui/ui.dialog.js"></script>
  <script type="text/javascript" src="ui/jquery.bgiframe.js"></script>
  <script type="text/javascript">

  $("#dialog").dialog({
    bgiframe: true,
    resizable: false,
    modal: true,
    buttons: {
      'Go to link': function() { [Go to www.example.com] },
      Cancel: function() { $(this).dialog('close'); }
    }
  });
  $("#button1").click(function(e) {
    [ Confirmation dialog, okay follows a link ]
  }
  $("#button2").click(function(e) {
    [ Confirmation dialog, okay submits this form ]
  }
</script>
</head>
<body>
<form method='post' action='do_something.php' name='jquery_test'>
  <button id='button1' type='button'>Go to link with confirm</button><br>
  <button id='button2' type='button'>Submit with confirm</button><br>
  <input type='submit' value='Normal Submit'>
</form>
</body>
</html>

Open in new window

0
jbbarnes
Asked:
jbbarnes
  • 4
  • 3
1 Solution
 
kadabaCommented:
like this?

<html>
<head>
  <title>jQuery Dialog Test</title>
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  
  <script type="text/javascript">
 $(document).ready(function(){
  $("#button1").click(function(){
		$("#dialog").html("<i>Go to google.com?</i>");
		$("#dialog").dialog({
		bgiframe: true,
		resizable: false,
		modal: true,
		buttons: {
		  'Go to link': function() { window.location="http://www.google.com"; },
		  Cancel: function() { $(this).dialog('close'); }
		}
	  });
	});
	$("#button2").click(function(){
		$("#dialog").html("<i>Are you sure tosubmit the details?</i>");
		$("#dialog").dialog({
		bgiframe: true,
		resizable: false,
		modal: true,
		buttons: {
		  'Submit': function() { $('#myForm').submit(); },
		  Cancel: function() { $(this).dialog('close'); }
		}
	  });
	});
});

</script>
</head>
<body style="font-size:62.5%;">

<form id="myForm" method='post' action='do_something.php' name='jquery_test'>
  <div id="dialog" title="Confirm"></div>	
  <button id='button1' type='button'>Go to link with confirm</button><br>
  <button id='button2' type='button'>Submit with confirm</button><br>
  <input type='submit' value='Normal Submit'>
</form>
</body>
</html>

Open in new window

0
 
kadabaCommented:
more appropriate way.
in the last method i had initialized the div on click which is not the right way, you can initialize on load and then show on click. sorry

<html>
<head>
  <title>jQuery Dialog Test</title>
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  
  <script type="text/javascript">
 $(document).ready(function(){
	$("#dialog1").dialog({
		autoOpen: false,
		bgiframe: true,
		resizable: false,
		modal: true,
		buttons: {
		'Go to link': function() { window.location="http://www.google.com"; },
		Cancel: function() { $(this).dialog('close'); }
		}
	});
	$("#dialog2").dialog({
		autoOpen: false,
		bgiframe: true,
		resizable: false,
		modal: true,
		buttons: {
		'Submit': function() { $('#myForm').submit(); },
		Cancel: function() { $(this).dialog('close'); }
		}
	});
	$("#button1").click(function(){
		$("#dialog1").html("<i>Go to google.com?</i>");
		$("#dialog1").dialog('open');
	});
	$("#button2").click(function(){
		$("#dialog2").html("<i>Are you sure tosubmit the details?</i>");
		$("#dialog2").dialog('open');
    });
});

</script>
</head>
<body style="font-size:62.5%;">

<form id="myForm" method='post' action='do_something.php' name='jquery_test'>
  <div id="dialog1" title="Confirm"></div>
  <div id="dialog2" title="Confirm"></div>       
  <button id='button1' type='button'>Go to link with confirm</button><br>
  <button id='button2' type='button'>Submit with confirm</button><br>
  <input type='submit' value='Normal Submit'>
</form>
</body>
</html>

Open in new window

0
 
jbbarnesAuthor Commented:
Beautiful, Kadaba. Exactly as requested.

So this is what I am gathering from your solution. Please tell me if it is correct:

A) The dialog definitions and button click functions need to be defined within the document's ready function, which gets executed when the dialog is loaded.
B) The dialogs are defined when the document is opened, and the autoOpen: false ensures they are not displayed until ready.

Thanks again.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
jbbarnesAuthor Commented:
Fast and accurate. Excellent expert to receive help from.
0
 
kadabaCommented:
A) The dialog definitions and button click functions need to be defined within the document's ready function, which gets executed when the dialog is loaded.
Yes this will make the dialog ready for action

B) The dialogs are defined when the document is opened, and the autoOpen: false ensures they are not displayed until ready.
When autOpen false is given, the dialog wont open till its triggered to be opened.
which we are triggering on the button click.

i gathered everything form
http://docs.jquery.com/UI/Dialog

Thanks for the points and have a great day ahead.
0
 
jbbarnesAuthor Commented:
Kadaba,

Thanks for the example code. Perhaps you could look at this page and see what you think.

http://www.alaskamednet.com/jquery.html
0
 
kadabaCommented:
Hi jbbarnes,

I have replied to the mail Id.
Let me know.

Thanks,
Kadaba
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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