Please.. I need AJAX Help!
Development and Programming
I am completely stumped …
Objective: To Query & UPDATE a Non-EE Database Table via AJAX/Js
THE PROBLEM:
AJAX Function #2 is not passing “GET” info to UPDATE php page
(Note: My php pages work fine and both AJAX functions are being called. The problem is specific to Function#2 not passing “GET” to the UPDATE page)
Here is my code:
(js Script tags are removed)
VIEWABLE PAGE
<head>
// AJAX FUNCTION #1 TO CALL INITIAL QUERY
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Does not work
alert("OOPs!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajax');
ajaxDisplay[removed] = ajaxRequest.responseText;
}
}
var stallionid = document.getElementById('stallionid').value;
var mareid = document.getElementById('mareid').value;
var queryString = "?stallionid=" + stallionid + "&mareid;=" + mareid;
ajaxRequest.open("GET", "PHP PAGE URL" + queryString, true);
ajaxRequest.send(null);
}
//-->
// AJAX FUNCTION #2 USED TO CALL UPDATE PHP
<!--
//Browser Support Code
function ajaxFunction2(){
var ajaxRequest2; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest2 = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest2 = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try{
ajaxRequest2 = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){
// Does not work!
alert('OOPS!');
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest2.onreadystatechange = function(){
if(ajaxRequest2.readyState == 4){
var ajaxDisplay2 = document.getElementById('ajax');
ajaxDisplay2[removed] = ajaxRequest2.responseText;
}
}
var requestid = document.getElementById('requestid').value;
var mareid = document.getElementById('mareid').value;
var queryString = '?requestid=' + requestid + '&mareid;=' + mareid;
ajaxRequest2.open('GET', 'UPDATEPAGEHERE' + queryString, true);
ajaxRequest2.send(null);
}
//-->
</head>
<body>
<div id="ajax">
RESULTS
</div>
</body>The PHP Results from initial AJAX function call display perfectly. However, Grabbing the information and passing it to AJAX function #2 when the button is clicked to update - … that is the issue!
**** HerE IS the PHP Initial Query Page *****
<?php
$stallionid = $_GET['stallionid'];
// Escape User Input to help prevent SQL Injection
$stallionid = mysql_real_escape_string($stallionid);
//build query
$query = "SELECT * FROM es_breeding_requests WHERE stallion_id = '$stallionid'";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Request ID</th>";
$display_string .= "<th>Mare Name</th>";
$display_string .= "<th>Foal ID</th>";
$display_string .= "<th>Mare Info</th>";
$display_string .= "<th>Request Date</th>";
$display_string .= "<th>Request Status</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td>$row[request_id]</td>";
$display_string .= "<td> <a href="http://www.equisophical.com/index.php/eS_Horses/horse_id/$rowmare_id">"]$row[mare_name]</a></td>";
$display_string .= "<td>$row[foal_id]</td>";
$display_string .= "<td>$row[mare_info]</td>";
$display_string .= "<td>$row[request_date]</td>";
$display_string .= "<td>
<form>
<input type='hidden' id='requestid' value='$row[request_id]' />
<input type='hidden' id='mareid' value='$row[request_id]' />
<input type='button' value='$row[request_status]' >
</form></td>";
$display_string .= "</tr>";
}
$display_string .= "</table>";
echo $display_string;
echo "Query: " . $query . "
";
?>THE RESULTS display beautifully - and when I click on the button to call the AJAX Function #2, it does call the function. HOWEVER, the update to the database via my 2nd PHP page does not run because it is not passing the FORM VALUES to the 2nd AJAX function (or AJAX isn’t passing them). I have done a ‘view source’ on the initial PHP page and the FORM field values are entered and are CORRECT so AJAX should be getting the query string…
Please help, I am at a complete loss as to what the problem is. This is just bizzare!
Ok, I did run a test and if I don’t run the first AJAX function, but only the 2nd - and hard code in values for the FORM FIELDS, it runs fine.
Why won’t it use the form fields from the SQL query?
:(
XXXXXX
ADDED approx an hour later: Ok, I’ve discovered the problem. I need to assign an individual element ID for EACH record my query retrieves and pass that variable into the AJAX function.
I’m not sure how to do this…
Basically my PHP puts out the query results into a form.
<form>
<input type="hidden" value="SQL RESULT HERE" id="NEED UNIQUE FOR EACH RECORD">
<input type="button">
</form>Then my AJAX function gets the element by ID( UNIQUE for EACH RECORD)
… So if I create a UNIQUE ID for each record and assign it as a variable … how do I pass that variable from my php output into my AJAX function?
ACK!
Hallelujah!
After working on this problem for three days, the solution was incredibly simple. All I needed to do was add variables as parameters within the function. Go me!
I simply changed the following lines in my ajaxFunction2 code:
***
FROM:
function ajaxFunction2 ()
TO:
function ajaxFunction2(requestid, mareid)
and
FROM:
var requestid = document.getElementById('requestid').value;
var mareid = document.getElementById('mareid').value;
TO:
var requestid = requestid
var mareid = mareid
***And on my 1st PHP page (initial query) I changed the following: (Just noticed what I posted here was not actually what was in the php file… so I’ll put what I had, then what I changed it to)
FROM:
input type='hidden' id='requestid' value='$row[request_id]'
input type='hidden' id='mareid' value='$row[mare_id]'
input type='button' onclick='ajaxFunction2()' value='$row[request_status]'
TO:
input type='button' onclick='ajaxFunction2($row[request_id,$row[mare_id)' value='$row[request_status]'
***I’ve posted this for anyone else that is interested in using AJAX to update/refresh content without having to reload the entire page. It makes for less waiting, less bandwidth transfer, and a more pleasant experience all around. 😊
Wow, this was super helpful! Thank you so much for posting!