Solved

I'm trying to get two jQuery plugins to work together on my demo

Posted on 2010-09-07
3
470 Views
Last Modified: 2012-05-10

Everything in my demo is working correctly except when I click delete I'm getting the original browser window box asking to confirm deletion. After i press "Cancel" on the dialog box then the reallly cool tooltip appears asking to confirm deletion.  I just want to integrate the tooltip for the confirmation and get rid of the browser window box asking to confirm deletion. The server side code runs just fine and the deletion works well but the Jquery coding is more advanced than I know right now.

Thanks,

Brian
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery - Delete Table Rows Demo</title>
		<link rel="stylesheet" type="text/css" media="screen, projection" href="demo.css" />
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jconfirmaction.jquery.js"></script>
		<script type="text/javascript">
		$(document).ready(function()
			{
				
				$('table#delTable td a.ask').click(function()
				{
					if (confirm("Are you sure you want to delete this row?"))
					{
						var id = $(this).parent().parent().attr('id');
						var data = 'id=' + id ;
						var parent = $(this).parent().parent();
						
						$.ajax(
						{
							   type: "POST",
							   url: "delete_row.cfm",
							   data: data,
							   cache: false,
							
							   success: function()
							   {
								 parent.fadeOut('slow', function() {$(this).remove();});
								 
							   }
						 });				
					}
				});
				
				// style the table with alternate colors
				// sets specified color for every odd row
				$('table#delTable tr:odd').css('background',' #FFFFFF');
			});
		
		
			$(document).ready(function() {
				$('.ask').jConfirmAction();
			});
			
</script>

</head>

<body>

	<h1 align="center" style="color:#66CCFF;">JQuery - Delete Table Rows Demo</h1>

	<p align="center">This shows how to delete table rows from the following table as well as from the database.</p>

 <cfinvoke
	component="employee"
	method="getList"
	returnvariable="qList"></cfinvoke>
	
	<table align="center" cellpadding="5" cellspacing="0" width="30%" id="delTable" bgcolor="#FFFFFF" style="border:1px solid #cccccc;">
	<cfoutput query="qList">
		<tr id="#qList.ID#">
			<td align="left" style="border-bottom:1px solid cccccc;">#qList.empl_first_name#</td>
			<td align="center" style="border-bottom:1px solid cccccc;">#qList.empl_last_name#</td>
			<td align="center" style="border-bottom:1px solid cccccc;">#qList.empl_dept_seq#</td>
			<td align="center" style="border-bottom:1px solid cccccc;"><a href="" class="ask" style="color:FF0000;">Delete</a></td>
		</tr>
		</cfoutput>
	</table>

</body>
</html>

Open in new window

0
Comment
Question by:brihol44
  • 2
3 Comments
 
LVL 7

Accepted Solution

by:
jhp333 earned 500 total points
ID: 33623745
Try removing line 15, "if (confirm( ..."
0
 

Author Comment

by:brihol44
ID: 33627974
Hello,

I tried that before and it never brings up the new box. It does delete the record though.

Brian
0
 

Author Comment

by:brihol44
ID: 33630146
I'm so close now but I still can't seem to get this figured out... I have figured out how to get rid of the standard browser box asking to confirm deletion and I do get the new slick dialog box asking to confirm deletion but when I click the "yes" button on the dialog box the script doesn't do anything more.

it stops on line 21 or...

$('.yes').click(function() {

.yes is the dialog box window <span class="yes">Yes</span> part of the dialog box.

Thanks for any more help...

Brian
                              
My File..............................................

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery - Delete Table Rows Demo</title>
		<link rel="stylesheet" type="text/css" media="screen, projection" href="demo.css" />
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jconfirmaction.jquery.js"></script>
		<script type="text/javascript">
		$(document).ready(function()
			{
				
				$('table#delTable td a.ask').click(function()
				{
								
					var id = $(this).parent().parent().attr('id');
					var data = 'id=' + id ;
					var parent = $(this).parent().parent();
					alert("test");
					
					$('.yes').click(function()
					{
	
						
						$.ajax(
						{
							   type: "POST",
							   url: "delete_row.cfm",
							   data: data,
							   cache: false,
							
							   success: function()
							   {
								 parent.fadeOut('slow', function() {$(this).remove();});
								 
							   }
						 });				
					});
				});
				
				// style the table with alternate colors
				// sets specified color for every odd row
				$('table#delTable tr:odd').css('background',' #FFFFFF');
			});
		
		
			$(document).ready(function() {
				$('.ask').jConfirmAction();
			});
			
</script>

</head>

<body>

	<h1 align="center" style="color:#66CCFF;">JQuery - Delete Table Rows Demo</h1>

	<p align="center">This shows how to delete table rows from the following table as well as from the database.</p>

	 <cfinvoke
		component="employee"
		method="getList"
		returnvariable="qList"></cfinvoke>
	
	<table align="center" cellpadding="5" cellspacing="0" width="30%" id="delTable" bgcolor="#FFFFFF" style="border:1px solid #cccccc;">
		<cfoutput query="qList">
		<tr id="#qList.ID#">
			<td align="left" style="border-bottom:1px solid cccccc;">#qList.empl_first_name#</td>
			<td align="center" style="border-bottom:1px solid cccccc;">#qList.empl_last_name#</td>
			<td align="center" style="border-bottom:1px solid cccccc;">#qList.empl_dept_seq#</td>
			<td align="center" style="border-bottom:1px solid cccccc;"><a href="" class="ask" style="color:FF0000;">Delete</a></td>
		</tr>
		</cfoutput>
	</table>

</body>
</html>

The confirm action js.......................................

/*
 * jQuery Plugin : jConfirmAction
 * 
 * by Hidayat Sagita
 * http://www.webstuffshare.com
 * Licensed Under GPL version 2 license.
 *
 */
(function($){

	jQuery.fn.jConfirmAction = function (options) {
		
		// Some jConfirmAction options (limited to customize language) :
		// question : a text for your question.
		// yesAnswer : a text for Yes answer.
		// cancelAnswer : a text for Cancel/No answer.
		var theOptions = jQuery.extend ({
			question: "Are You Sure ?",
			yesAnswer: "Yes",
			cancelAnswer: "Cancel"
		}, options);
		
		return this.each (function () {
			
			$(this).bind('click', function(e) {

				e.preventDefault();
				thisHref	= $(this).attr('href');
				
				if($(this).next('.question').length <= 0)
					$(this).after('<div class="question">'+theOptions.question+'<br/> <span class="yes">'+theOptions.yesAnswer+'</span><span class="cancel">'+theOptions.cancelAnswer+'</span></div>');
				
				$(this).next('.question').animate({opacity: 1}, 300);
				
				$('.yes').bind('click', function(){
					window.location = thisHref;	
				});
		
				$('.cancel').bind('click', function(){
					$(this).parents('.question').fadeOut(300, function() {
						$(this).remove();
					});
				});
				
			});
			
		});
	}
	
})(jQuery);

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular - why isn't this ng-if isn't working? 4 42
bootstrap footer centering and expand problems 7 42
Jquery get each value 2 30
Button to go back 3 24
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

785 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