Solved

problem with popup delete jquery model

Posted on 2010-11-20
4
625 Views
Last Modified: 2012-08-14
im trying to make a dialog popup for a delete confirm yes/cancel and im having a very hard time with it
it keeps breaking and i can do it to save my life

please understand i need to put this into a php page i have and pass the id to another php script
also note the image to be clicked for delete is in a php include on another page.
heres what i have thats no longer working
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
<script type="text/javascript">
$(document).ready(function(){
  $("#dialog-confirm").dialog({
                              modal: true,
                              bgiframe: true,
                              autoOpen: false }); 
});


	function confirmDelete(username, id) {
		var username = 'johnny';
		var id = '2';
		$( "#dialog-confirm" ).append("Are you sure you want to delete: <br>'" + username + "' with id: "+ id);
 		$( "#dialog-confirm" ).dialog({
    			show: "blind",
    			hide: "explode",
 			resizable: false,
 			height:220,
 			modal: true,
 			buttons: {
				"Yes": function() {
				var delUrl = "testimonial_delete_id.php?id='" + id+"'";
				window.location.href = delUrl; },
				
				Cancel: function() {
				$( this ).dialog( "close" );
				}
 			}
 		});
 	};
	
	$("#opener").click(function() {
		$("#dialog-confirm").dialog( "open" );
		return false;
	});
 </script>
</head>
<body>
 
<div id="dialog-confirm" title="Warning: Delete Recrod" style="font-size:10px;"><p><span class="ui-icon ui-icon-alert"></span>This item will be <br><B style="color:#dc143c;">permanently deleted and cannot be recovered</B>.</p></div>
<?
$by_name2="fred";
$id2="5";
echo '
<A HREF="#" title"Click here to delete"  id="opener" onclick=\'confirmDelete("'.$by_name2.'",'.$id2.')\'><img src="images/icon_delete.png" width="16" height="16" border="0" /></A>
'
?>
</body>
</html>

Open in new window

 


thank you in advance for any code or help you may provide
0
Comment
Question by:Johnny
  • 3
4 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
Comment Utility
Hi, pls see my comments in the code.
<!DOCTYPE html>

<html>

<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>



<script type="text/javascript">

$(document).ready(function(){



//Remove this and initiate the dialog box on click (in confirmDelete)

 /* $("#dialog-confirm").dialog({

                              modal: true,

                              bgiframe: true,

                              autoOpen: false });*/

});





        function confirmDelete(username, id) {

            	//To use the values passed as function parameters, don't initialize them here 

                //var username = 'johnny';

                //var id = '2';

                

                $( "#dialog-confirm" ).append("Are you sure you want to delete: <br>'" + username + "' with id: "+ id);

                $( "#dialog-confirm" ).dialog({

                        show: "blind",

                        hide: "explode",

                        resizable: false,

                        height:220,

                        modal: true,

                        buttons: {

                                "Yes": function() {

                                var delUrl = "testimonial_delete_id.php?id='" + id+"'";

                                window.location.href = delUrl; },



                                Cancel: function() {

                                $( this ).dialog( "close" );

                                }

                        }

                });

        };



        $("#opener").click(function() {

                $("#dialog-confirm").dialog( "open" );

                return false;

        });

 </script>

</head>

<body>



<!-- Note the display:none to hide it from displaying on the page -->

<div id="dialog-confirm" title="Warning: Delete Recrod" style="font-size:10px; display:none;"><p><span class="ui-icon ui-icon-alert"></span>This item will be <br><B style="color:#dc143c;">permanently deleted and cannot be recovered</B>.</p></div>

<?

$by_name2="fred";

$id2="5";

echo '

<A HREF="#" title"Click here to delete"  id="opener" onclick=\'confirmDelete("'.$by_name2.'",'.$id2.')\'>xxxxx<img src="images/icon_delete.png" width="16" height="16" border="0" /></A>

'

?>

</body>

</html>

Open in new window

0
 

Author Comment

by:Johnny
Comment Utility
wow thats great thanks so much

now if i can get the idiotic jquery dataTables interface i used for my data display as i just broke the dang thing with this(its so XXX touchy)

i just cant win, got something great to work and it breaks something else. when i add it to the page.

but non the less thank you so much.

0
 

Author Closing Comment

by:Johnny
Comment Utility
perfect thank you
0
 

Author Comment

by:Johnny
Comment Utility
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

771 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

11 Experts available now in Live!

Get 1:1 Help Now