brihol44
asked on
I'm trying to get two jQuery plugins to work together on my demo
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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);
ASKER
I tried that before and it never brings up the new box. It does delete the record though.
Brian