problem with popup delete jquery model

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
JohnnyAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
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
 
JohnnyAuthor Commented:
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
 
JohnnyAuthor Commented:
perfect thank you
0
 
JohnnyAuthor Commented:
0
All Courses

From novice to tech pro — start learning today.