This is what I am trying. I am trying to call a function trial with retrieves a value from a PHP for values 1 to 29 and display the result in text input boxes named T1, T2...T29.
function calculate() {
for (var i = 1; i < 30; i++) {
trial(i);
}
}
function trial(i) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('T' + i).value = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "MANAGER/manager.php?rownum=" + i, true);
xmlhttp.send();
return;
}
It is not working. Could you please suggest a solution?
The issue is that you are declaring the variable xmlhttp globally, so you are overwriting the callbacks and everything on each iteration. Use the var keyword to make it local.
Related
I successfully added a video to a playlist but it is added multiple times (sometimes twice and sometimes more). Can anybody help?
$resourceId = new Google_Service_YouTube_ResourceId();
$resourceId->setVideoId($videoID);
$resourceId->setKind('youtube#video');
$playlistItemSnippet = new Google_Service_YouTube_PlaylistItemSnippet();
$playlistItemSnippet->setPlaylistId($playlistId);
$playlistItemSnippet->setResourceId($resourceId);
$playlistItem = new Google_Service_YouTube_PlaylistItem();
$playlistItem->setSnippet($playlistItemSnippet);
$playlistItemResponse = $youtube->playlistItems->insert('snippet,contentDetails', $playlistItem, array());
Solved it myself and I'm pretty proud of it :)
I realised that the ajax was triggering the above php script on mouseover. So every time I hovered away from the checkbox element the php script triggered multiple times.
I changed the mouseover code with the following:
$(function() {
$('input.Chilltrap').on('click', function(e) {
var chilltrap = this.id;
if( $("input[name=" + chilltrap + "]").prop('checked') ) {
checkboxstatusCt = "Yes";
}
else {
checkboxstatusCt = "No";
}
var url = "url.php";
var params = "c="+checkboxstatusCt+"&s="+chilltrap;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$("#error").html(xmlhttp.responseText);
$("#error"). fadeIn('fast');
setTimeout(function(){
$("#error"). fadeOut('slow');
},2000);
}
};
xmlhttp.open("GET", url+"?"+params,true);
xmlhttp.send();
});
});
Quick notes. I am not using jQuery so don't suggest it.
When pressing the button which has the onclick="ajaxfunction();" i get an alert saying "Error during AJAX call. Please try again " and then I get the alert saying success, twice :S ... Why is this happening?
I don't understand why this is happening, as it calls the error, and then goes to the other part of the if statement...
Thanks in advance!
<script>
function getXMLObject() //XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
}
catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
}
return xmlHttp; // Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
var url="insertProduct.php";
function ajaxFunction() {
var getdate = new Date(); //Used to prevent caching during ajax call
if(xmlhttp) {
var name = document.getElementById("name");
var code = document.getElementById("code");
xmlhttp.open("POST",url,true); //calling insertProduct.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("name=" + encodeURIComponent(name.value) + "&code=" + encodeURIComponent(code.value)); //Posting to PHP File
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4 || xmlhttp.readyState=="complete") {
alert("Success");
document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again " + xmlhttp.status);
}
}
</script>
After finishing the task you can call return;
Likes below.
function handleServerResponse() {
if (xmlhttp.readyState == 4 || xmlhttp.readyState=="complete") {
alert("Success");
document.getElementById("message").innerHTML=xmlhttp.responseText;
return;
}
else {
alert("Error during AJAX call. Please try again " + xmlhttp.status);
return;
}
}
I hope this will help to you.
I am using an AJAX script to post data from a form and return the processed data from a php file. The script is below.
function loadXmlDoc(hashtag){
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("ajaxify").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo_ajax3.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("hashtag=" + hashtag);
}
However I want to auto update the results. how would I get this to auto update so it checks for more data? Or what would be the best way?
There seems to be nothing about getting AJAX forms to auto refresh from what I've seen so any help would be greatly apprecaited
Try this way. It should auto-update the result every 10 seconds.
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("ajaxify").innerHTML = xmlhttp.responseText;
}
}
function loadXmlDoc(hashtag){
var repeat = function () {
xmlhttp.open("POST", "demo_ajax3.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("hashtag=" + hashtag);
};
repeat.hashtag = hashtag;
setInterval(function() { repeat(); },10000);
}
I am trying to fill in a form using Javascript/ajax/php but the problem is that my function only fills in one of the needed forms and stops even tho I have gotten the second response from the server.
Code:
The function that starts filling stuff
function luePankkiviivakoodi(str) {
if (str==null) { //are we NOT injecting variables directly into the code, if not - Prompt for the barcode, and set the variable
var str = prompt("Valmis vastaanottamaan", "");
}
if (str==null) { //someone pressed abort on the prompt, we return
return;
}
newstr = str.split(' ').join(''); // remove spaces
if (str=="") { //is the string empty? -> return
return;
}
if (window.XMLHttpRequest) { //AJAX code
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
eval(xmlhttp.responseText);
//we set some fields, no problem
document.getElementById('P_VII').value = viite;
document.getElementById('IBAN').value = saajatili;
document.getElementById('laskun_summa').value = summa;
document.getElementById('eräpäivä').value = eräpäivä;
//trigger other functions
getKassasumma(summa); //AJAX for accesing the database and calculating the sale price
DevideIntoCells(); //AJAX for accessing the database and dividing a sum into different cells
validateSumma(); //Validates the sum, and tells the user if it's OK
}
}
xmlhttp.open("GET","dataminer.php?question=pankkiviivakoodi&q="+newstr,true);//open AJAX connecttion
xmlhttp.send();//send stuff by AJAX
}
getKassasumma:
function getKassasumma(str) {
if (str=="") {
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
eval(xmlhttp.responseText);
}
}
kale = document.getElementById("TOS_K_ale").value;
xmlhttp.open("GET","dataminer.php?question=kassasumma&q="+str+"&kale="+kale.replace("%", "p")+"&nro="+document.getElementById("S_NRO").value,true);
xmlhttp.send();
}
DevideIntoCells:
function DevideIntoCells() {
str = document.getElementById('tiliöintitapa').value;
if (str==null) {
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
document.getElementById("spinwheel3").style.visibility = "visible";
}
xmlhttp.onreadystatechange=function() {
//alert('OK! val= '+xmlhttp.readyState);
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//alert('OK!');
eval(xmlhttp.responseText);
//alert('OK2!');
document.getElementById("spinwheel3").style.visibility = "hidden";
//alert('OK3!');
calculateSumma();
}
}
xmlhttp.open("GET","dataminer.php?question=percentages&q="+str+"&nro="+document.getElementById('S_NRO').value,true);
xmlhttp.send();
}
validateSumma (just some math):
function validateSumma() {
float = document.getElementById('summabox').value;
float = float.replace(",",".");
summa = parseFloat(float);
if (summa < 0) {
summa = 0
};
kassasummaunp = document.getElementById('laskun_summa').value;
kassasummafloat = kassasummaunp.replace(",",".");
kassasumma = parseFloat(kassasummafloat);
if (kassasumma < 0) {
kassasumma = 0
};
if (kassasumma == 0 || summa == 0) {
prosentti = "0%";
}
else {
prosentti = summa / kassasumma * 100;
prosentti = Math.round(prosentti*Math.pow(10,2))/Math.pow(10,2);
prosentti = prosentti+"%";
};
if (prosentti == "100%") {
is100 = 1;
}else {
is100 = 0;
}
document.getElementById('prosentti').innerHTML = prosentti;
if (is100 == 1) {
document.getElementById('prosentti').setAttribute("style", "color:green");
} else {
document.getElementById('prosentti').setAttribute("style", "color:red");
}
puuttuvaEuro();
}
The problem code here is getKassasumma(summa); and DevideIntoCells();. I disable one of them, and the other one works, I enable both of them, DevideIntoCells stops somewhere before document.getElementById("spinwheel3").style.visibility = "hidden";, probably at the eval(response) because getKassasumma already finished the ajax request and killed this one. same the other way around.
AJAX answers: DevideIntoCells:
var KP_osuus = parseFloat('40');
laskunsumma = parseFloat(document.getElementById('laskun_summa').value);
onepercent = laskunsumma/100;
newvalue = onepercent*KP_osuus;
document.getElementById('box1.5').value = newvalue;
var KP_osuus = parseFloat('60');
laskunsumma = parseFloat(document.getElementById('laskun_summa').value);
onepercent = laskunsumma/100;
newvalue = onepercent*KP_osuus;
document.getElementById('box2.5').value = newvalue;
AJAX answer: getKassasumma
var kassasumma = '477.99€';
document.getElementById('kassasumma').value = kassasumma;
Please ask if you need clarification!
EDIT: Just to be clear, this is NOT an AJAX problem, rather javascript.
I think you are 'swimming in it', how we say. If you begin with AJAX, I'd recommend you use a framework like jQuery and it's $.get() or $.post() functions. It will accomplish all the needed AJAX logic for you.
Try to make xmlhttp local, i.e.
var xmlhttp;
Because you are overwriting you xmlhttp you refer to in the event listeners, so when the listeners get called, they both see the same response.
at the beginning of every of your functions. For compatibility, also use send(null) instead of send().
I have this function below and I call that function in a loop I get the alert n times but only n-1 or sometimes n-2 responses
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)
{
alert(xmlhttp.responseText);
//document.getElementById("warnings_panel").innerHTML+=xmlhttp.responseText;
}
}
alert("in ajax)
xmlhttp.open("GET","getresponse.php?start="+ start + "&end=" + end,true);
xmlhttp.send();
I have made a class (that you can modify easily) for calling a function in loop and it calls the functions correctly. Maybe this could apply to your need.
(Also if anyone sees something wrong it's good to hear from others)
test.htm
<html>
<head>
<script type="text/javascript">
function myXmlHttp() {
/*constructor simulator*/
this.setPersitent=
function (file, onReadyFunc,params,loop)
{
myXmlHttpObj.loop = loop;
myXmlHttpObj.file=file;
myXmlHttpObj.onReadyFunc='myXmlHttpObj.'+onReadyFunc;
myXmlHttpObj.params=params;
myXmlHttpObj.mySetRequest();
}
this.setParams=
function ( params )
{
myXmlHttpObj.params=params;
}
<!--Standard initial code-->
this.mySetRequest =
function ()
{
request = false;
try { request = new XMLHttpRequest(); }
catch (trymicrosoft) {
try { request = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (othermicrosoft) {
try {request = new ActiveXObject("Microsoft.XMLHTTP");}
catch (failed) {request = false;}/*catch3*/}/*catch2*/}/*catch1*/
if (!request)
alert("Error initializing XMLHttpRequest!");
} /*func*/
this.mySendReq=
function()
{
var url = myXmlHttpObj.file;
request.open("POST", url, true);
//Some http headers must be set along with any POST request.
request.setRequestHeader
("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Content-length", myXmlHttpObj.params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = eval(myXmlHttpObj.onReadyFunc);
request.send(myXmlHttpObj.params);
}
this.listenPHP =
function ( ) {
if ( request.readyState == 4) {
if ( request.status == 200)
{
alert(request.responseText);
myXmlHttpObj.loop--;
if(myXmlHttpObj.loop>0)
{
myXmlHttpObj.setParams("js_rand="+Math.random()+"");
myXmlHttpObj.mySendReq();
}
}//inner if
else{alert("status is " + request.status);}
}//outer iff
}//function
}//END
myXmlHttpObj = new myXmlHttp();
myXmlHttpObj.setPersitent
('getresponse.php', 'listenPHP',"js_rand="+Math.random()+"",3) ;
myXmlHttpObj.mySendReq();
</script>
</head>
<body >
</body>
</html>
and getresponse.php
<?PHP
echo 'I recived this random from js:',$_POST['js_rand'],'
this rand is from php:',rand(1,9999);
?>
onreadystatechange gets terminated when your function ends because the xmlhttp object gets removed as it is not a global variable. Am I right?
Better would be to put only the AJAX request in a function, so that the xmlhttp object is only created once (I used a shorter version to create the xmlhttp object in this example).
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
function request() {
xmlhttp.open('GET', 'getresponse.php?start=' + start + '&end=' + end, true);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null);
}
Generally, this should work, but we need more information about how you actually run that loop to know what might be wrong.
I also added encodeURIComponent and changed the condition inside the callback function, because status isn't always 200 when readyState reaches 4.
function request(start, end) {
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('GET', 'getresponse.php?start=' + encodeURIComponent(start) + '&end=' + encodeURIComponent(end), true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4)
if (xmlhttp.status == 200) {
alert(xmlhttp.responseText);
} else {
// status ≠ 200, output useful error message
}
};
xmlhttp.send();
}