Не умеет прятаться и скользить с помощью jquery - PullRequest
Новая
       11

Не умеет прятаться и скользить с помощью jquery

0 голосов
/ 15 декабря 2009

У меня есть этот HTML, который является выводом по 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>
...
...

Я хочу удалить, спрятать и сдвинуть одну из кнопок tr при нажатии на ссылку удалить. Я создал следующий jquery. Он удаляет данные в БД, но не скользит вверх и не скрывает удаленную строку.

Может ли кто-нибудь сказать мне, что я делаю неправильно и исправить код, пожалуйста. 

$('.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();
              });
});
});

Ответы [ 4 ]

2 голосов
/ 15 декабря 2009

Во-первых, в чем ваша проблема на самом деле

  • Вы пропускаете фигурные скобки в операторе if, поэтому ajax-запрос будет срабатывать каждый раз, но в фоновом режиме сбой, поскольку созданный URL-адрес недействителен.

  • Вы меняете id delete_link.

Лучше всего показано на примере. Предполагая, что эта ссылка нажата 

<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 внутри обработчика клика находится тег <a>, по которому мы щелкнули:

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

Строка 3) var id установлено на 1

Строка 4) this.id установлена ​​на http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/1 (!!)

Ммм, минутку this - это тег a, у которого атрибут id установлен в delete_link_1. Теперь вы перезаписываете идентификатор

Строка 5) Вы запускаете ajax-post с правильным URL-адресом

Строка 6) '#delete_link_'+id оценивается как #delete_link_http://127.0.0.1/ci/index.php/admin/menus/deleteMenu/1. Конечно, нет элемента, у которого такой идентификатор, таким образом, остальные (find parent tr, animation, remove) не выполняются, но фактическое удаление успешно.

Предлагаемое решение

Btw. В любом случае, я не понимаю, для чего нужен весь материал регулярных выражений, так как созданный вами пост-URL выглядит точно так же, как атрибут href, который уже установлен в <a .. class="delete_link">...</a>

Поэтому я предлагаю вам использовать этот код вместо 

$('.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
            });
        });
    }
});
1 голос
/ 15 декабря 2009

Попробуйте это: 

$('.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();
            });
        });
    }
});
0 голосов
/ 15 декабря 2009

Не знаю, можно ли анимировать высоту строк таблицы.

Попробуйте это: 

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

Не проверено, кстати.

0 голосов
/ 15 декабря 2009

Попробуйте подняться по цепочке 

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