CODEWITHSUNDEEP
jquerycss-selectors
TunaFFish
TunaFFish

Reputation: 11302

jQuery reference to (this) does not work?

I have this href link with text either "attivo" or "non attivo"
User can set the item to 'active' or 'closed' in the database with an ajax request $.post()

I have 2 questions for these:

  1. I can't get the reference to $(this) to work.. I tried it with a normal link and it works, but not wrapped in if/else??

  2. How can I prevent the user from clicking more than one time on the link and submitting several request? Is this a valid concern? Do I need some sort of a small timer or something?
    First I was thinking about a javascript confirm message, but that's pretty annoying for this function..

HTML:

<dl id='album-list'>
<dt id="dt-2">some title</dt>
<dd id="dd-2">
    some description<br />
    <div class='links-right'>status: <a class='toggle-active' href='#'>non attivo</a></div>
</dd>
</dl>

<a class="test" href="#">test</a>

JS:

        $('dd a.toggle-active').click(function() {
            var a_ref = $(this);
            var id = a_ref.parent().parent().attr('id').substring(3);
            if (a_ref.text() == "non attivo") {
                var new_active = "active"; // for db in english
                $.post("ajax-aa.php", {album_id:id, album_active:new_active},
                function(data) {
                    // alert("success");
                    a_ref.text("non attivo"); // change href text
                });
            } else {                
                var new_active = "closed"; // for db in english
                $.post("ajax-aa.php", {album_id:id, album_active:new_active},
                function(data) {
                    // alert("success");
                    a_ref.text("attivo"); // change href text
                });
            }
            return false;
        });     

        $('a.test').click(function() {
            var a_ref = $(this);
            $.post("ajax-aa.php", {album_id:2, album_active:"active"},
            function(data) {
                a_ref.text("changed");
            });
            return false;
        })

Upvotes: 3

Views: 212

Answers (2)

Matt
Matt

Reputation: 75317

The easiest way to stop the user clicking the link multiple times, will be to add a class or something to the link when the user clicks it.

a_ref.addClass('in-progress');

and then remove the class when the AJAX request has completed.

a_ref.removeClass('in-progress');

When the user first clicks the link, check to see whether a request is in progress;

if (a_ref.hasClass('in-progress')) {
    return'
};

Edit: A more detailed example:

$('a.test').click(function() {
    var a_ref = $(this);


    if (a_ref.hasClass('in-progress')) {
        return false;
    } else {
        a_ref.addClass('in-progress');
    }

    $.post("ajax-aa.php", {album_id:2, album_active:"active"},
    function(data) {
        a_ref.text("changed").removeClass('in-progress');
    });

    return false;
})

Upvotes: 0

Mario Menger
Mario Menger

Reputation: 5902

$(this) should refer to your a element inside the if/else, but not inside the callback function. The callback function is run in a different context, so inside the callback function 

    function(date) { }

this does not refer to the a element. this inside the callback function is not the same as this outside the callback function. Because the callback function is a closure though, it will keep a reference to your local variable a_ref.

To prevent the user from clicking twice, add a class to the element

  $(this).addClass("hasbeenclicked")

and in the click handler check whether this has been set and not do anything when it has:

  if ( ! $(this).is(".hasbeenclicked") ) {
  ....
  }

Upvotes: 5

Related Questions