Блог

У меня есть код в jquery, который используется для удаления предыдущего тега div и следующего .pclass. Вот мой код:

  $(".delete").bind("click",function(){
             var c = confirm("You sure want to delete this?");
             if(c){
                /* $(this).next('.pclass').remove();
                 $(this).prev('.rurl').remove();
                 $(this).remove();*/
                 var text = $(this).prev('.rurl').text();
                 var idvalue = $(this).prev('.rurl').attr('id');
                 var id = idvalue.split("|");

                 $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/cPEP_UI/Engine_rurl_delete",
                        data: "text=" text "amp;eid=" id[1],
                        dataType: "json",
                        success: function(data) {
                            if(data.update == "success"){
                                $(this).next('.pclass').remove();
                                 $(this).prev('.rurl').remove();
                                 $(this).remove();
                            }
                            // $('#show').show();
                            //$('#show').html(data.update " " data.message).fadeOut(8000);
                        },
                    error:function(xhr,err){
                      //alert("readyState: " xhr.readyState "nstatus: " xhr.status);
                       $('#show').show();
                      // alert(xhr.responseText);
                       $('#show').html("responseText: " xhr.responseText);

                    }

                    }); 
             }
         });
  

Когда я использую методы удаления перед вызовом функции $.ajax, она работает нормально, но не тогда, когда я помещаю ее в success. Я проверил выходные данные, возвращаемые файлом сервлета. Все работает нормально. Есть идеи?

Вы должны сохранить контекст в переменной и передать его в функцию успеха, вот так:

 var that = $(this);
$.ajax({
    ...
    success: function(data) {
        that.remove();
    }
});
  

В качестве альтернативы вы можете использовать $.ajax параметр контекста:

 $.ajax({
    ...
    context: this, // set the context for all ajax-related callbacks
    success: function(data) {
        $(this).next('.pclass').remove();
    }
});
  

В ajax.success метод this не указывает на ваш элемент.

Добавьте подобный код

 var self = this;
var c = confirm("You sure want to delete this?");
  

и затем

 if(data.update == "success"){
    $(self).next('.pclass').remove();
    $(self).prev('.rurl').remove();
    $(self).remove();
}
  

Вы теряете область действия «этого», когда вы находитесь в функции успеха. Вы можете установить $ (this) в переменную и передать переменную.

Я бы предположил, что this внутри успешного обратного вызова, вероятно, не ссылается на выбранный элемент, как это происходит вне вызова ajax. Переместите эти строки успеха в их собственную функцию, вызовите функцию из success и установите точку останова в firebug в этих строках, чтобы посмотреть, что this такое.

Проблема здесь в том, что контекст этого изменяется при выполнении обработчика успеха. Используйте этот трюк.

Попробуйте приведенный ниже код:

  $(".delete").bind("click",function(){
     var c = confirm("You sure want to delete this?");
       //#################################
       //Capture the context of this so that it can be used in callbacks
     var that = $(this);
     if(c){
         var text = $(this).prev('.rurl').text();
         var idvalue = $(this).prev('.rurl').attr('id');
         var id = idvalue.split("|");

         $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/cPEP_UI/Engine_rurl_delete",
                    data: "text=" text "amp;eid=" id[1],
                    dataType: "json",
                    success: function(data) {
                        if(data.update == "success"){
                         //##########################
                         //Since the context of this was stored in that, use it. 
                         that.next('.pclass').remove();
                         that.prev('.rurl').remove();
                         that.remove();
                        }
                    },
            error:function(xhr,err){
                 $('#show').show();
                 $('#show').html("responseText: " xhr.responseText);
            }
        }); 
  }
});
  

 $(".delete").bind("click",function(){
             var c = confirm("You sure want to delete this?");
             if(c){
                /* $(this).next('.pclass').remove();
                 $(this).prev('.rurl').remove();
                 $(this).remove();*/


                 var myElement = $(this);


                 var text = $(this).prev('.rurl').text();
                 var idvalue = $(this).prev('.rurl').attr('id');
                 var id = idvalue.split("|");

                 $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/cPEP_UI/Engine_rurl_delete",
                        data: "text=" text "amp;eid=" id[1],
                        dataType: "json",
                        success: function(data) {
                            if(data.update == "success"){
                                myElement.next('.pclass').remove();
                                myElement.prev('.rurl').remove();
                                myElement.remove();

                                //$(this).next('.pclass').remove();
                                //$(this).prev('.rurl').remove();
                                //$(this).remove();
                            }
                            // $('#show').show();
                            //$('#show').html(data.update " " data.message).fadeOut(8000);
                        },
                    error:function(xhr,err){
                      //alert("readyState: " xhr.readyState "nstatus: " xhr.status);
                       $('#show').show();
                      // alert(xhr.responseText);
                       $('#show').html("responseText: " xhr.responseText);

                    }

                    }); 
             }
         });