Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 642
  • Last Modified:

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
0
Johnny
Asked:
Johnny
  • 3
1 Solution
 
Sudaraka WijesingheWeb 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

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.

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