Solved

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

Posted on 2010-09-07
3
475 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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 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…

697 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