CODEWITHSUNDEEP
javascriptjqueryscope
Alfred
Alfred

Reputation: 21386

How to take functions inside - jQuery

I am using jQuery Block UI plugin. like below;

$('#someid .someclass').click(function(){
  var id = "someidx";
  var newval = "somevalx";
  $.blockUI({
    onBlock: function() {
      $.ajax({
        type: 'POST',
        url: 'target.php',
        data: 'data='+newval,
        cache: false,
        success: function(result) {
          if(result == "true"){
            $('#mymessage').addClass("asuccess");
          }else{
            $('#mymessage').addClass("aerror");
          }
        }
      });
     },
     onUnblock: function(){
       //some functions;
     },
     message: $('#mymessage'),  
  });
  $(this).hide();
  $(this).siblings('.class1').hide();
  $(this).siblings('.class2').show();
  $(this).parent("td").siblings(".class3").html(newval);
});

This works fine. But I want to do some functions inside if(result == "true"). That is, I want to do those things if ajax result is true. I want to do;

success: function(result) {
  if(result == "true"){
    $('#mymessage').addClass("asuccess");
    $(this).hide();
    $(this).siblings('.class1').hide();
    $(this).siblings('.class2').show();
    $(this).parent("td").siblings(".class3").html(newval);
  }else{
    $('#mymessage').addClass("aerror");
  }
}

if ajax return is true, and take these things into success nesting. But this is not working inside if(result == "true") nesting. How can I achieve this?

Upvotes: 0

Views: 86

Answers (3)

Pointy
Pointy

Reputation: 413712

Add

    context: self,  // oops - fixed now (was "this")

to your $.ajax() call. That'll make sure that this refers to the clicked element when the AJAX callbacks are invoked. Without that, this refers to the ajax settings object, not the original DOM element.

edit — also you'd need the "self" var as in the answer from Daniel Imms (which itself will suit perfectly without this "context" thing).

Upvotes: 3

Daniel Imms
Daniel Imms

Reputation: 50149

You can set a variable in your top function as this and use that in the inner one.

$('#someid .someclass').click(function () {

    var self = $(this);

    var id = "someidx";
    var newval = "somevalx";
    $.blockUI({
        onBlock: function () {
            $.ajax({
                type: 'POST',
                url: 'target.php',
                data: 'data=' + newval,
                cache: false,
                success: function (result) {
                    if (result == "true") {
                        $('#mymessage').addClass("asuccess");
                        self.hide();
                        self.siblings('.cancel').hide();
                        self.siblings('.edit').show();
                        self.parent("td").siblings(".cell2").html(newval);
                    } else {
                        $('#mymessage').addClass("aerror");
                    }
                }
            });
        },
        onUnblock: function () {
            //some functions;
        },
        message: $('#mymessage'),

    });
});

Upvotes: 4

freakish
freakish

Reputation: 56467

$('#someid .someclass').click(function(){
    var self = $(this);
    // other code
});

You can now use self in your AJAX handler as a reference to clicked element.

Upvotes: 0

Related Questions