CODEWITHSUNDEEP
jqueryhide
shin
shin

Reputation: 32721

Not able to hide and slide up with jquery

I have this html which is an output by php.

...
...
<tr valign='top'>
<td>1</td>
<td class="parent">
<a href="http://127.0.0.1/ci/index.php/admin/menus/edit/1">Main menu
</a></td>
<td align='center'>active</td>
<td align='center'>0</td>
<td class="parent" >0</td>
<td align='center'></td>
<td align='center'>
<a href="http://127.0.0.1/ci/index.php/admin/menus/edit/1">edit
</a> | <a href="http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/1" class="delete_link" id="delete_link_1">delete
</a></td>

</tr>
<tr valign='top'>
<td>68</td>
<td class="child">
<a href="http://127.0.0.1/ci/index.php/admin/menus/edit/68">Forsiden
</a></td>
<td align='center'>active</td>
<td align='center'>1</td>
<td class="child" >0</td>
<td align='center'>forsiden</td>
<td align='center'>
<a href="http://127.0.0.1/ci/index.php/admin/menus/edit/68">edit</a> | 
<a href="http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/68" class="delete_link" id="delete_link_68">delete
</a></td>

</tr>
...
...

I want to delete, hide and slide up one of tr when you click delete link. I created the following jquery. It deletes the data in DB, but it does not slide up and hide a deleted row.

Could anyone tell me what I am doing wrong and correct code please.

$('.delete_link').live('click', function(eve){
eve.preventDefault();
if(confirm('Are you sure you want to delete this page?'))
var id = this.href.match(/[^\/]*$/);
this.id = 'http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/' + id;

$.post(this.id, function(){

$('#delete_link_'+id)
        .closest('tr')
        .slideUp('slow',function(){
         $(this).remove();
              });
});
});

Upvotes: 0

Views: 799

Answers (4)

jitter
jitter

Reputation: 54615

First what your problem actually is

  • You are missing the braces on the if-statement, thus the ajax-request will fire every time but fail silently in background as the constructed url is invalid.

  • You are changing the id of delete_link.

Best shown by an example. Assuming this link is clicked

<a href="http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/1"
   class="delete_link" id="delete_link_1">
    delete
</a>

$('.delete_link').live('click', function(eve){
1)    eve.preventDefault();
2)    if(confirm('Are you sure you want to delete this page?'))
3)        var id = this.href.match(/[^\/]*$/);
4)    this.id = 'http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/' + id;
5)    $.post(this.id, function(){
6)        $('#delete_link_'+id).closest('tr').slideUp('slow', function() {
7)            $(this).remove();
          });
      });
});

X) this inside the click handler is the <a> tag we clicked on it has:

  • id="delete_link_1"
  • href="http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/1"

Line 3) var id is set to 1

Line 4) this.id is set to http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/1 (!!)

Umm just a moment this is the a-tag which had attribute id set to delete_link_1. Now you overwrite the id

Line 5) You start the ajax-post with correct url

Line 6) '#delete_link_'+id evaluates to #delete_link_http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/1. Of course there is no element which such an id thus the rest (find parent tr, animation, remove) fails but the actual deleting succeeds.

Proposed solution

Btw. I don't get what the whole regex stuff is for anyway, as the post-url you construct looks exactly the same as the href attribute which is set already on the <a .. class="delete_link">...</a>

So I suggest you use this code instead

$('.delete_link').live('click', function(eve) {
    eve.preventDefault();
    if(confirm('Are you sure you want to delete this page?')) {
        $.post(this.href, function() {
            $(this).parents('tr').eq(0).slideUp('slow', function() {
                $(this).remove(); //is correct as "this" refers to the selected tr
            });
        });
    }
});

Upvotes: 2

PetersenDidIt
PetersenDidIt

Reputation: 25620

Try this:

$('.delete_link').live('click', function(eve){
    eve.preventDefault();
    if(confirm('Are you sure you want to delete this subscriber?')){
        var row = $(this).closest('tr');
        $.post(this.href, function(){
            row.slideUp('slow',function(){
                row.remove();
            });
        });
    }
});

Upvotes: 1

Sandro
Sandro

Reputation: 4771

I don't know if you can animate the height of table rows.

Try this:

$('#delete_link_'+id).closest('tr').find("td").slideUp('slow',function(){
  $(this).remove();
});

Not tested, BTW.

Upvotes: -1

czarchaic
czarchaic

Reputation: 6338

Try going up the chain

$('#delete_link_'+id).parents('tr').slideUp();

Upvotes: 0

Related Questions