Sending with data Ajax - javascript

i just created ajax script which sends data to php file but, something is wrong coz when i send javascript var variable "browserLang ", i get an error that not defined. Here is my javascript:
function SetLang()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var browserLang = navigator.language || navigator.userLanguage;
xmlhttp.open("POST","style/wps-light/datalife3.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("BrowserLang=" + encodeURIComponent(userLang));
}
So what am i doing wrong?

you define browserLang but send userLang
function SetLang()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var browserLang = navigator.language || navigator.userLanguage;
xmlhttp.open("POST","style/wps-light/datalife3.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("BrowserLang=" + encodeURIComponent(browserLang));
}

Related

document.getElementById innerHTML Not working in loop

Hy ! I am trying to put the result of an XMLHttpRequest inside a div using document.getElementById innerHTML without success.
In the head :
XMLHttpRequest is fine (I tried document.write and it show my results).
Here is my code :
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://www.mywebsite.com/my.php",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
for(var i=0; i < xmlDoc.getElementsByTagName("place").length; i++) {
name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
document.getElementById('name').innerHTML += name +"<br>";
}
In the body :
<div id="name"></div>
NB :
my.php generate xml file and replacing the line document.getElementById... by document.write(name + "br tag"); is working fine.
Thanks in advance for help.
Ok, I found my mistakes and here is the working code :
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) {
xmlDoc=xmlhttp.responseXML;
for(var i=0; i < xmlDoc.getElementsByTagName("place").length; i++) {
var xmlName = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
document.getElementById('name').innerHTML += xmlName +"<br>"
}
}
}
xmlhttp.open("GET","http://mywebsite.com/xmlcreate.php",true);
xmlhttp.send();
Thanks for helps !

Combine AJAX request to load new page with variables

I currently have three stored JS variables (wordChoiceOne, wordChoiceTwo, wordChoiceThree). Now that I have these stored, I want to run a function called saveUsername(). This function should do the following:
Take the jQuery variables above and pass them into PHP and load the file register-form.php into the div register-login-form
So I currently have the following AJAX request, but this only handles the reloading of the form. I've never combined jQuery with PHP before so how can I add the part in this to pass the three variables?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
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("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php",true);
xmlhttp.send();
}
What do I add to this to pass the three variables and convert them to PHP vars like with a $ sign?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
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("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php?one="+wordChoiceOne+"&two="+wordChoiceTwo+"&three="+wordChoiceThree,true);
xmlhttp.send();
}
Then PHP side, use $_GET['one'], $_GET['two'] and $_GET['three']

How to read the page content into a string in Javascript?

I would like to retrieve the content of a link (e.g. http://pastebin.ca/raw/2314500 which is a binary image) in an AJAX request. How to read the binary string in Javascript? The following code doesn't work:
function httpGet(theUrl)
{
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)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false );
xmlhttp.send();
}
alert(httpGet("http://pastebin.ca/raw/2314500"))

Display all nodes inside a tagname with JavaScript

I'm trying to use the loadXMLDoc() JavaScript function to load data from an XML document and show it on my page's DIV when a button is clicked. So far I can't get any content in my DIV, I want to load all elements within an specific tagname.
Here's the XML:
<?xml version="1.0" encoding="UTF-8"?>
<Fruits>
<Cell>Apples</Cell>
<Cell>Bananas</Cell>
<Cell>Strawberries</Cell>
</Fruits>
<Vegetables>
<Cell>Lettuce</Cell>
<Cell>Tomatoes</Cell>
<Cell>Carrots</Cell>
</Vegetables>
Here's the JavaScript:
function fruits()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits");
}
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}
function vegetables()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables");
}
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}
And here's the HTML:
<button type="button" onclick="fruits()">Fruits</button>
<button type="button" onclick="vegetables()">Vegetables</button>
<div id="food">Please select your favorite</div>
Your function fruits() is not closed properly, and your function vegetables() has ended up inside function fruits(),
the same goes for defining the function xmlhttp.onreadystatechange=function()
so these functions will not even be available until fruits() is called.
Your code should look like this:
function fruits()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits");
}
}
//something went wrong here : this code ended up in the function that was to be called when xmlhttp was done with its GET operation.
//consequently it was never called
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
} // <-- this here bracket was missing
function vegetables()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables");
}
}
//the same thing happened here
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}

ajax show 2 data request with onclick

hello i am still new on ajax i wanted show 2 data in different place.
here the code
<li onclick="showPost(this.value);" value="*digit*" >lala</li>
the javascript
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function showPost(hal)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("gallekanan").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example.php?pal="+hal,true);
xmlhttp.send();
showJudul(hal);
}
function showJudul(hal)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("eventjudul").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example1.php?pal="+hal,true);
xmlhttp.send();
}
</script>
when i running the code just the showJudul running and the showPost is Aborted.
Move showJudul(hal); just after document.getElementById("gallekanan").innerHTML=xmlhttp.responseText;
Try having individual control of each function rather than calling them one within another one.. ie.. have it as
<li onclick="showPost(this.value); showJudul(this.value);" value="*digit*" >lala</li>
and
<script>
function showPost(hal)
{
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("gallekanan").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example.php?pal="+hal,true);
xmlhttp.send();
}
function showJudul(hal)
{
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("eventjudul").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example1.php?pal="+hal,true);
xmlhttp.send();
}
</script>
Also try using try{}catch{} where you try to initialize xmlhttp - the function might give error if there is no such object available...

Categories