I have an AJAX script which should trigger a loading image once executed and then hide it once I get the result from the web-service, however the image is now showing.
My code is as below:
<script type="text/javascript">
function get_Code_Results() {
document.getElementById("loader").innerHTML = "<img src=\'loading.gif\' />";
var url = document.location;
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = processRequest;
// req.open("GET", url, true);
// req.send(null);
req.open("POST",url,true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("isbns="+document.getElementById("Code").value);
function processRequest() {
if (req.readyState == 4 && document.getElementById("1").checked == true) {
document.getElementById("results").value = "myfirsturl.com" + req.responseText;
}
else if (req.readyState == 4 && document.getElementById("2").checked == true) {
document.getElementById("results").value = "myurl.com" + req.responseText;
}
}
}
</script>
and I have a position where I want the loader to be displayed:
<div id="loader"><img src="loading.gif" style="display:none;" /></div>
Where do I have the mistake in my code? Some advice would be greatly appreciated!
<div id="loader"><img src="loading.gif" style="display:none;" /></div>
You need to change the style="display:none;". I suggest you write the following code instead :
<div id="loader" style="display:none;"><img src="loading.gif" /></div>
Then when needed :
$('#loader').show(); // To show the laoding icon
$('#loader').hide(); // To hide it
Your functions are nested. I guess you pretend to write somethin like:
function get_ISBN_Results() {
document.getElementById("loader").innerHTML = "<img src=\'loading.gif\' />";
var url = document.location;
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = processRequest;
// req.open("GET", url, true);
// req.send(null);
req.open("POST",url,true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("isbns="+document.getElementById("isbns").value);
}
function processRequest() {
if (req.readyState == 4 && document.getElementById("book").checked == true) {
document.getElementById("results").value = "myfirsturl.com" + req.responseText;
}
else if (req.readyState == 4 && document.getElementById("magazine").checked == true) {
document.getElementById("results").value = "myurl.com" + req.responseText;
}
}
Related
I'm trying to call this JS function inside a php page (footer.php), but it's not working. I've tried multiple options, like placing the script inside a php echo, but that didn't work either. I'm stuck here. Any suggestions to call it properly?
<?php
/**
* Header for our theme
*/
electro_get_footer();
?>
<div class="kiyoh">
<span id="cijfer" class="review-cijfer"></span>
<span class="review-cijfer-after"> / 10</span>
<a href="https://kiyoh.nl/lumenlab">
<span id="beoordelingen" class="review-beoordelingen"></span>
<span class="review-beoordelingen-after"> beoordelingen</span>
</a>
</div>
<script type="text/javascript">
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET",
"https://www.kiyoh.nl/xml/recent_company_reviews.xml? connectorcode=xws9TE3TQSX7t7Hrj9xFAbYwhraBaenGFHYWt9jKyx4CRV5vFW&company
_id=16907&reviewcount=all&showextraquestions=1", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("cijfer").innerHTML =
xmlDoc.getElementsByTagName("total_score")
[0].childNodes[0].nodeValue;
document.getElementById("beoordelingen").innerHTML =
xmlDoc.getElementsByTagName("total_reviews")
[0].childNodes[0].nodeValue;
}
</script>
I have change the url in the xhttp.open() function and it work.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
} else {
console.log("readyState: " + this.readyState);
console.log("Status: " + this.status);
}
};
xhttp.open("GET", "https://www.kiyoh.nl/xml/recent_company_reviews.xml?connectorcode=xws9TE3TQSX7t7Hrj9xFAbYwhraBaenGFHYWt9jKyx4CRV5vFW&company_id=16907&reviewcount=all&showextraquestions=1", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("cijfer").innerHTML = xmlDoc.getElementsByTagName("total_score") [0].childNodes[0].nodeValue;
document.getElementById("beoordelingen").innerHTML = xmlDoc.getElementsByTagName("total_reviews") [0].childNodes[0].nodeValue;
}
I have a parsed xml-file that shows twice the same element. Now I want a button that hides one of them with an onclick-statement. Does anyone know how to do this?
<!DOCTYPE html>
<html>
<body>
<p id="dasa"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
</script>
<button onclick="remove()">remove</button>
</body>
</html>
x is undefined in your remove function.
function remove() {
x[0].removeAttribute('category');
}
You want something like this:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
var xmlDoc;
var x;
function myFunction(xml) {
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
This will make x into a global var set by myfunction.
I have something I cannot understand how to do it in AJAX. I have a sidebar and a div "content" in my page. The sidebar is made of button and onclick it call the classical function:
function loadDoc(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
It load the "url" of the button in the content. Well, at this point everything is ok. Now one of this url, say "TheUrl", is a document that contain title and so on, and a div "list" and in this list I would like to load an XML file. I have the function
function loadXML() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "file.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<ul>";
var x = xmlDoc.getElementsByTagName("ITEM");
for (i = 0; i <x.length; i++) {
table += "<li>" +
x[i].getElementsByTagName("ELEMENT")[0].childNodes[0].nodeValue +
"</li>"
};
table += "</ul>";
document.getElementById("list").innerHTML = table;
}
But I have no idea how to load the function loadXML() after loadDoc("TheUrl") so that the Xml data appears in the div list that was create in the div content... I am clear ?? :D
I would like something like that in my sidebar:
<ul>
<li><button type="button" onclick=loadDoc("OtherUrl.html")>OtherUrl</button></li>
<li><button type="button" onclick=loadDoc("TheUrl.html").done(loadXML())>TheUrl</button></li>
</ul>
Thanks you in advance for your kind help.
You can just call the loadXML function in the onreadystaechange event of the first AJAX call like so:
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content").innerHTML = xhttp.responseText;
// call the other function
loadXML();
}
Here is my code in JavaScript that is calling check.php file for checking online existence of user in the database
<html>
<input type = "text" name="txt1" id="user" onKeyUp="check_username(this.value)"> <br>
<script>
var xmlhttp = false;
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
function check_username(str) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var arr = xmlhttp.responseText.split("^");
document.getElementById("user").value = arr[1];
if (arr[0] == 1) {
</script>
<span style="color:blue">Username exists</span>
<script>
} else {
</script>
<span style="color:green">user available</span>
<script>
}
}
}
xmlhttp.open("GET", "check.php?txt1="+str, true);
xmlhttp.send();
}
</script>
</html>
And below is check.php file
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("check");
$username = ($_REQUEST['txt1']);
$a = 0;
if (checkexistence($username)) {
$a = 1;
echo $a."^".$username;
} else {
$a = 0;
echo $a."^".$username;
}
function checkexistence($username) {
$check = mysql_query("select uname from t1");
while ($row = mysql_fetch_array($check)) {
if (strcmp($username, $row['uname']) == 0) {
return true;
}
}
return false;
}
?>
It works correctly when I use alert (of course, we cannot use alert as it will become too irritating) but when I am using span tag it do not works correctly giving only
Username exists user available
as output instead of checking after each character we enter in the textfield..
How can I correct it??
Don't close and open the scripts in between of if else statements.
You can achieve this using jQuery library in easily. Download the jQuery library from here. You can include this jQuery files in bottom of the page, like this
<script src="js/jquery.1.11.0.js" type="text/javascript"></script>
Let's do that in different way of manner. Use jQuery method of after() to insert a content in between any where.
And try this code,
<input type = "text" name="txt1" id="user" onKeyUp="check_username(this.value)"> <br>
<span id="exist" style='color:blue'></span>
<span id="avail" style='color:green'></span>
<script>
var xmlhttp = false;
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
function check_username(str) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var arr = xmlhttp.responseText.split("^");
document.getElementById("user").value = arr[1];
if (arr[0] == 1) {
$("#avail").html();
$("#exist").html('Username exists');
} else {
$("#exist").html();
$("#avail").html('User available');
}
}
}
xmlhttp.open("GET", "check.php?txt1="+str, true);
xmlhttp.send();
}
</script>
Iam new to Phonegap, Iam not able to get the Response while Parsing the XML Url.what i have tried is,
function initLoginPage() {
var xmlhttp = new XMLHttpRequest();
var urlString = "url/app/api.php?fn=employees";
xmlhttp.onreadystatechange = processData;
xmlhttp.open("GET", urlString, true);
xmlhttp.send();
}
function processData() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("result").innerHTML=xmlhttp.responseText;
} else{document.getElementById().innerHTML = "<b>Please Wait..</b>";}
}
I have called initLoginPage function when device is Ready.I have to show the Response in listView. iam using JQuery Mobile.The Response of Url is
<?xml version="1.0" encoding="UTF-8" ?>
<details>
<responsecode>200</responsecode>
<Employee>
<name>name</name>
<Fathername>fathename</Fathername>
<Address>address</Address>
<Number>12342456</Number>
<Enumber>4324421341234</Enumber>
<OfficeMail>test#gmail.com</OfficeMail>
<PersonalMail>test#gmail.com</PersonalMail>
<EmployeeID>1</EmployeeID>
<DOB>21-06-1991</DOB>
<DOJ>05-03-2013</DOJ>
<PanNumber>123456</PanNumber>
<image>./images/1380372683.png</image>
</Employee>
</details>
Yo have do mistake
var urlString = url+"/app/api.php?fn=employees";
The variable xmlhttp is only defined in the scope of the initLoginPage function, so it isn't defined in processData.
There are two ways to solve your Problem. You use this instead of xmlhttp in processData:
function initLoginPage() {
var xmlhttp = new XMLHttpRequest();
var urlString = "url/app/api.php?fn=employees";
xmlhttp.onreadystatechange = processData;
xmlhttp.open("GET", urlString, true);
xmlhttp.send();
}
function processData() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
else {
document.getElementById().innerHTML = "<b>Please Wait..</b>";}
}
}
Or pass processData as an anonymous function directly to xmlhttp.onreadystatechange:
function initLoginPage() {
var xmlhttp = new XMLHttpRequest();
var urlString = "url/app/api.php?fn=employees";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
else {
document.getElementById().innerHTML = "<b>Please Wait..</b>";}
}
}
xmlhttp.open("GET", urlString, true);
xmlhttp.send();
}