I've created an html and a php file. The php links to a database (either my localhost or the university's database online), and the html uses AJAX to partially update a tag's content:
<html>
<head>
<title>iNote</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript">
function pullMore(){
var xmlhttp;
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome,etc.
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("more").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","1.php",true);
document.getElementById("more").innerHTML = "<p>notenter</p>";
xmlhttp.send();
}
</script>
<div id="Checklist"></div>
<div id="Note"></div>
<div id="more" onclick="pullMore()">
<p>Click to Replace Content Here</p>
</div>
</body>
</html>
However, no matter how I modified the php's content, (even when I changed it to a simple echo "<p>please show this!!</p>";), the xmlhttp.status ==200 cannot be satisfied, and "notenter" is displayed on screen.
If I quote out the condition and leaving only xmlhttp.readyState == 4, the message in <div> would be replaced, but only by blank space...and if the php code is the full one for accessing database, EVERYTHING after echo, including all the codes and brackets, would be outputted...
Can anyone help me? I've been debugging for hours and still can't figure out where's the problem...Thank you so much!
Related
I have this JavaScript:
<script>
if (str == "") {
document.getElementById("txtHint1").innerHTML = "";
return;
} else {
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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint1").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "/npsmart/umts/action_plano/?q=" + query1, true);
xmlhttp.send();
}
</script>
And this JavaScript call a page called getuser.php.
This is the code of getuser.php:
<!DOCTYPE html>
<html>
<body>
<p id="dumb"></p>
<script>
document.getElementById("dumb").innerHTML = "WORK";
</script>
</body>
</html>
What I would like is only to change the paragraph content, called dumb, to WORK. But when I call the page and it loads, my paragraph content keep null.
It's like my Ajax Call Request don't execute the Script Tag.
EDIT:
I have already solved my problem with this simple but genious solution:
function showUser() {
if(query_num == 2){
if (str == "") {
document.getElementById("txtHint1").innerHTML = "";
return;
} else {
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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint1").innerHTML = this.responseText;
eval(document.getElementById("runscript").innerHTML);
}
};
xmlhttp.open("GET","/npsmart/umts/action_plano/?q="+55555,true);
xmlhttp.send();
}
And in my getuser.php file:
<script type="text/javascript" id="runscript">
document.getElementById("dumb").innerHTML = "WORK";
</script>
I just putted the : eval(document.getElementById("runscript").innerHTML); in my function and then in the php file I called this script using this:
<script type="text/javascript" id="runscript">
So thanks everybody =)
Hope this post can help other people.
JS is not executed automatically from a script embedded in the response.
Since getuser.php is a PHP script there's no need to use JS and have the browser set the paragraph content. Use PHP itself:
<!DOCTYPE html>
<html>
<body>
<p id="dumb"><?php echo 'WORK'; /* or anything else */ ?></p>
</body>
</html>
Otherwise you'll have to use JS eval on the returned AJAX response to have the browser run the JS returned from your script. But I recommend against this.
I have a form that interacts with an API, I used a simple auto submit:
<script type="text/javascript">
window.setTimeout(function(){
document.getElementById('formSubmit').submit();
},1000*20);
</script>
and it worked great in the testing environment. We moved into a new environment and the setup of the hardware was slightly different, realized that didn't work and altered it. Now my auto submit isn't working. The API developers suggested I use watchdog instead so I applied a code according from #Drakes and modified it to interact with my application. This also did not work. I am a noob with Watchdog, and most things in the development world, did I skip a set up with watchdog that wasn't referenced in the previous question?
function watchdog() {
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5 - whatever, it doesn't hurt
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
// This is how you can discover a server-side change
if(xmlhttp.responseText !== "<?php echo $currentValue; ?>") {
document.location.reload(true); // Don't reuse cache
}
}
};
xmlhttp.open("POST","page.php",true);
xmlhttp.send();
}
// Call watchdog() every 20 seconds
setInterval(function(){ watchdog(); }, 20000);
I think you haven't posted the field values [Fields of the form]. The AJAX code you have used is checking if some value got changed or not every 20 second. But as much as I can understand you wanted to submit your form every 20 second. In that case the AJAX post code need some editing. May be the following thing can solve your problem. Here I am assuming your form having two fields and hence two values are getting submitted. If you have more then you have to modify it as per your requirement.
EDITED MY TESTCODE (This is tested)
The html code along with the AJAX script is as follows -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function watchdog(value1,value2) {
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5 - whatever, it doesn't hurt
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
// write any code as this block will be executed only after form succesfully submitted.
document.getElementById("showresponse").innerHTML = xmlhttp.responseText;
console.log(xmlhttp.responseText);// You can use this responseText as per your wish
}
}
xmlhttp.open("POST","process.php?value1="+value1+"&value2="+value2,true);
xmlhttp.send();
}
// Call watchdog() every 20 seconds
window.setInterval(function(){
var myForm = document.getElementById('formSubmit');
var value1 = myForm.elements["field1"].value;
var value2 = myForm.elements["field2"].value;
// thus store all required field values in variables ,
//here as instance I am assuming the form has two fields , hence posting two values
watchdog(value1,value2);
}, 20000);
function submitIt(){
var myForm = document.getElementById('formSubmit');
var value1 = myForm.elements["field1"].value;
var value2 = myForm.elements["field2"].value;
watchdog(value1,value2);
}
</script>
</head>
<body>
<form id="formSubmit">
<input type="text" name="field1" value="value1" />
<input type="text" name="field2" value="value2" />
<button type="button" onclick="submitIt();">Submit</button>
</form>
<div id="showresponse"></div>
</body>
</html>
The php code of process.php will be as follows -->
<?php
if(isset($_REQUEST['value1']) && isset($_REQUEST['value1']))
{
$value1 = $_REQUEST['value1'];
$value2 = $_REQUEST['value2'];
echo "Values are respectively : " .$value1." and ".$value2;
}
else
{
echo "Data not found";
}
?>
While testing the above code sample dont forget to keep both html and process.php files in same folder and then test it. The above shown "Run Code snippet" button will not show you any effect of the php code as it only runs html and javascript. So to test it properly you should keep it on some server - local or online .
I just started learning Ajax and I am stuck here.
I created 3 files
1. HTML File with code:
<html>
<head>
<script language="javascript" src="../AjaxLearning.js">
</script>
</head>
<body>
<div id="gethelp">
<h3>Text should Change</h3>
</div>
<input type='button' onclick='knowYourBrowser()'
value='Know Your Browser'>
<input type='button' onclick='loadXMLDoc()' value='Need Help?'>
</body>
</html>
A Text file placed at same directory where the html file is placed
text in the file is:
I am here to help you
A java script file placed at a location above the html file
function knowYourBrowser()
{
alert("I reached here");
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
alert ("IE7+, fox, chrome, netscape");
}
else
{
alert ("IE5, 6");
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
/* Read a text file from the directory*/
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('gethelp').innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","Help.txt",true);
xmlhttp.send(null);
}
but I am getting the below error message
SCRIPT5: Access is denied.
AjaxLearning.js, line 39 character 2
I dont know what I am missing here. Please point out the gaps.
Thanks in Advance
Himanshu
Hosted the file on xampp and tried to read the file from the server itself. It worked. Looks like IE has issues reading local resources.
I am trying to submit XML data using XMLHttpRequest to an external API which returns response as XML.
I have written the following code but it is not getting any response. Though I am getting 200 http response. In Firebug i get response tab empty while the XML tab shows me this error "XML Parsing Error: no element found Location: moz-nullprincipal"
Can anyone please point the problem, I am running it on my local machine. Below is my complete code.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
var data;
data='<?xml version="1.0" encoding="utf-8" ?>';
data=data+'<LeadImportDatagram>';
data=data+'<CompanyKey>302455</CompanyKey>';
data=data+'<LeadInfo>;'
data=data+'<Category>Gutters Drains</Category>';
data=data+'<Subcategory>Broken Gutter Repair</Subcategory>';
data=data+'<OfferName>First month free with one year contract</OfferName>';
data=data+'<Contact>Graham Carpenter</Contact>';
data=data+'<Company>Union Boxing Company</Company>';
data=data+'<Address>34 Railroad Rd.</Address>';
data=data+'<Address2></Address2>';
data=data+'<City>Newark</City>';
data=data+'<State>DE</State>';
data=data+'<Zip>34852</Zip>';
data=data+'<Country>United States</Country>';
data=data+'<Phone>800-842-2345</Phone>';
data=data+'<PhoneExt>113</PhoneExt>';
data=data+'<AltPhone>315-342-5468</AltPhone>';
data=data+'<AltPhoneExt></AltPhoneExt>';
data=data+'<Mobile>315-985-4984</Mobile>';
data=data+'<MobileExt></MobileExt>';
data=data+'<Fax>800-842-2346</Fax>';
data=data+'<FaxExt></FaxExt>';
data=data+'<EMail>graham#unionboxing.com</EMail>';
data=data+'<PotentialValue>900</PotentialValue>';
data=data+'<Comment>We are looking for a reliable and prompt pest control provider.</Comment>';
data=data+'<SourceCode>LEADFCTRY</SourceCode>';
data=data+'<SourceDescription>Lead Factory Lead Distributors</SourceDescription>';
data=data+'<SourceType>1</SourceType>';
data=data+'<SourceClassCode>AGGREGATOR</SourceClassCode>';
data=data+'<SourceClassDescription>Service Aggregators</SourceClassDescription>';
data=data+'<TimeRange>9am-5pm</TimeRange>';
data=data+'<SEligibleDate>10/1/08</SEligibleDate>';
data=data+'<EEligibleDate>10/31/08</EEligibleDate>';
data=data+'<LeadCost>27.00</LeadCost>';
data=data+'<ProviderID>9843</ProviderID>';
data=data+'<Questions>';
data=data+'<QuestionNode>';
data=data+'<Question>Have you previously had service done by Ace Pest Control?</Question>';
data=data+'<Answer>No</Answer>';
data=data+'</QuestionNode>';
data=data+'<QuestionNode>';
data=data+'<Question>Are you currently receiving service from any other pest control operator?</Question>';
data=data+'<Answer>No</Answer>';
data=data+'</QuestionNode>';
data=data+'<QuestionNode>';
data=data+'<Question>When was the first time you noticed your pest problem?</Question>';
data=data+'<Answer>We first noticed the problem in July 2006 when we saw damage to one of the walls in the basement.</Answer>';
data=data+'</QuestionNode>';
data=data+'</Questions>';
data=data+'</LeadInfo>';
data=data+'</LeadImportDatagram>';
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
//xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp=new ActiveXObject("MSXML2.ServerXMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
alert("Ready state: "+xmlhttp.readyState)
alert("Status: "+xmlhttp.status)
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseXML;
} else if (xmlhttp.status==404) {
alert("XML could not be found");
}
}
xmlhttp.open("POST","http://www80.mypestpac.com/xml/importlead.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//xmlhttp.setRequestHeader("Content-type","text/xml");
xmlhttp.send(data);
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
data='<?xml version="1.0" encoding="utf-8" ?>';
data=data+'<LeadImportDatagram>';
data=data+'<CompanyKey>302455</CompanyKey>';
data=data+'<LeadInfo>;'
Line 13 has to be
data=data+'<LeadInfo>';
instead of
data=data+'<LeadInfo>;'
That is causing the XML error you get.
Writing a basic XML file reader into an HTML page. I am having trouble reading from the XML file. Here's my set up: I have three text fields and a button. When the button is pressed, the request is put in to grab three pieces of XML and to populate the three text fields. However, I am running into trouble with the status of the request. I am getting the status code 0, instead of 200. According to my research (http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/282972), I think it has to do with cross domain blocking. I have tried putting the source XML both locally and on a server.
<html>
<head>
<script type="text/javascript">
function displayQuotes()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
//if (xmlhttp.readyState==4 && xmlhttp.status==200)
//{
document.getElementById("quote1").innerHTML=xmlhttp.status;
//}
}
xmlhttp.open("GET","http://filebox.vt.edu/users/yiuleung/project5/letter.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("quote1").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("quote2").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("quote3").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body>
<div id="quote1" style="margin:0;padding:0;position:absolute;left:65px;top:319px;width:250px;height:16px;text-align:left;z-index:2;">
<font style="font-size:13px" color="#000000" face="Arial">Quote 1</font></div>
<div id="quote2" style="margin:0;padding:0;position:absolute;left:65px;top:389px;width:250px;height:16px;text-align:left;z-index:3;">
<font style="font-size:13px" color="#000000" face="Arial">Quote 2</font></div>
<div id="quote3" style="margin:0;padding:0;position:absolute;left:65px;top:458px;width:250px;height:16px;text-align:left;z-index:4;">
<font style="font-size:13px" color="#000000" face="Arial">Quote 3</font></div>
<input type="button" id="shuffle_button" name="" value="Shuffle" onClick=displayQuotes() style="position:absolute;left:316px;top:228px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:10">
</body>
</html>
You use xmlhttp.open("GET","letter.xml",true); - it open XMLHttpRequest in async mode. But next two lines of your code expected to work in sync mode. You need to switch to sync mode: xmlhttp.open("GET","letter.xml",false); or (better) to modify code for work in async mode, as in example below:
function displayQuotes()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","letter.xml",true);
xmlhttp.onreadystatechange=function() {
console.info(xmlhttp.readyState,"|",xmlhttp.status,"|",xmlhttp.statusText); // for debugging only
if(xmlhttp.readyState===4&&xmlhttp.status===200) {
// HTTP OK
xmlDoc=xmlhttp.responseXML; // maybe var xmlDoc ???
document.getElementById("quote1").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("quote2").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("quote3").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
};
xmlhttp.send(null);
}
Using XMLHttpRequest in MDN: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest