CODEWITHSUNDEEP
jquery
good_evening
good_evening

Reputation: 21759

Get class name from element, and select all elements with the same class

$('.classToClick').live("click", function () {
    $(this).attr('disabled', 'disabled');
    $(this).val("lol");
    $.post('post.php', {
        string: "lalala"
    }, function (data) {
        $(this).removeAttr('disabled');
    });
})

This code doesn't work, because in post we use $(this). When we change it to .classToClick, it works.

How can we get the class of the element clicked so that we could use it like this?

$('.classToClick').live("click", function () {
    var className = $(this).name;
    $(this).attr('disabled', 'disabled');
    $(this).val("lol");
    $.post('post.php', {
        string: "lalala"
    }, function (data) {
        $(className).removeAttr('disabled');
    });
})

Is it possible to do something similar?

Upvotes: 0

Views: 371

Answers (5)

Debbie Delargy
Debbie Delargy

Reputation: 63

This will work:

$('.classToClick').live("click", function() {       
   var $el = $(this);
   $el.attr('disabled', 'disabled');
   $el.val("lol");
   $.post('post.php', {string : "lalala"}, function(data) {
       $el.removeAttr('disabled');
   });
});

Storing the jquery el in the var is a bit more efficient than calling $(this) again and again. Have a google for Paul Irish and jQuery performance tips :)

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

$(this).name will mostly give you undefined or null value so it will not work. What you can do is store the reference to object in a local variable and then use it inside the post success handler. Try this.

$('.classToClick').live("click", function() {   
       var $elem = $(this).attr('disabled', 'disabled').val("lol");
       $.post('post.php', {string : "lalala"}, function(data) {
           $elem.removeAttr('disabled');
       });
});

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76597

Upon clicking, you will need to capture the class name, which can be done via:

var className = $(this).attr('class'); //Alternatively, $(this).prop('class')

and when you later refer to it inside of the $ selector, you need to include the period to denote a class is being selected, as such:

$('.' + className).removeAttr('disabled');

Code:

$('.classToClick').live("click", function() 
{   
    var className = $(this).attr('class');    
    $(this).attr('disabled', 'disabled').val("lol");

    $.post('post.php', {string : "lalala"}, function(data)
    {
        $('.' + className).removeAttr('disabled');
    });
})

Working Example

Upvotes: 1

Andrew
Andrew

Reputation: 13863

You can also set a context for your callback. As well the correct way to change a property on an element is with the prop() method.

$('body').on('click', '.classToClick', function() {    
   $(this).prop('disabled', true)
          .val("lol");
   $.ajax({
     type: 'POST',
     url: 'post.php',
     context:  $(this)
     data: {
       string : "lalala"
     },
     success:  function(data) {
       this.prop('disabled', false);
     }
   });
})

Upvotes: 0

Kamran Ali
Kamran Ali

Reputation: 5954

basically in the call back of the $.post $(this) represents nothing, you can assign $(this) to a variable and then use that variable for the processing something like this

var $field = $(this);

and then can use this as

$('.classToClick').live("click", function() {   
      var className = $(this).name;    
      $(this).attr('disabled', 'disabled');
      $(this).val("lol");
      var field = $(this);
      $.post('post.php', {string : "lalala"}, function(data) {
        $(field).removeAttr('disabled');
      });

})

Upvotes: 0

Related Questions