Returning AJAX Value to Javasscript variable

Question

I have spent hours looking for help with returning to Javascript the AJAX call to a php script.

What I am trying to do, is insert a value into a table, then return the id for that inserted row, which can then be used in a form, so when the time to update the table with the form data, it can specify where it should go (which row). I need to do this, so I can basically reserve the row, and it won't be stolen by another user.

This is the call I have been using:

id = getID('<?php echo $q; ?>','<?php echo $i; ?>');

The php values are valid (looking at the code, the values are displayed), and the var is declared outside of the javascript function.

This is the AJAX function:

var xmlhttp;

function getID(q, i)
{
    xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Sorry but your browser does not support AJAX or Javascript has been disabled");
    return;
  }

  var url = "getID.php";

  url = url + "?q=" + q;
  url = url + "&i=" + i;

  // execute the fully formed request
  xmlhttp.onreadystatechange=stateChanged;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
}


function stateChanged()
{
  if (xmlhttp.readyState==4)
  {
      id = xmlhttp.responseText;
//    alert(xmlhttp.responseText);
//    return xmlhttp.responseText;
  }
}


function GetXmlHttpObject()
{
  if (window.XMLHttpRequest)
  {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    return new XMLHttpRequest();
  }
  if (window.ActiveXObject)
  {
    // code for IE6, IE5
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

and the php code:

$q  = $_GET['q'];
$i = $_GET['i'];

$query = "INSERT INTO parts (q, i) VALUES ('".$q."','".$i."')";

$results = mysql_query($query) or die(mysql_error());
$nextId = mysql_insert_id();
echo "$nextId";

If I alert the value, it will return properly, but in the form, which is creating a DOM dynamic row for this value and data to be entered, it comes up with "undefined". Can anyone guide me how to make this work? I will admit I'm no AJAX expert, and I can't seem to get callbacks to work when I try them, and frankly, don't really understand how...

Thank you in advance for any help anyone can offer.

Can you tell me where to use that? In the PHP in place of echo? — Will Sam, Aug 05 '13 at 01:19
@Songo, can you be so kind as to offer some code to make it work? — Will Sam, Aug 05 '13 at 01:20
@DrixsonOseña adding that in the PHP code results in no difference. Still undefined. `echo json_encode($nextId);` — Will Sam, Aug 05 '13 at 01:24
@WillSam check [this link](http://stackoverflow.com/questions/866860/mysql-versus-pdo) for why PDO is better to use than `mysql_*` extension and [this link](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example) for using jQuery to do Ajax. Hope it helps as a starting point ;) — Songo, Aug 05 '13 at 01:26
@WillSam Sorry my bad I forgot to ask you what type of data are you retrieving? json or just text?? if json use `json_encode(array('next_id' => $nextId));` or if just text then your script is just fine. — Drixson Oseña, Aug 05 '13 at 01:52

score 3 · Accepted Answer · answered Aug 05 '13 at 02:55

I know its little bit tough to understand the Ajax call method for ajax Newbies, So here i would recommend to do this with Jquery .post ajax calling method !

here is the way of doing it,

using jQuery .post() function

you can pass data to any external php file via this function and get the output. (it automatically makes the ajax call to the remote php file)

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.post("getID.php",
        {
          q:"some data", // here set the variables you want to pass as $_POST
          i:"some data"     // here set the variables you want to pass as $_POST
        },
        function(data,status){
          alert("PHP file Output: " + data + "\nStatus: " + status);
          // here take the the php file output using the "data" variable , "status" is optional  
        });
      });
    });
    </script>
    </head>
    <body>

    <button>Send an HTTP POST request to the php file and get the result back</button>

    </body>
    </html>

PHP file :

<?php
$q  = $_POST['q'];
$i = $_POST['i'];

$query = "INSERT INTO parts (q, i) VALUES ('".$q."','".$i."')";

$results = mysql_query($query) or die(mysql_error());
$nextId = mysql_insert_id();
echo "$nextId";

?>

I only have two small issues with this. The first time I trigger it, I get "undefined" in the field I want to put it into in the form. For every other time I trigger it (for a new row), it's filling in the value. EDIT - other issue...I missed the POST instead of GET. If you have any advice...I'm going to see what I can figure out on my own in the meantime. Thanks again! — Will Sam, Aug 05 '13 at 05:24
@WillSam issue 1 : if you can share the code which you use for the form updating, It'll be easy to find the issue ! — Cody, Aug 05 '13 at 08:10
Thanks, but I got it by calling the function and passing "data". It's working great now. Thanks! — Will Sam, Aug 05 '13 at 17:33

Returning AJAX Value to Javasscript variable

1 Answers1