Solved

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

Posted on 2010-09-07
3
466 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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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…

707 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

12 Experts available now in Live!

Get 1:1 Help Now