<script type="text/javascript">
function centerItem(id,size)
{
var pad = (window.innerWidth - size)/2;
document.getElementById(id).style.marginLeft = pad+"px";
document.getElementById(id).style.marginRight = pad+"px";
}
function login()
{
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
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('box').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}
</script>
That is in my <head> section, and I'm calling it using this.
<script type="text/javascript">centerItem('login',210);</script>
However, I'm getting an error saying "Uncaught ReferenceError: centerItem is not defined
(anonymous function)"
Any thoughts?
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
Should really be:
document.getElementById('box').innerHTML="<img src=\"img/pleasewait.gif\" />"
you need to escape the double quotes when creating the image tag.
And you should cache your selected elements. The result would be something like:
function centerItem(id, size) {
var pad = (window.innerWidth - size)/2,
elem = document.getElementById(id);
elem.style.marginLeft = pad+"px";
elem.style.marginRight = pad+"px";
}
function login() {
var xmlhttp;
var box = document.getElementById('box');
box.innerHTML="<img src=\"img/pleasewait.gif\" />";
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) {
box.innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}
Related
I want to change the value of str used in ajax (str is the string inputted in the html form) part by giving it a variable value, so that by clicking on a button that changes the variable value, the loaded data row in mySQL changes. But it doesn't work. What can I do for this ?
(the ajax works, it's just that the button click doesn't change anything)
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script>
var Pokemon_ID = 0
function changePokemon(str) {
document.getElementById("right-btn").onclick = function() {
Pokemon_ID++;
str = Pokemon_ID
}
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","get_id.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
First name: <input type="text" onkeyup="changePokemon(this.value)">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon(str)"></a>
</body>
</html>
Just try this out and confirm if it works. I had tried to correct the code according to my understanding of your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function changePokemon() {
let str = document.getElementById("inpStr").value;
let tempStr=parseInt(str)+1;
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","get_id.php?q="+tempStr,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
First name: <input type="text" id="inpStr" onkeyup="changePokemon()">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon()"></a>
</body>
</html>
Change your HTML codes to
<form>
First name:
<input type="text">
</form>
<div id="txtHint"></div>
<a id="right-btn" onclick="changePokemon(++ Pokemon_ID)">Go</a>
I dont know what does your changePokeMon() function do, but change your script to
var Pokemon_ID = 0
function changePokemon(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
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("txtHint").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "get_id.php?q=" + str, true);
xmlhttp.send();
}
i want to send a value to multiple url's in php using ajax.. in the example below, i want to send the request to getuser.php and getuser2.php and want to return the response to element id TXTHINT and TXTHINT2 .. the below code does not work .. where am i going wrong.?
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?city_main="+str,true);
xmlhttp.send();
function showUser2(str) {
if (str=="") {
document.getElementById("txtHint2").innerHTML="";
return;
}
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("txtHint2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser2.php?city_main="+str,true);
xmlhttp.send();
}
}
Use this instead of you code (yours is really ugly and the nesting is weird):
function fillHint(hintID, url, str) {
if (str=="") {
document.getElementById(hintID).innerHTML="";
return;
}
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(hintID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url+".php?city_main="+str,true);
xmlhttp.send();
}
function showUser(str) {
fillHint("txtHint", "getuser", str);
}
function showUser2(str) {
fillHint("txtHint2", "getuser2", str);
}
function someMasterCallFn() {
if (...) { // if first should be called
showUser(theString);
} else if (...) { // if second should be called
showUser2(theString);
}
}
And if you want to call both functions you have two possibilities:
function showUser(str) {
fillHint("txtHint", "getuser", str);
showUser2(str);
}
function showUser2(str) {
fillHint("txtHint2", "getuser2", str);
}
or
function someMasterCallFn() {
showUser(theString);
showUser2(theString);
}
I need to hit a url by either means and after the response I just want to generate an xml showing done.
Here is the code that is trying to generate the XML and before this all the JS is placed:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="myDiv" style="display:none;"></div>
<script type="text/javascript">
<?php echo "var link = '".$url."';"; ?>
loadXMLDoc(link);
function loadXMLDoc(link)
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",link,true);
xmlhttp.send();
}
</script>
$data = "";
header('Content-type: text/xml');
$data="<parameters>";
$data .= "<result>Product Added To The Cart</result>";
$data .= "</parameters>";
echo $data;
Here is the output I am getting
This page contains the following errors:
error on line 5 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.
Here is the source of the output I am getting:
<script type="text/javascript">
var link = 'http://obaoja.com/checkout/cart/add/product/7027/qty/1/'; loadXMLDoc(link);
function loadXMLDoc(link)
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",link,true);
xmlhttp.send();
}
</script>
<parameters><result>Product Added To The Cart</result></parameters>
I just need <parameters><result>Product Added To The Cart</result></parameters> in XML format.
I have 2 functions that I would like to call from one dropdown menu. It seems I can only get one to work, but not both. Looking for some help sorting this out. Here is the code, thank you.
Function 1
<script type="text/javascript">
function getCredit(str)
{
if (str=="")
{
document.getElementById("credit").innerHTML="";
return;
}
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("credit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcredit.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is function 2.
<script type="text/javascript">
function getTerms(str)
{
if (str=="")
{
document.getElementById("terms").innerHTML="";
return;
}
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("terms").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","customertermsdropdownquery.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is the form dropdown that calls them.
<td><select name="company" onchange="getTerms(this.value);getCredit(this.value);">
<?php while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>
I use div in the form to display php.
<div id="terms"></div>
and
<div id="credit"></div>
I can get either one to work by itself, just not together. Thanks for your help.
Totally understandable that you want to keep them separated. How about create a new function like this.
function getTermsAndCredits(value) {
getTerms(value);
getCredits(value);
}
Then in the onchange event call it like this
<td><select name="company" onchange="getTermsAndCredits(this.value);">
Here is a fiddle which should give you a better idea. I don't believe it's necessary to call the onload functions as you have in your code currently.
I am getting a childnodes undefined error when executing the below code. What am I doing wrong? Also, is there a better way of making this happen?
var xmlhttp;
if (window.XMLHttpRequest)
{// code fop=new XMLHr IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("myDiv").innerHTML += xmlhttp.responseText;
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(xmlhttp.responseText,"text/xml");
var x=xmlDoc.getElementsByTagName("STATUS");
if(x[0].childNodes[0].wholeText == "notLoggedIn")
{
window.location='login.html';
}
Last four lines of code must become as follows:
try {
if(x[0].childNodes[0].wholeText == "notLoggedIn") {
window.location='login.html';
}
} catch(e) {
// handle your error here
}