Solved

problem with popup delete jquery model

Posted on 2010-11-20
4
628 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
ID: 34182088
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
ID: 34182252
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
ID: 34182254
perfect thank you
0
 

Author Comment

by:Johnny
ID: 34182267
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can I echo a PHP variable in AJAX function? 7 37
Having problem getting this to work 2 21
Objects on Same Line 2 18
Angular - disable input field on page load 4 15
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

863 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

23 Experts available now in Live!

Get 1:1 Help Now