views:

74

answers:

2

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;
        })
+5  A: 

$(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") ) {
  ....
  }
Mario Menger
ok understand for this inside the callback fnc, but why does it work in the test link example than?
FFish
because in the callback function for click this does refer to the element that was clicked on
Mario Menger
ok, cheers. How can I reference the href without using the $('dd a.toggle-active') selector than?
FFish
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.
Mario Menger
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
I see the error!! everything worked fine.. I only changed the text "non attivo" to "non attivo" etc. That's why I thought it didn't work..
FFish
Glad to hear it is sorted!
Mario Menger
sorry where and when do I add the class and check if it is clicked?
FFish
A: 

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;
})
Matt
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?
FFish
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