Hi everybody!
I have a problem and I have no idea how to fix it!
I have a simple HTML page with a button:
<input type = "submit" value = "ok" onclick="f1()"/>
I also have a script on this page:
<script>
function f2()
{
var firstBtn = document.createElement("button");
firstBtn.appendChild(document.createTextNode("firstBtn"));
document.body.appendChild(firstBtn);
var xmlhttp = CreateRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var response = xmlhttp.responseText;
document.body.innerHTML += response;
}
}
firstBtn.onclick = function()
{
alert("inside f2 onclick");
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
}
function f3()
{
var secondBtn = document.createElement("button");
secondBtn.appendChild(document.createTextNode("secondBtn"));
document.body.appendChild(secondBtn);
var xmlhttp = CreateRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var response = xmlhttp.responseText;
document.body.innerHTML += response;
}
}
secondBtn.onclick = function()
{
alert("inside f3 onclick");
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
}
function f1()
{
f2();
f3();
}
function CreateRequest()
{
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// code for IE6, IE5
return xmlhttp;
}
</script>
So now, when I click one of the buttons (firstBtn or secondBtn), another one is not responding to the click event! Does anybody know why?
As #vishwanath said (see comments to this question), when I doing
document.body.innerHTML += response;
I'm destroying and recreating all the content of my page therefore I'm losing my events.
Related
Here I have a code that show restaurants beetween two cities, but there is a problem how to loop objects to insert in database...
http://jsbin.com/AlEVaCa/5
How here I can add my function loadXMLdoc();
function findPlaces(boxes,searchIndex) {
var request = {
bounds: boxes[searchIndex],
types: ["restaurant"]
};
// alert(request.bounds);
service.radarSearch(request, function (results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert("Request["+searchIndex+"] failed: "+status);
return;
}
// alert(results.length);
document.getElementById('side_bar').innerHTML += "bounds["+searchIndex+"] returns "+results.length+" results<br>"
for (var i = 0, result; result = results[i]; i++) {
var marker = createMarker(result);
}
searchIndex++;
if (searchIndex < boxes.length)
findPlaces(boxes,searchIndex);
});
}
LoadXMLdoc() :
function loadXMLDoc()
{
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;
}
}
data = "name="+place.name+"&place="+place.website;
xmlhttp.open("POST","file_to_store.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}
});
so How to integrate my function loadXMLdoc for script to insert data to database?
Sorry for my english...
How could I send the information that's in Ajax with POST? (info, info_1, info_2)
Now, I'm sending it with GET
edit: i try to do what people here said me to do, but when i call the POST variable in the page that i send for him the info, its show me eror... why?
the new code:
var xhr = new XMLHttpRequest();
xhr.open("POST",url,true);
xhr.onreadystatechange = function() {
if( this.readyState == 4 && this.status == 200) {
document.getElementById(name).innerHTML = this.responseText;
}
};
xhr.send("info="+str+"&info_1="+info_1+"&info_2="+info_2);
return false;
the first code:
var xhr = new XMLHttpRequest();
xhr.open("GET",url+"?info="+str+"&info_1="+info_1+"&info_2="+info_2,true);
xhr.onreadystatechange = function() {
if( this.readyState == 4 && this.status == 200) {
document.getElementById(name).innerHTML = this.responseText;
}
};
xhr.send();
return false;
Change "GET" to "POST" and put the data (in the same form as in the query string, but without the ? prefix) as the argument to the send() method instead of in the URL.
I used this code. It worked
function getXMLHttpRequestObject()
{
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
function callme1(){
var http = new getXMLHttpRequestObject();
var url = "yourpage.php";
var reply;
var conf=true;
var parameters = "info="+str+"&info_1="+info_1+"&info_2="+info_2;
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters .length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if(http.readyState == 4) {
alert(http.responseText);
}
}
http.send(parameters);
}
Just call function callme1() and it will post the request to yourpage.php
This is how to send Post request in ajax
var str="hrl";// initialize str
var info_1="hi"; // initialize info_1
var info_2="hi"; // initialize info_2
var url="index.jsp"; // initialize url
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("POST",url,true);// initialize url
xmlhttp.send("info="+ str +"&info_1="+ info_1 +"&info_2="+info_2+"");
Good morning everyone, i have this code, took from w3schools
var xmlhttp
function showCustomer(str,str2)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="/Script/ajaxdb/aaaaa.php";
url=url+"?id="+str;
url=url+"&id2="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4) {
document.getElementById("TXTHINT").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
I would like to change the name of the ID into
document.getElementById("TXTHINT").innerHTML=xmlhttp.responseText;
I would like to have something like
document.getElementById("TXTHINT1").innerHTML=xmlhttp.responseText;
document.getElementById("TXTHINT2").innerHTML=xmlhttp.responseText;
document.getElementById("TXTHINT3").innerHTML=xmlhttp.responseText;
and so on..
i tried
document.getElementById("TXTHINT"+str).innerHTML=xmlhttp.responseText;
cause i need the value of the variable str, to have the id name as TXTHINT1, TXTHINT2, TXTHINT3 and so on....
but id doesn't work.
Can someone help me ?
I would prefer to set a class attribut for all elements you want to change.
For example:
<div id="TXTHINT" class="txthints"></div>
<div id="TXTHINT1" class="txthints"></div>
Now you could easily iterate through all elements with class atrribut "txthints" and set the content.
var divsToChange = document.getElementsByClassName('txthints');
var newContent = xmlhttp.responseText;
for(i=0; i < divsToChange.length; ++i ) {
divsToChange[i].innerHTML = newContent;
}
You Should specify a global var to access it in other functions.
var xmlhttp
var str_global;
function showCustomer(str,str2)
{
str_global=str;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="/Script/ajaxdb/aaaaa.php";
url=url+"?id="+str;
url=url+"&id2="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4) {
document.getElementById("TXTHINT"+str_global).innerHTML=xmlhttp.responseText;
}
}
Try this
xmlHttp.onreadystatechange=function () {
stageChanged(str, str2);
};
xmlHttp.open("GET", handlingURL, true);
xmlHttp.send(null); }
function stageChanged(str, str2) {
if(xmlHttp.readyState==4)
{
document.getElementById("TXTHINT"+str).innerHTML=xmlhttp.responseText;
//do something with the response
} }
STR is not defined as a global parameter so it will not be able to accessible in the response function, you need to pass str as a parameter.
Just beginner in php, I want to call php method using AJAX. I tried every thing but don't know what error is. Not getting any response from object xmlhttp.
Heres my java script code :
function loadData(){
var mID=ddItems;
var method=2;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
if (xmlhttp.readyState == 4 || xmlhttp.readyState == 0) {
xmlhttp.open("GET", "../code/GetItemsInDD.class.php?id=" + mID + "&method=" + method, true); **// is this statement correct**
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) **//conditin is false,**
{
document.getElementById("ddItems").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send();
}
}
My js file is on "projectname/javascript/script.js" and my php file is in "projectname/code/GetItemsInDD.class.php" dir.
Why don't you use jQuery for making AJAX requests? Its as simple as this, include jQuery in your page
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
and JS code,
$.ajax({
type: 'GET',
url: '../code/GetItemsInDD.class.php?id=" + mID + "&method=" + method',
success: function (data) {
document.getElementById("ddItems").innerHTML = data;
}
});
This way, you don't need to check for the readyState and status thing
jQuery follows object oriented approach for declaring XMLHttpRequest objects, so you won't have to worry about creating multiple objects for making more than one AJAX requests.
function loadData(){
var xmlhttp;
var mID=ddItems;
var method=2;
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("ddItems").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "../code/GetItemsInDD.class.php?id=" + mID + "&method=" + method, true);
xmlhttp.send();
}
I have made 2 desired changes to your code, try running it now. Make sure the URL is correct.
function loadData()
{
var mID=ddItems;
var method=2;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else //For some versions of IE
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) **//conditin is false,**
{
document.getElementById("ddItems").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "../code/GetItemsInDD.class.php?id=" + mID + "&method=" + method, true); **// is this statement correct**
xmlhttp.send();
}
}
Change 1 : You may be running the code in an older version of IE, where ActiveXObject is used.
Change 2 : The open() method should not be called if the readyState changes ( as you have written it within the IF block), readyState changes only after the ajax call is initialized by the open() method and then send by the send() method.
Hi all I am new in ajax and I am trying to get data from php code this is my ajax code:
function blodvotingview(contentid)
{
var xmlhttp;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="index.php";
url=url+"?hp=1";
url=url+"&m=blogenvoting";
url=url+"&contentid="+contentid;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
And this is my html code {entry_id} is numeric parameter:
view
<p>Suggestions: <span id="txtHint"></span></p>
And this is php code I want to echo:
<?php
showcomment()
function showcomment()
{
echo "yes";
}
?>
But it doesn't work, please help me.
If you consider use jQuery and jquery.serialize plugin you can easy do this by this example:
$.post('URL', $('#form_id').serialize(), function(r) {
console.log(r);
});
or
$.post('URL', $('#form_id').serialize(), function(r) {
console.log(r);
},'json'); // to parse response as JSON
or
$.get('URL', function(r) {
console.log(r);
},'json'); // to parse response as JSON
Try this
function blodvotingview(contentid)
{
var xmlhttp;
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","index.php?hp=1q="+str,true);
xmlhttp.send();
}
Should work fine,
Wezy