Two functions with .ajax() inside doesn't work together

Question

In my JS file I have two functions:

function A () {
  ...
    $.ajax({
      type: "POST",
      url: "page.php",
      data: {<some data>}
    })
    .done(function( data ) {
      ...
    })
  ...
}

function B () {
  ...
    $.ajax({
      type: "POST",
      url: "page.php",
      data: {<some other data>}
    })
    .done(function( ) {
      ...
    })
}

Both these functions are called by onclick event of some anchors. So, somewhere in html file I have such code:

<a onclick="A()">Link to call A()</a>
<a onclick="B()">Link to call B()</a>

When I have only function A in my code everything works just fine. However, these functions both doesn't work when I have them in the code that you can see above. When I click on a link with onclick="A()" function A is not even called.

What is wrong? How can I fix it?

I'd be surpised if either one worked. You have them both wrapped in a `$(document).ready` handler. They'll be executed automatically when the `DOMContentLoaded` event is fired. `onclick` should do nothing. Remove the `$(document).ready(function () { ... });` wrapper and it should work fine. — War10ck, Apr 30 '14 at 17:36
No - the document ready looks like it is inside the functions `A()` and `B()`. So the ajax call shouldn't be executed on `DOMContentLoaded` - what is happening (I think) is that the ajax function is being bound to document ready only when the button is clicked (by which time DOMContentLoaded has been and gone). Agree that I don't expect either to work though:) — Adam, Apr 30 '14 at 17:40
You edited your code, so the answers don't make sense anymore. And you even accepted one of them, which is even more confusing. It's totally unclear now if your issue is fixed or not. If it is fixed, please revert your edit to show the problematic code. — Felix Kling, Apr 30 '14 at 18:21

score 0 · Accepted Answer · answered Apr 30 '14 at 17:37

0

Remove the $(document).ready( bit if you are calling the function when the button is clicked. By the time the user gets to click a button, document ready has already passed - it is an event which runs when the page loads.

answered Apr 30 '14 at 17:37

Adam

6,539
3
39
65

score 0 · Answer 2 · answered Apr 30 '14 at 17:38

0

function A () {
  ...
    $.ajax({
      type: "POST",
      url: "page.php",
      data: {<some data>}
    })
    .done(function( data ) {
      ...
    });
  ...
}

function B () {
  ...
    $.ajax({
      type: "POST",
      url: "page.php",
      data: {<some other data>}
    })
    .done(function( ) {
      ...
    });
}

answered Apr 30 '14 at 17:38

techie.brandon

1,638
2
18
27

I have removed the `(document).ready(...)`. Nothing has changed. – phbelov Apr 30 '14 at 17:49
Do you see any of the function executing? A or B? Add a console.log("Hi, I'm in A"); to the function before your ajax call. – techie.brandon Apr 30 '14 at 17:52
Maybe your functions may not be in global scope at the time the DOM inline events are defined, where in the page are they defined? Little background: http://stackoverflow.com/questions/11823290/what-is-the-difference-between-calling-a-javascript-function-onclick-javascript – techie.brandon Apr 30 '14 at 17:57
Ok. I got it. Had a syntax error (have missed one ")") :) – phbelov Apr 30 '14 at 17:57

score 0 · Answer 3 · answered Apr 30 '14 at 17:40

Write them as below. This way, your functions would be called on document ready and you can also call them on demand.

function A () {
    $.ajax({
        type: "POST",
        url: "page.php",
        data: {}
    })
    .done(function (data) {
    });
}

function B () {
    $.ajax({
        type: "POST",
        url: "page.php",
        data: {}
    })
    .done(function () {
    });
}

$(document).ready(A);
$(document).ready(B);

Two functions with .ajax() inside doesn't work together

3 Answers3