ellandrd
asked on
jQuery / Prototype help needed with Fade and SlideUp
I'm trying to put together a small script using jQuery and the Prototype librarys for an application im building.
What I want to happen is when a user clicks on the delete link, delete the record from the table, fade the deleted record and slide up the next record up into its place. It is similar to the bury tool on Digg.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Langua ge" content="en-gb" />
<title>seandelaney.co.uk | Freelance Web Developer Aberdeen</title>
<meta name="description" content="" />
<meta name="robots" content="all" />
<meta name="author" content="Sean Delaney | Freelance Web Developer Aberdeen" />
<meta name="page-topic" content="" />
<script src="prototype.js" type="text/javascript"></s cript>
<script src="jquery.js" type="text/javascript"></s cript>
<script type="text/javascript">
function delete(id,next) {
new Ajax.Request('delete.php?i d='+id, {
method: 'get',
onSuccess: function(callback) {
$('#'+id).fadeTo(1000,.05) ;
if(next != 0) {
$('#'+next).slideUp();
}
}
});
return;
}
</script>
</head>
<body>
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<th>Fullname</th><th>Tools </th>
</tr>
<?php
$conn = mysql_connect('localhost', 'root','xx xxxx');
mysql_select_db('jquery',$ conn);
$query = 'SELECT * FROM tblUsers';
$result = mysql_query($query) or die(mysql_error());
$nums = mysql_num_rows($result);
while($rows = mysql_fetch_array($result) ) {
$id = $rows['UserID'];
$next = (($nums == $id) ? 0 : ($id+1));
?>
<tr id="<?php echo $id; ?>">
<td><?php echo $rows['Firstname'].' '.$rows['Surname']; ?></td>
<td><a href="javascript:void(0);" onclick="javascript:delete (<?php echo $id; ?>,<?php echo $next; ?>);" title="Delete this User"><img src="cross.png" alt="Delete this User" /></a></td>
</tr>
<?php
}
unset($query,$nums,$next);
mysql_free_result($result) ;
mysql_close($conn);
?>
</body>
</html>
delete.php:
<?php
if(isset($_GET['id']) && !empty($_GET['id'])) {
$conn = mysql_connect('localhost', 'root','xx xxxx');
mysql_select_db('jquery',$ conn);
$query = 'DELETE FROM tblUsers WHERE UserID = '.$_GET['id'];
mysql_query($query) or die(mysql_error());
return (mysql_rows_affected($conn ) > 0) ? true : false;
unset($query,$nums,$next);
mysql_free_result($result) ;
mysql_close($conn);
} else {
return false;
}
?>
What I want to happen is when a user clicks on the delete link, delete the record from the table, fade the deleted record and slide up the next record up into its place. It is similar to the bury tool on Digg.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Langua
<title>seandelaney.co.uk | Freelance Web Developer Aberdeen</title>
<meta name="description" content="" />
<meta name="robots" content="all" />
<meta name="author" content="Sean Delaney | Freelance Web Developer Aberdeen" />
<meta name="page-topic" content="" />
<script src="prototype.js" type="text/javascript"></s
<script src="jquery.js" type="text/javascript"></s
<script type="text/javascript">
function delete(id,next) {
new Ajax.Request('delete.php?i
method: 'get',
onSuccess: function(callback) {
$('#'+id).fadeTo(1000,.05)
if(next != 0) {
$('#'+next).slideUp();
}
}
});
return;
}
</script>
</head>
<body>
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<th>Fullname</th><th>Tools
</tr>
<?php
$conn = mysql_connect('localhost',
mysql_select_db('jquery',$
$query = 'SELECT * FROM tblUsers';
$result = mysql_query($query) or die(mysql_error());
$nums = mysql_num_rows($result);
while($rows = mysql_fetch_array($result)
$id = $rows['UserID'];
$next = (($nums == $id) ? 0 : ($id+1));
?>
<tr id="<?php echo $id; ?>">
<td><?php echo $rows['Firstname'].' '.$rows['Surname']; ?></td>
<td><a href="javascript:void(0);"
</tr>
<?php
}
unset($query,$nums,$next);
mysql_free_result($result)
mysql_close($conn);
?>
</body>
</html>
delete.php:
<?php
if(isset($_GET['id']) && !empty($_GET['id'])) {
$conn = mysql_connect('localhost',
mysql_select_db('jquery',$
$query = 'DELETE FROM tblUsers WHERE UserID = '.$_GET['id'];
mysql_query($query) or die(mysql_error());
return (mysql_rows_affected($conn
unset($query,$nums,$next);
mysql_free_result($result)
mysql_close($conn);
} else {
return false;
}
?>
ASKER
OK the ID's look fine. I manualy tested the delete.php file by passing an id and geting the return value. if its deleted it returns true.
however i added a simple alert box inside the delete function too check the values i passing into it and the alert doesnt trigger.
the HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Langua ge" content="en-gb" />
<title>seandelaney.co.uk | Freelance Web Developer Aberdeen</title>
<meta name="description" content="" />
<meta name="robots" content="all" />
<meta name="author" content="Sean Delaney | Freelance Web Developer Aberdeen" />
<meta name="page-topic" content="" />
<script src="prototype.js" type="text/javascript"></s cript>
<script src="jquery.js" type="text/javascript"></s cript>
<script type="text/javascript">
function delete(id,next) {
new Ajax.Request('delete.php?i d='+id, {
method: 'get',
onSuccess: function(callback) {
$('#'+id).fadeTo(1000,.05) ;
if(next != 0) {
$('#'+next).slideUp();
}
}
});
return;
}
</script>
</head>
<body>
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<th>Fullname</th><th>Tools </th>
</tr>
<tr id="1">
<td>Sean Delaney</td>
<td><a href="javascript:void(0);" onclick="javascript:delete (1,2);" title="Delete this User"><img src="cross.png" alt="Delete this User" /></a></td>
</tr>
<tr id="2">
<td>Debbie Finlay</td>
<td><a href="javascript:void(0);" onclick="javascript:delete (2,3);" title="Delete this User"><img src="cross.png" alt="Delete this User" /></a></td>
</tr>
<tr id="3">
<td>Paul Mellon</td>
<td><a href="javascript:void(0);" onclick="javascript:delete (3,4);" title="Delete this User"><img src="cross.png" alt="Delete this User" /></a></td>
</tr>
<tr id="4">
<td>John Amon</td>
<td><a href="javascript:void(0);" onclick="javascript:delete (4,5);" title="Delete this User"><img src="cross.png" alt="Delete this User" /></a></td>
</tr>
<tr id="5">
<td>Mark Lennon</td>
<td><a href="javascript:void(0);" onclick="javascript:delete (5,6);" title="Delete this User"><img src="cross.png" alt="Delete this User" /></a></td>
</tr>
<tr id="6">
<td>Roddy MacIver</td>
<td><a href="javascript:void(0);" onclick="javascript:delete (6,0);" title="Delete this User"><img src="cross.png" alt="Delete this User" /></a></td>
</tr>
</body>
</html>
however i added a simple alert box inside the delete function too check the values i passing into it and the alert doesnt trigger.
the HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Langua
<title>seandelaney.co.uk | Freelance Web Developer Aberdeen</title>
<meta name="description" content="" />
<meta name="robots" content="all" />
<meta name="author" content="Sean Delaney | Freelance Web Developer Aberdeen" />
<meta name="page-topic" content="" />
<script src="prototype.js" type="text/javascript"></s
<script src="jquery.js" type="text/javascript"></s
<script type="text/javascript">
function delete(id,next) {
new Ajax.Request('delete.php?i
method: 'get',
onSuccess: function(callback) {
$('#'+id).fadeTo(1000,.05)
if(next != 0) {
$('#'+next).slideUp();
}
}
});
return;
}
</script>
</head>
<body>
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<th>Fullname</th><th>Tools
</tr>
<tr id="1">
<td>Sean Delaney</td>
<td><a href="javascript:void(0);"
</tr>
<tr id="2">
<td>Debbie Finlay</td>
<td><a href="javascript:void(0);"
</tr>
<tr id="3">
<td>Paul Mellon</td>
<td><a href="javascript:void(0);"
</tr>
<tr id="4">
<td>John Amon</td>
<td><a href="javascript:void(0);"
</tr>
<tr id="5">
<td>Mark Lennon</td>
<td><a href="javascript:void(0);"
</tr>
<tr id="6">
<td>Roddy MacIver</td>
<td><a href="javascript:void(0);"
</tr>
</body>
</html>
ASKER
Sorry my updated delete function:
function delete(id,next) {
alert(id);
alert(next);
new Ajax.Request('delete.php?i d='+id, {
method: 'get',
onSuccess: function(callback) {
$('#'+id).fadeTo(1000,.05) ;
if(next != 0) {
$('#'+next).slideUp();
}
}
});
like i said the alerts do not trigger which tells me something else is causing it to fail. i commented out the Ajax.Request and their JS files from the header so my delete function was leave like this:
function delete(id,next){alert(id); alert(next );return;}
but that didnt trigger either. my HREF onclick looks fine so im still confused.
return;
}
function delete(id,next) {
alert(id);
alert(next);
new Ajax.Request('delete.php?i
method: 'get',
onSuccess: function(callback) {
$('#'+id).fadeTo(1000,.05)
if(next != 0) {
$('#'+next).slideUp();
}
}
});
like i said the alerts do not trigger which tells me something else is causing it to fail. i commented out the Ajax.Request and their JS files from the header so my delete function was leave like this:
function delete(id,next){alert(id);
but that didnt trigger either. my HREF onclick looks fine so im still confused.
return;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ok i changed the name of my function to deleteUser and it works up to deleting the record. however the onSuccess doesnt trigger. all i get is failed in the alert box:
function deleteUser(id) {
new Ajax.Request('delete.php?i d='+id, {
method: 'get',
onSuccess: function(callback) {
alert(callback.status);
//$('#u_'+id).fadeTo(1000, .05);
//if(next != 0) {
// $('#u_'+next).slideUp();
//}
},
onFailure: function() {
alert('Failed');
}
});
return false;
}
function deleteUser(id) {
new Ajax.Request('delete.php?i
method: 'get',
onSuccess: function(callback) {
alert(callback.status);
//$('#u_'+id).fadeTo(1000,
//if(next != 0) {
// $('#u_'+next).slideUp();
//}
},
onFailure: function() {
alert('Failed');
}
});
return false;
}
So it deletes the record but you receive failed.
What do you see if you do a
view-source:http://www.yourhost.com/delete.php?id=1
Valid xml?
and also do a alert(callback.status); in the failure
What do you see if you do a
view-source:http://www.yourhost.com/delete.php?id=1
Valid xml?
and also do a alert(callback.status); in the failure
ASKER
Where is my comment from last night thanking you for your help. I got it working in the end and im full sure I posted in the right thread?!
What I was doing wrong in my delete.php file was returning true or false if the record was deleted. The Ajax.Request() function doesn't care about return values - all it cares about is that the request was successful and when I was returning a response back to it, im assuming the function thought the request failed so it triggered the onFailure().
Anyways since I must have thanked another expert/user, I want to thank you proper now:
Thank you
Ellandrd
What I was doing wrong in my delete.php file was returning true or false if the record was deleted. The Ajax.Request() function doesn't care about return values - all it cares about is that the request was successful and when I was returning a response back to it, im assuming the function thought the request failed so it triggered the onFailure().
Anyways since I must have thanked another expert/user, I want to thank you proper now:
Thank you
Ellandrd
Haha. Ok. I hope the other expert deserved it ;)
ASKER
I went to see where i posted it and i cant find it and i am 100% sure i thanked you - unless the page didn't submit, i didn't notice and i closed the page.
Happens too often for me lately :(((
ASKER
I put it down as a "junior moment" for me as im only 25 - for you - i'd say a "senior moment"...
;-)
;-)
Thanks a bundle :|
Perhaps show the html instead of the PHP so we can see if there is a problem with the ID or something...
If you look in firefox error console, there might be a perfect explanation for you such as a duplicate ID or so