3

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;
        })
3
  • Insert console.log(this) in some places in your code, and look at the console in Firebug, then you will understand what this is pointing to at each point.
    – TK.
    Commented Mar 27, 2010 at 12:59
  • Is there any chance that your Ajax request is failing? The callback function is run when the request is successful.
    – TK.
    Commented Mar 27, 2010 at 13:08
  • it was working fine, after the successfull ajaxcall I set my text back to what it already was.. grr. Thanks for the tip about console and Firebug!
    – TunaFFish
    Commented Mar 27, 2010 at 13:17

2 Answers 2

5

$(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") ) {
  ....
  }
7
  • ok understand for this inside the callback fnc, but why does it work in the test link example than?
    – TunaFFish
    Commented Mar 27, 2010 at 12:51
  • because in the callback function for click this does refer to the element that was clicked on Commented Mar 27, 2010 at 12:54
  • ok, cheers. How can I reference the href without using the $('dd a.toggle-active') selector than?
    – TunaFFish
    Commented Mar 27, 2010 at 13:01
  • I don't think you need to change anything - what your are doing is what I would do: select it using the selector first, then store it in a local variable that you reference from further callback functions. Commented Mar 27, 2010 at 13:06
  • I agree the code should work. You are doing it right. The callback function is executed when the Ajax request is successful. You might be failing if the code doesn't work. Your usage of a_ref is correct.
    – TK.
    Commented Mar 27, 2010 at 13:10
0

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;
})
2
  • I am having trouble figuring out how to use this.. Can you tell me where exactly I add the class and where to check for the class? return will prevent further execution of the click functions?
    – TunaFFish
    Commented Mar 27, 2010 at 13:43
  • See my edit. The return will prevent that single click making a request; and will keep preventing the requests as long as the current request is in progress. If you want to stop the AJAX request ever happening, do a_ref.unbind('click'); in the callback of the AJAX request.
    – Matt
    Commented Mar 27, 2010 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.