9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

JQUERY not working as expected

by FirstSocialApps
7 replies
I have a button id="button"
It has an onclick event that changes window location, as well as a .click bind in JQUERY
For the .click bind Im trying to do a .post call and if any data is returned cancel
the original onclick event.

I thought this following code would do it but its not working as expected:

Code:
$("#button").click(function (event) {
                                                              $.post('URL', function(data) {
                                                                                                                                             alert(data);
                                                                                                                                             if (data!=""){$('#button').unbind('click');}
                                                                                                                                             $('body').append(data);
                                                                                                                                            });
                                                              });
Any insight would be most appreciated.
#expected #jquery #working
  • Profile picture of the author Tradeout
    Silly question- does 'URL' have a real URL in your script?
    {{ DiscussionBoard.errors[7525780].message }}
  • Profile picture of the author WealthWithin
    JQuery/JavaScript is asynchronous. So you can't do the POST, and THEN cancel the click event. Technically, jQuery will send the POST, and then move to the next line without waiting to see what the server says.

    You need to stop the click even from happening in the first place by using 'return false;' or 'event.preventDefault();'

    Then after you get the results of POST from the server, if there's no data, change the window location (or anything else you want to do).
    {{ DiscussionBoard.errors[7525819].message }}
    • Profile picture of the author FirstSocialApps
      Originally Posted by WealthWithin View Post

      You need to stop the click even from happening in the first place by using 'return false;' or 'event.preventDefault();'
      Yea I actually tried that. It didnt work either Thats why the event variable is in the click function call. Prior to the $.POST I was doing event.preventDefault() , but that didnt work, my guess is that it is because it was a button with an onclick event, this is an assigned event and not a default event, so event.preventDefault() will not work for it, return false would not work either,
      hence the $('#button).unbind(); I tried to put that prior to the post call as well without the if condition and it still would not prevent to onclick event.

      And yes URL is an actual URL
      Signature
      Create Facebook deals, sweepstakes, contests, polls, custom pages and more without a monthly fee!

      Generate thousands of leads in any niche in under 60 seconds!
      {{ DiscussionBoard.errors[7526801].message }}
  • Profile picture of the author SteveJohnson
    So maybe you could kind of reverse your thinking...remove the onclick binding and bind it if needed AFTER you evaluate the server response:
    Code:
    <button id="button" onclick="myredirect();"
    then:
    Code:
    function myredirect(){
  window.location somewhere;
}
$( function(){
  var  $button = $( '#button' ),
       storeval = $button[0].onclick;

  $button[0].onclick = null;

  $button.bind( 'click', function() {
      $.post( URL, function( data ){
         if ( '' != data ) {
            $( 'body' ).append( data );
         }
         else {
            $button.bind( 'click', storeval );
         }
      }
  }
});
    stupid editor removed the $ vars
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7527241].message }}
  • Profile picture of the author FirstSocialApps
    No that wont work for my needs. Thanks for the suggestion however. I ended up making a different compromise that did suit my needs, however I would still love to know why this didnt work, just to know.
    Signature
    Create Facebook deals, sweepstakes, contests, polls, custom pages and more without a monthly fee!

    Generate thousands of leads in any niche in under 60 seconds!
    {{ DiscussionBoard.errors[7528116].message }}
  • Profile picture of the author SteveJohnson
    It didn't work because the onclick code executes before your jQuery click event binding. You can't unbind the event (the onclick) after it has fired, you can only intercept it.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7531579].message }}

Trending Topics