Discussion:
Modal Confirmation trying to use for form validation
Ron Mast
2010-04-19 14:44:56 UTC
Permalink
Good morning gang,

I'm attempting to use Modal Confirmation from
http://jqueryui.com/demos/dialog/#modal-confirmation

I have the example working and code looks like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link type="text/css" href="../../lib/themes/base/jquery.ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../lib/jquery-1.4.2.js"></script>
<script type="text/javascript"
src="../../lib/external/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript" src="../../lib/ui/jquery.ui.core.js"></script>

<script type="text/javascript"
src="../../lib/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../lib/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.button.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.position.js"></script>
<script type="text/javascript"
src="../../lib/ui/jquery.ui.dialog.js"></script>
<link type="text/css" href="../../lib/demos/demos.css" rel="stylesheet" />

<script type="text/javascript">

$("#dialog-confirm").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
'Delete all items': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});

</script>
</head>
<body>

<a href="#" id="showpopupbox">Click to show pupup</a>

<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0
7px 20px 0;"></span>These items will be permanently deleted and cannot
be recovered. Are you sure?</p>
</div>

</body>
</html>

-----------------------------------

As you can see I'm I have a href in place trying to apply a click
event to $('#showpopupbox') but with now success.

How would I go about doing this? I want to use this in my form
validation which i'm using jquery :).

Any help is greatly appreciated. Thanks!

Ron
Ron Mast
2010-04-19 15:19:50 UTC
Permalink
Nevermind....figured it out :)
Post by Ron Mast
Good morning gang,
I'm attempting to use Modal Confirmation from
http://jqueryui.com/demos/dialog/#modal-confirmation
<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8" />
       <title>jQuery UI Dialog - Modal confirmation</title>
               <link type="text/css" href="../../lib/themes/base/jquery.ui.all.css"
rel="stylesheet" />
               <script type="text/javascript" src="../../lib/jquery-1.4.2.js"></script>
               <script type="text/javascript"
src="../../lib/external/jquery.bgiframe-2.1.1.js"></script>
               <script type="text/javascript" src="../../lib/ui/jquery.ui.core.js"></script>
               <script type="text/javascript"
src="../../lib/ui/jquery.ui.widget.js"></script>
               <script type="text/javascript" src="../../lib/ui/jquery.ui.mouse.js"></script>
               <script type="text/javascript"
src="../../lib/ui/jquery.ui.button.js"></script>
               <script type="text/javascript"
src="../../lib/ui/jquery.ui.draggable.js"></script>
               <script type="text/javascript"
src="../../lib/ui/jquery.ui.position.js"></script>
               <script type="text/javascript"
src="../../lib/ui/jquery.ui.dialog.js"></script>
               <link type="text/css" href="../../lib/demos/demos.css" rel="stylesheet" />
               <script type="text/javascript">
                       $("#dialog-confirm").dialog({
                               resizable: false,
                               height:140,
                               modal: true,
                               buttons: {
                                       'Delete all items': function() {
                                               $(this).dialog('close');
                                       },
                                       Cancel: function() {
                                               $(this).dialog('close');
                                       }
                               }
                       });
               </script>
</head>
<body>
<a href="#" id="showpopupbox">Click to show pupup</a>
<div id="dialog-confirm" title="Empty the recycle bin?">
       <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0
7px 20px 0;"></span>These items will be permanently deleted and cannot
be recovered. Are you sure?</p>
</div>
</body>
</html>
-----------------------------------
As you can see I'm I have a href in place trying to apply a click
event to $('#showpopupbox') but with now success.
How would I go about doing this? I want to use this in my form
validation which i'm using jquery :).
Any help is greatly appreciated. Thanks!
Ron
Loading...