Solved

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

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

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…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

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

18 Experts available now in Live!

Get 1:1 Help Now