Welcome to WebmasterWorld Guest from 54.146.194.42

Forum Moderators: open

Message Too Old, No Replies

Javascript seems to not communicate with PHP

     
3:31 am on Jun 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

My codes:
chuffbucket.html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="localhost/godfrey/Chuff Bucket/foods.js"></script>
</head>
<body>
<h1>The Chuff Bucket</h1>


<form>
Enter food item: <input type="text" id="userinput" name="userinput" onkeyup="processit(this.value)" />

</form>

<p id="resptext">Response here...</p>
</body>
</html>

foods.js

function processit(str){

if (str.length==0){ document.getElementById("resptext").innerHTML="Response here...";
return;
}

var xmlhttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
var xmlhttp;

// Check if using non-IE browsers

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

if (xmlhttp) {
try {
// Open function configures connection to server settings

xmlhttp.open("GET","http://localhost/godfrey/Chuff Bucket/foods.php?str="+str,true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("resptext").innerHTML=xmlhttp.responseText;
}
xmlhttp.send(null);
}
} catch(e) {
alert( e.toString() );
}
}

//alert(str);
}

foods.php
<?php
$q = $_GET["str"];


$foods = array("tuna","ham","fish");

if (isset($q)){
if (!empty($q)){
if (in_array($q,$foods)){
echo ("We have ". $q);
} else {
echo ("We don't have such food");
}
}
}
?>

I cant seem to get the javascript (foods.js) to communicate with the php file (foods.php).

All files are in the same directory.
11:45 am on June 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

BTW, when I printed out the xmlhttp.status = 0 and xmlhttp.readyState = 0 and they do not change to 200 and 4 respectively.

Very strange...

chuffbucket.html is in the localhost/godfrey/chuffbucket directory and foods.php is in the localhost/godfrey/chuffbucket/php subdirectory and foods.js is in the localhost/godfrey/chuffbucket/js subdirectory.
12:54 pm on June 6, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


What browser are you using? Most of the browsers have pretty good developer tools now that let you see the network requests. For example, in Google Chrome, press F12 to open the Developer Tools, click on the Network tab, and then load your page. You'll see what the status of the request is.
1:48 pm on June 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

I am using Firefox...

Godfrey
1:56 pm on June 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

I got"Load Event Fired" in red line and in blue "DOM Event Fired" all in 73ms.

Godfrey
2:01 pm on June 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

The same thing also occurs in Chrome...dont seem to be able to debug it.

Godfrey
2:21 pm on June 6, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


Are you looking at the Network tab? That shows things like the response status (200, 404, etc.). It doesn't sound like you're looking at the right thing.
2:43 pm on June 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

Yes, I was in the network tab at the bottom menu...

Theres Name, Method, Status, Type Initiator, Size, Time, etc

I suppose this is the correct tab...
3:22 pm on June 6, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


So do you see the request to foods.php, and what status does it have? Perhaps it's 304 (Not Modified)?
4:34 pm on June 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

This is the debug I get from Firefox...

Response Headers
ConnectionKeep-Alive
Content-Length176
Content-Typetext/html
DateThu, 06 Jun 2013 16:24:56 GMT
Keep-Alivetimeout=5, max=92
ServerApache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7
X-Powered-ByPHP/5.4.7
Request Headers
Accepttext/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encodinggzip, deflate
Accept-Languageen-US,en;q=0.5
DNT1
Hostlocalhost
Originnull
User-AgentMozilla/5.0 (Windows NT 6.1; rv:21.0) Gecko/20100101 Firefox/21.0

And here is my modified code in chuffbucket.html:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />


</head>
<body>
<h1>The Chuff Bucket</h1>



<form>
Enter food item: <input type="text" id="userinput" name="userinput" onkeyup="processit(this.value)" />

</form>
<p>xmlhttpstatus: </p><p id="xmlhttpstatus"></p>
<p>xmlhttpreadystate: </p><p id="xmlhttpreadystate"></p>

<br />
<p id="resptext">Response here...</p>



<script>
function processit(str){


if (str.length==0)
{
document.getElementById("resptext").innerHTML="Response here...";
return;
}

var xmlhttp;

// Check if using non-IE browsers
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","http://localhost/godfrey/ChuffBucket/php/foods.php?str="+str,true);
xmlhttp.send(null);




xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("resptext").innerHTML=xmlhttp.responseText;
}
}

}
</script>

</body>
</html>

The php file remains the same...

Once I put in "http://localhost/godfrey/ChuffBucket/php/foods.php?str=" in xmlhttp.open(), the connection to foods.php worked.

Now I just cant figure why the response from foods.php is blank.

Can you help?
4:38 pm on June 6, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi,

The status is 200...under response is blank.

Godfrey
6:00 pm on June 6, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


You've defined the onreadystatechange function AFTER you're calling send. Swap those and see if that fixes it.
8:37 am on June 18, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi Fotiman,

I solved the problem. With IE, under Security Settings->Custom Level->Miscellaneous->Allow Data Across Domains. That worked...

Problem is, I dont know how to set this in Chrome and Firefox.

After seting this in IE, I could see the readyState changed to 4 and Status to 200.

Below is my Javascript code:
function processit(str){

if (str.length==0){
document.getElementById("resptext").innerHTML="Response here...";
return;
}

var xmlhttp = false;

// Check if using non-IE browsers
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

// This is the best sequence of code

xmlhttp.onreadystatechange=function(){
document.getElementById("xhr").innerHTML = "<p>Ready State is " + xmlhttp.readyState + "<p>Status is " + xmlhttp.status + "<br />";
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("resptext").innerHTML = xmlhttp.responseText;
} else {
setTimeout('function()',1000);
}
}

xmlhttp.open("GET","http://localhost/godfrey/ChuffBucket/php/foods.php?str="+str,true);

xmlhttp.send(null);
}
5:13 pm on June 18, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


localhost is your problem. Browsers don't like AJAX calls to localhost.

You should be able to point a testing domain name to your local machine using your hosts file to avoid the problem.
12:38 am on June 20, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Assuming chuffbucket.html and foods.php are both being served by some server on same domain you should not need to "Allow Data Across Domains"

Make sure url that gets you to chuffbucket.html uses same hostname as foods.php NOT 127.0.0.1 for example

Set up a test domain as whoisgregg says and use it in all references including location bar.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members