Passing variables to an AJAX function through the parameters PHP

Question

I'm trying to pass 4 variables through the parameters of the ajax function, but it's not accepting it for some reason. The variables I'm trying to pass are the url, action, id, and the timeout in milliseconds. If anyone know what I'm doing wrong, please correct me. Thank you.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 

function myAjax(url,action,id,timeout) {
      $.ajax({
           type: "POST",
           url: url,
           data:{action: action},
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( id ).innerHTML = data;
             setTimeout(myAjax, timeout);
           }

      });

}

</script>

<body onload="myAjax('testing.php','call_this','my_div',2000)">

<div id="my_div"></div>

</body>

Here's the working version of the code, without passing the variables through the parameters, and instead having them inside the function itself:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 

function myAjax() {
      $.ajax({
           type: "POST",
           url: 'testing.php',
           data:{action: 'call_this'},
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( 'my_div' ).innerHTML = data;
             setTimeout(myAjax, 2000);
           }

      });

}

</script>

<body onload="myAjax()">

<div id="my_div"></div>

</body>

@jfriend00 Yes. It did got called. But only once. Then it stops. Period. Even though the timeout is only on 2 seconds. I waited for minutes. It didn't move. — iscattered
– iscattered, Commented Jun 4, 2015 at 0:21
And what would be the parameter values passed for the subsequent calls? Did you do a console.log( url ) in the function before the ajax call to see if the second call, if any, passes any value to the function? — PeterKA
– PeterKA, Commented Jun 4, 2015 at 0:25
I would re-write the setTimeout function like so: setTimeout(function() { myAjax(url,action,id,timeout); }, timeout); — PeterKA
– PeterKA, Commented Jun 4, 2015 at 0:27
@PeterKA Ah, yes. That fixed my problem. Thank you. Though if you post your comment as an answer, I will up vote and accept it for future visitors. — iscattered
– iscattered, Commented Jun 4, 2015 at 0:31

PeterKA · Accepted Answer · 2015-06-04 00:33:46Z

3

Re-write the setTimeout() call like so:

setTimeout(function() { 
    myAjax(url,action,id,timeout); 
}, timeout);

answered Jun 4, 2015 at 0:33

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

4 Comments

iscattered Over a year ago

Okay. One more question? If my server only has 100GB of bandwidth, what should I set my timeout as? I don't want to overload my server and crash it, as it happened many times in the past when I didn't know how use timeout correctly.

PeterKA Over a year ago

Maybe a strategy, if there is, that makes the Ajax call only if server data has changed would be better.

iscattered Over a year ago

But how would ajax know that the server data has changed UNLESS they check it first? I wonder if that kind of strategy exist. If so, I so want to know. I think a lot of people would want to know.

PeterKA Over a year ago

Maybe you may want to ask this as an independent question so as to be fair to it. I know there's an answer out there. A server-side script could be used to update a cookie which can then be monitored by your JS.

jfriend00 · Accepted Answer · 2015-06-04 03:21:22Z

1

The second time it is called (from your success handler), you are not passing any parameters to myAjax() so it will not have any arguments when it is invoked the second time.

There are a couple ways you can fix that. One way it to just copy the arguments when you call myAjax(...) from within:

function myAjax(url,action,id,timeout) {
      $.ajax({
           type: "POST",
           url: url,
           data:{action: action},
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( id ).innerHTML = data;
             setTimeout(function() {
                 myAjax(url, action, id, timeout);
             }, timeout);
           }
      });
}

But, you could also make an inner function and then just reference the arguments from the closure like this:

function myAjax(url,action,id,timeout) {
      function run() {
          $.ajax({
               type: "POST",
               url: url,
               data:{action: action},
               error: function(xhr,status,error){alert(error);},
               success:function(data) {
                 document.getElementById( id ).innerHTML = data;
                 setTimeout(run, timeout);
               }
          });
      }
      // run the ajax function the first time
      run();
}

edited Jun 4, 2015 at 3:21

answered Jun 4, 2015 at 0:33

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

3 Comments

jfriend00 Over a year ago

@iscattered - check out the second option here that makes use of an inner function and a closure to keep access to your arguments without having to recopy them.

iscattered Over a year ago

I have a question? When I changed the parameter name 'action' to any other text, it only executes the function once for some reason. Do you have any idea why? Thanks.

jfriend00 Over a year ago

@iscattered - you'd have to show me exactly what the new code looks like that didn't work. I can't tell from your description.

Collectives™ on Stack Overflow

Passing variables to an AJAX function through the parameters PHP

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related