mixing Ajax with Javascript

Question

I foundout that I cant mix php with javascript so I ttried AJAX. in the code below I want the ajax function to get a value from getcount.php page and return it to the caller function. the code below doesnt work. where is the mistake?

<script type="text/javascript">
function getcount(day)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","getcount.php?"+day,true);
xmlhttp.send();

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    return xmlhttp.responseText;   
    }
}
 </script>

<script type="text/javascript">
$(function () {
var previousPoint;

var d1 = [];
 for (var i = 0; i <= 10; i += 1)
         d1.push([i, getcount(i)]);
  .
  .
  .

You're missing a closing } at the end of the getcount function. Try to keep a consistent code indentation, then that kind of thing is obvious quickly :) — Armatus
– Armatus, Commented Apr 20, 2012 at 18:44

shyam · Accepted Answer · 2012-04-20 18:47:56Z

3

The ajax callback will be asynchronous so, getcount() will return undefined and when the callback returns it is not assigned to anything

function getcount(day, arr) {
var xmlhttp;
...
xmlhttp.send();

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    arr.push([day, xmlhttp.responseText]);   
    }
}
$(function () {
var previousPoint;

var d1 = [];
 for (var i = 0; i <= 10; i += 1)
     getcount(i, d1);
...

edited Apr 20, 2012 at 18:47

answered Apr 20, 2012 at 18:42

shyam

9,3864 gold badges32 silver badges45 bronze badges

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

Comments

Tronix117 · Accepted Answer · 2012-04-20 18:45:07Z

1

Use jQuery, it will be far easier:

<script type="text/javascript">
  $(function () {
  var previousPoint, d1 = [];

  var getCount = function(day){
    $.get("getcount.php?"+day, function(data){
      d1.push([day, data]);
    });
  }

  for (var i = 0; i <= 10; i += 1)
    getcount(i)
});
</script>

answered Apr 20, 2012 at 18:45

Tronix117

1,98514 silver badges19 bronze badges

1 Comment

Snuffleupagus Over a year ago

That doesn't answer his question and just feels like a shameless plug. :[

kmfk · Accepted Answer · 2012-04-20 19:07:10Z

1

Mixing any type of Ajax query with a loop of this nature is not a great idea. It will create some interesting race conditions as the Ajax request is asynchronous - as already mentioned.

It would be better to do a single ajax request and handle the loop in php - then return a single array. However, again, its important you need to understand by default, the rest of your procedural javascript code will not wait for the Ajax method to return.

See the docs for help

answered Apr 20, 2012 at 19:07

kmfk

3,9712 gold badges24 silver badges33 bronze badges

Comments

Tuhin Subhra Dey · Accepted Answer · 2012-04-20 18:51:03Z

0

Try using Jquery ajax which is very easier for maintenance and debugging. Here is a sample 
ajax code

$.ajax({
 type: 'POST',  // can be get also
 url: 'yourpage.php',  // change name
 data: id,  // some data if u need to pass
 success: function(data) {  // returns date
       $('.result').html(data); // result 
 }
}); 

For details  http://api.jquery.com/jQuery.ajax/

Thanks.

answered Apr 20, 2012 at 18:51

Tuhin Subhra Dey

9806 silver badges20 bronze badges

Collectives™ on Stack Overflow

mixing Ajax with Javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related