[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery / Prototype help needed with Fade and SlideUp

Posted on 2007-10-11
12
Medium Priority
?
927 Views
Last Modified: 2008-01-09
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-Language" 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"></script>
      <script src="jquery.js" type="text/javascript"></script>
      <script type="text/javascript">
      function delete(id,next) {
            new Ajax.Request('delete.php?id='+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','xxxxxx');
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','xxxxxx');
      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;
}
?>
0
Comment
Question by:ellandrd
  • 6
  • 6
12 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20056339
So what does it not do?

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
0
 
LVL 16

Author Comment

by:ellandrd
ID: 20056757
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-Language" 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"></script>
      <script src="jquery.js" type="text/javascript"></script>
      <script type="text/javascript">
      function delete(id,next) {
            new Ajax.Request('delete.php?id='+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>
0
 
LVL 16

Author Comment

by:ellandrd
ID: 20056784
Sorry my updated delete function:

function delete(id,next) {
alert(id);
alert(next);
            new Ajax.Request('delete.php?id='+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;
      }
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20057547
1. I would personally change
<a href="javascript:void(0);" onclick="javascript:delete(1,2);"
to
<a href="#" onclick="delete(1,2); return false"

or

<a href="#" onclick="return delete(1,2)"

and then have the return false in the function
function delete(id,next) {
  new Ajax.Request('delete.php?id='+id, {
    method: 'get',
    onSuccess: function(callback) {
      $('#'+id).fadeTo(1000,.05);
      if(next != 0) {
        $('#'+next).slideUp();
      }
    }
    return false;
  });

I would then look to see if you have more than one "delete" function
Type
javascript:alert(delete)
into location bar and press enter and see if the delete is the function you expected it to be.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 20057739
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?id='+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;
      }
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20059881
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
0
 
LVL 16

Author Comment

by:ellandrd
ID: 20063504
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20063617
Haha. Ok. I hope the other expert deserved it ;)
0
 
LVL 16

Author Comment

by:ellandrd
ID: 20063657
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20063743
Happens too often for me lately :(((
0
 
LVL 16

Author Comment

by:ellandrd
ID: 20063765
I put it down as a "junior moment" for me as im only 25 - for you - i'd say a "senior moment"...

;-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20063842
Thanks a bundle :|

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…
Suggested Courses
Course of the Month18 days, 10 hours left to enroll

834 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