I want php to return a value to ajax. I'm following W3 schools example but no joy.
Here is the javascript/ajax code:
function createReport() {
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.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("report").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
I have the following call inside an event handler that I know is triggering (other stuff it does is working fine)
createReport();
and later in the body section of the html I have:
<div id="report">Report will be placed here...</div>
If I run test.php by itself, it correctly shows "return this to ajax" so I know that's working. Here is the php code:
<?php
echo 'return this to ajax';
?>
My understanding is that "Report will be placed here..." will be replaced with "return this to ajax". But nothing happens. I don't see any errors listed in the firefox or IE consoles either. Any ideas?
I personally do not think the w3cschools a good place to learn ( see http://www.w3fools.com/ ).
It may be that the problem occurs because of the order that you set the ajax, you did:
XMLHttpRequest/onreadystatechange/open/send
is preferable (if you do not follow this order may occur several flaws in older browsers):
XMLHttpRequest/open/onreadystatechange/send
Note: do not worry, the "open(...)" does not start listeners.
Listeners only work after the "send(...)"
Another reason may be that you did not create "error handling" of XMLHttpRequest.status, it serves to verify faults in the server response.
Try this:
<script>
function XHR(){
if(window.XMLHttpRequest){//outers browsers
return new XMLHttpRequest();
} else if(window.ActiveXObject){//IE
try{
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(ee) {//IE
try{
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(ee) {}
}
}
return false;
}
function createReport(){
var xhr = XHR();// call ajax object
if(xhr){
xhr.open("GET", "test.php", true);//setting request (should always come first)
xhr.onreadystatechange = function(){//setting callback
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("report").innerHTML=xhr.responseText;
} else {//if the state is different from 200, is why there was a server error (eg. 404)
alert("Server return this error: " + String(xhr.status));
}
}
};
xhr.send(null);//send request, should be the last to be executed.
} else {
alert("Your browser no has support to Ajax");
}
}
</script>
<div id="report">Report will be placed here...</div>
<script>
createReport();//prefer to call the function after its div#report
</script>
To prevent cache, replace:
xhr.open("GET", "test.php", true);
by
xhr.open("GET", "test.php?nocache="+(new Date().getTime()), true);
At first glance I don't see anything wrong on your js code, so I bet it will probably be a problem locating test.php in your folder structure.
With firebug check the call your javascript AJAX it's doing, and check if the file test.php is being correctly assesed.
I did not find anything wrong with W3Schools' Ajax example, after testing the code that follows (which was pulled from their Website).
Possible factors:
Missing <script></script> tags
Make sure you have JS enabled.
Make sure your browser supports it.
You may have forgotten to change the button's call to the proper function.
Working and tested code using FF 26.0 and IE version 7
Pulled from W3 Schools Website (example) and slightly modified to prove this works.
Result when clicking on the Change Content button:
return this to ajax - as per your PHP code.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("report").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="report"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
PHP used: (test.php)
<?php
echo 'return this to ajax';
?>
Other possible factors:
If on a local machine, your server doesn't support PHP or is not parsing PHP properly, or is either not installed or configured properly.
If on a hosted service, make sure PHP is available for you to use.
Files are not in the same folder as executed from.
try{
request = new XMLHttpRequest();
}catch(trymicrosoft){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request = false;
}
}
}
if(!request)
{
alert("Error initializing XMLHttpRequest!");
}
function Create_Ajax_Query(LinkToFile,Parametrs)
{
window.document.body.style.cursor='progress';
request = new XMLHttpRequest();
var url = LinkToFile;
var params = Parametrs;
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = newinfo;
request.send(params);
}
function newinfo()
{
if(request.readyState==4 && request.status == 200){
window.document.body.style.cursor='default';
alert(request.responseText);
}
}
Hope its useful!
The code looks correct. it runs just fine on a local environment.
I would advise to look at the "Network" tab in the developer tools to detect any errors may occurs on the server side. You can also use console.log() to follow the javascript actual flow:
function createReport() {
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.onreadystatechange=function() {
console.log(xmlhttp); //to show the entire object after statechage.
console.log(xmlhttp.readyState); //to show specific parameter.
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("report").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
Related
I have three divs saved in an array as simple_html_dom objects. I needed to change a CSS property of two of them on the click of a button. That's easy, but then I also need to make that change in the CSS property (in the simple_html_dom object stored in the aforementioned array) in the PHP script on the server side.
So I figured from my web search I needed AJAX for this. So I read up this tutorial, and I am following this example, and doing something like:
On the client side:
function xyz(var divIdOne, var divIdTwo) {
document.getElementById(params.divIdOne).style.display = "none";
document.getElementById(params.divIdTwo).style.display = "block";
document.getElementById(params.divIdTwo).style.border = "5px solid red";
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();}
else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.open("GET","myfile.php?pass_back="+"pass_back",true);
xmlhttp.send();
}
On server side:
foreach($_REQUEST as $requestkey => $requestvalue) {
echo $requestkey.': '.$requestvalue;
}
if (array_key_exists('pass_back', $_REQUEST)) {
foreach ($array_of_divs as $div) {
if ($div->id=$divIdOne) {
$div->style='display:none';
} else if ($div->id=$divIdTwo) {
$div->style='display:block';
}
}
} else {echo 'FALSE!';}
The first foreach loop prints other variables but does not print pass_back. The next if block does not execute at all. The else block executes. This means that $_REQUEST clearly does not contain pass_back. Can anyone pinpoint why, or what I did wrong?
I fail to see the error. How do you check that you're not sending the data properly? I suggest using this piece of code in order to check what your server is receiving from your request:
function xyz() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText);// Let's see what the server is echoing
}
}
xmlhttp.open("GET","myfile.php?pass_back="+"pass_back",true);
xmlhttp.send();
}
Please, let us know the output.
I would recommend that you use jquery and firebug, and first get rid of the following problem: why is passback variable not received.
Create the file: test.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<title>Html page</title>
</head>
<body>
<script>
(function($){
$.post("myfile.php", {
passback: "pooo"
}, function(d){
console.log(d);
});
})(jQuery);
// or if you cannot use jquery
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.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// do something with the response, if you need it...
// document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "myfile.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("passback=pooo");
// src: http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
</script>
</body>
</html>
Then create the file: myfile.php
<?php
if(isset($_REQUEST['passback'])){
echo "ok";
}
else{
echo "oops";
}
Next, download firefox, and download the firebug extension (or you can use chrome's console alternatively). The goal here is to see what is being passed through the network.
Launch test.php in a browser, open the firebug console (or chrome's console),
and debug until you see the "ok" message.
My goal is to more or less send out requests to a php file, giving it parameters like so;
<!DOCTYPE html>
<html>
<head>
<script>
function onsubmit()
{
var id = $_SESSION['user']['id'];
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.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
window.WhateverVariable = xmlhttp.responseText;
}
}
xmlhttp.open("GET","clientrequest.php?id="+id,true);
xmlhttp.send();
}
</script>
</head>
<body>
</body>
</html>
and keep sending out requests untill my php script returns x value, which will be passed into the window.WhateverVariable, and when the WhateverVariable is equal to 'x' I wish to execute some code;
however, I can achieve this, but when the code is executed, the request is still going meaning the response text will be 'x' and will continuously destroy then re-execute the code, any way to get past this?
if ( the_mini_game_is_not_open() )
{
// send the regular ajax request
} else {
// send the ajax request but with the message that the mini game is open through parameters maybe like ?open=1
}
And on server side deal with this like:
if ( isset ( $_GET['open'] ) && $_GET['open'] === 1 )
{
// pause it or whatever...
} else {
// show the regular results
}
This was what I understood. Sorry if that's not what you want
I have a website that uses a javascript function below to populate List 2 when an item from the drop down List 1 is chosen. What I would like to achieve is to have List 2 and List 3 updated. The function is shown below works for both List 2 and List 3 separately but using an alert I can see that it stops after the first send if I put them together. How can I am make them both work together?
This is the Select that calls the function checkTeacherList which is working fine.
<select name="department_list" id="department_list" selected="All" onchange="checkTeacherList(this.value, '<?php echo $user_login;?>');" >
Th eJavaScript function checkTeacherList
<script type="text/javascript">
function checkTeacherList(departmentName, schoolName)
{
var xmlhttp;
//populating List 2
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("departmentTeachers").innerHTML=xmlhttp.responseText;
}
}
var d = new Date();
xmlhttp.open("GET","http://website/getTeachers1.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();
//populating List 3
alert("Is it getting this far?"); // this alert does not get reached
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("nondepartmentTeachers").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://website/getTeachers2.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();
}
</script>
The alert is not called because you are calling "xmlhttp.send();" twice.
The second call yields an error.
it is not really a good way to solve this problem. I should focus on setting up ONE AJAX connection , that the script just have to ask one connection.
The major advantage of using this method is the time required to gather all data. It will be double faster then doing it twice.
However, i am not sure if you can modify the php files.
If so, please edit it. I have noticed that both requests contains of same parameters.
in js;
// function to fill option
var fillOptions = function(data) {
// use data to fill drop down boxes
var teacher1 = data["teacher1"]; // get $teacher1 which is in 'teacher1'
var teacher2 = data["teacher2"]; // get $teacher2 which is in 'teacher2'
}
// function to check teacher list
function checkTeacherList(departmentName, schoolName)
{
// create object by browser type
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
// for IE6, IE5
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
// event when request is done
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// get data
var data = JSON.parse(xmlhttp.responseText);
// send to function to handle it
fillOptions(data);
}
}
// open link
xmlhttp.open("GET","http://website/getAllTeachers.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
// send
xmlhttp.send();
}
and in getAllTeachers.php ( a new php file, but you can wrap your two php file in one if you want)
$teacher1 = ... // teacher1 list
$teacher2 = ... // teacher2 list
// return with a JSON type
header('Content-Type: application/json');
// reply with json format
echo json_encode(array('teacher1' => $teacher1, 'teacher2' => $teacher2));
The php file will reply with data in JSON-format. In the js, you can see that the response is being handled with JSON.parse() function and being passed to fillOptions(data) function. There, you can access data submitted by php and use the same data to fill in your dropdown box.
(i don't know the response content, but
document.getElementById("nondepartmentTeachers").innerHTML = data["teacher2"];
should achieve the same result as intended )
If you want to go with your solution, you have called .send() function twice, which the second one will return into errors.
Below is the response from server (as per google chrome rest-client):
Below is the code snippet I'm using to post some data to our server. I want to get back data as xml ouput.
Keeping in mind the concept of same origin policy i uploaded this piece of code onto our sever as a html page, but not getting any response.
Is there anything wrong with my code or is my approach wrong?
<html>
<head>
<script type="text/javascript">
function getToken()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
alert("stage 1");
xmlhttp.onreadystatechange=function()
{
alert("stage 2");
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("stage 3");
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("token");
alert("stage 4");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
alert("stage 5");
xmlhttp.open("POST","http://abc.mysite.com:9090/myapi/xxx",true);
xmlhttp.send("op=login&pass=xxx");
}
</script>
</head>
<body>
<center><h2>UserPreview:</h2></center>
<br />
<div id="myDiv"></div>
<br />
<button type="button" onclick="getToken()">GetToken</button>
<div data-role="footer" data-position="fixed" data-theme="a"><h4>Ver: 1.1(17112)</h4> </div>
</body>
</html>
<response><token>8768768768768768</token></response>
You have to take into account that: for AJAX calls, you can only access the same hostname (and port / scheme) as your page was loaded from. The same domain always and the same PORT:
How exactly is the same-domain policy enforced?
In the past I use this for the IE version, I suppose for possible compatibility issues:
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
I always put the code like this:
var THEURL="http://mysite.abc.com:8080/myapi/xxx"
var data="op=login&pass=xxx";
http.open("POST",THEURL, true);
http.onreadystatechange = function(){
};
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", data.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(data);
Can't you use jquery? It is much more efficient.
To make an ajax call:
http://api.jquery.com/jQuery.ajax/
For example:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
The sooner you use Jquery the sooner your work will get faster.
If the element called token in your xml file is an xml element, and not an attribute then you replace the following lines by -
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
by -
txt += (window.ActiveXObject)?x[i].childNodes[0].text : x[i].childNodes[0].textContent;
I didn't ask you wheter your XHR is returning you the XML properly or not.
Im trying to parse a HTML result of **XmlHttpRequest** in Firefox. Im expecting to receive the HTML result from XmlHttpRequests *responseText* but when Im calling an alert(responseText) nothing is displayed.
Ive followed the example from http://stackoverflow.com/questions/888875/how-to-parse-html-from-javascript-in-firefox but that doesnt work either.
Here is thecode to make myself clear:
<html>
<head>
<script type="text/javascript">
var http1;
var result;
function onPageLoad()
{
http1=getXmlHttpObject();
http1.open("GET", "https://login.yahoo.com/config/login_verify2?&.src=ym", true);
http1.send(null);
http1.onReadyStateChange=stateChanged();
}
function stateChanged()
{
if(http1.readyState==4)
{
result = http1.responseText;
alert("result"+ result);
var tempDiv = document.createElement('div');
tempDiv.innerHTML = result.replace(/<script(.|\s)*?\/script>/g, '');
// tempDiv now has a DOM structure:
alert(tempDiv.getElementById('username').size);
}
else
alert("mircea geoana la zoo");
}
function getXmlHttpObject()
{
var objXMLHttp=null;
if (typeof XMLHttpRequest!= 'undefined')
{
objXMLHttp=new XMLHttpRequest();
}
else
{
objXMLHttp=new ActiveXObject(Microsoft.XmlHttp);
}
return objXMLHttp;
}
</script>
</head>
<body onload="onPageLoad()">
<p>aaa<p>
</body>
</html>
http1.onReadyStateChange=stateChanged();
should be
http1.onReadyStateChange=stateChanged;
I see a big mistake there.. the message on the else branch should read 'miRcea', not 'micea'.. Tell me if this solves your issue, Mr claudiu ;))
this is how you should define the xmlhttp Object:
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
Check out this w3School tutorial to read about how to properly use AJAX calls and the like.
edit - my bad, only saw the line defining the call for IE6/5. Either way this method is much more clean.
You can only send AJAX requests to the same domain from which the JavaScript originates. And I'm guessing you're not sending your requests from "login.yahoo.com"...