jquery, cannot have an ajax call in a callback function

Question

<head>  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
         $(document).ready(function(){
              $("#submit").click(function(){
                     $.get("invite_friends_session.php", function(){
                    });
               });
          });
</script>
</head>
<body>
<form >
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</form>
</body>

the $.get("invite_friends_session.php") part does not work. But it works if i keep it outside the callback function.

But i need to call the invite_friends_session.php whenever there is a click on the #submit.

how to do that?

So your .click listener/handler is functioning correctly (you can do other things within it?) and it's only your $.get function that has an issue inside the handler? — djlumley
– djlumley, Commented Jul 11, 2011 at 4:46

The Scrum Meister · Accepted Answer · 2011-07-11 04:49:01Z

5

Since the submit button is inside a form, clicking the submit button bubbles up and submits the form. You need to add a return false to the end of the handler:

$("#submit").click(function(){
    $.get("invite_friends_session.php", function(){
    });
    return false;
});

answered Jul 11, 2011 at 4:49

The Scrum Meister

30.2k8 gold badges69 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sof_user Over a year ago

@The Scrum Meister, ur code didn't work for me. did u run it? or any mistake on my side?

hayesgm · Accepted Answer · 2011-07-11 04:51:35Z

1

[Edit] You should prevent the default form submit action upon click.

$(document).ready(function(){
  $("#submit").click(function(e){
    e.preventDefault(); //edit
    $.get({ url: "invite_friends_session.php",
            success: function() {
              alert('success');
            },
            error: function() {
              alert('error');
            },
            complete: function() {
              alert('complete');
            }
          });
  });
});

edited Jul 11, 2011 at 4:51

answered Jul 11, 2011 at 4:42

hayesgm

9,2362 gold badges40 silver badges41 bronze badges

5 Comments

The Scrum Meister Over a year ago

-1 According to the Documentation the .get() can be called with the parameters url, success

hayesgm Over a year ago

Concede, that said, it's not a loss to switch to this method since it will be more conducive to debugging. He should add 'error' and 'complete' actions to see what's going on (as well as check in firebug)

sof_user Over a year ago

@ The Scrum Meister , no, if I use the $.get without any success outside the callback function, it works

sof_user Over a year ago

@ghayes, where did u use json?

hayesgm Over a year ago

@sof_user, ScrumMeister's suggestion should fix your issue. By default, a click on the submit button will submit your form object. You can avoid this by returning false in your click-handler, or calling e.preventDefault() from it. That said, I would strongly suggest using an <input type="button" id="submit"> for more semtantic clarity.

iwasrobbed · Accepted Answer · 2011-07-11 05:00:33Z

Remove the <form> tags around the submit button. Since you're using jQuery's .get method, you don't need that form tag (technically, it doesn't even need to be a submit input button). Right now, it's trying to post using the form instead of getting the page via jquery.

Example: http://jsfiddle.net/R3CWp/

<head>  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
         $(document).ready(function(){
              $("#submit").click(function(){
                     alert("i got clicked");
                     $.get("invite_friends_session.php", function(){
                    });
               });
          });
</script>
</head>
<body>
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</body>

Collectives™ on Stack Overflow

jquery, cannot have an ajax call in a callback function

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related