Welcome to WebmasterWorld Guest from 3.231.228.109

Forum Moderators: open

Message Too Old, No Replies

more than one ajax, second does not work

     
9:28 am on Feb 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 27, 2003
posts: 1318
votes: 0


Hi,
I have one ajax script working for wich I got help with here.
I am now doing a second ajax script wich is easier than previous on next page, but I cant get it work, and dont understand why.
Not sure if I should put the script together or have separately, as per w3c there should only be one call in a function:
[w3schools.com...]
Suppose that is not the reason why it does not work,
I been adding an alert to see where it fail,
the alert inside Ajax open does not work.
What is failing?
Thanks
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}


function enviarDatosSolicitud(){
var divResultado = document.getElementById('resultado');
divResultado.style.display = "block";
var enviarajax = document.solicitud.enviarajax.value,
idrand = document.solicitud.idrand.value,
half_round = document.solicitud.half_round.value,
paynow = document.solicitud.paynow.value,
balance = document.solicitud.balance.value,
whenpayment = document.solicitud.whenpayment.value,
arrive = document.solicitud.arrive.value,
depart = document.solicitud.depart.value,
llegada = document.solicitud.llegada.value,
salida = document.solicitud.salida.value,
dias = document.solicitud.dias.value;


ajax = objetoAjax();

ajax.open("POST", "ajax.php", true);
ajax.onreadystatechange = function () {
alert('NO FUNCIONAAAAAAAAAAAAAAAAAAA');
if (ajax.readyState == 4) {
if (ajax.responseText === "Loading, please wait") {
window.location = 'continue.php';
} else {
divResultado.innerHTML = ajax.responseText
<!-- LimpiarCampos();-->
}
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("dias=" + dias + "&enviarajax=" + enviarajax + "&salida=" + salida +
"&llegada=" + llegada + "&depart=" + depart + "&arrive=" + arrive +
"&idrand=" + idrand + "&half_round=" + half_round + "&paynow=" + paynow + "&balance=" + balance + "&whenpayment=" + whenpayment + "");
}
9:33 am on Feb 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 27, 2003
posts: 1318
votes: 0


this is the form:

<form class="instant" name="solicitud" id="solicitud" action="<?php echo $_SERVER['SCRIPT_NAME'];?>" method="post" onSubmit="return enviarDatosSolicitud();">
<span style ="font-size:12px">Discount coupon code:</span><input type="text" name="idrand" size="10"> </p>
<input type="hidden" name="propiedad" value="<?php print $propiedad;?>">
<input type="hidden" name="llegada" value="<?php print $llegada;?>">
<input type="hidden" name="salida" value="<?php print $salida;?>">
<input type="hidden" name="dias" value="<?php print $dias;?>">
<input type="hidden" name="half_round" value="<?php print $half_round;?>">
<input type="hidden" name="paynow" value="<?php print $paynow;?>">
<input type="hidden" name="balance" value="<?php print $balance;?>">
<input type="hidden" name="whenpayment" value="<?php print $whenpayment;?>">
<input type="hidden" name="arrive" value="<?php print $arrival_display;?>">
<input type="hidden" name="depart" value="<?php print $departure_display;?>">
<p>
<input class="boton roundedcorner border" type="submit" value= "Proceed with booking using PayPal secure system" name="enviarajax" alt="Instant payment"> </p>
<script type="text/javascript" src="ajaxcupones.js"></script>
<div id="resultado"></div>
</form>
10:58 am on Feb 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 27, 2003
posts: 1318
votes: 0


Doing this the alert is printed but disappears after one second without clicking on accept:
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function enviarDatoscupon(){
divresult = document.getElementById('result');

enviarajax = document.solicitud.enviarajax.value;
idrand = document.solicitud.idrand.value;
half_round = document.solicitud.half_round.value;
paynow = document.solicitud.paynow.value;
balance = document.solicitud.balance.value;
whenpayment = document.solicitud.whenpayment.value;
arrive = document.solicitud.arrive.value;
depart = document.solicitud.depart.value;
llegada = document.solicitud.llegada.value;
salida = document.solicitud.salida.value;
dias = document.solicitud.dias.value;
ajax = objetoAjax();
ajax.open("POST", "ajax.php", true);
ajax.onreadystatechange = function () {
alert('NO FUNCIONAAAAAAAAAAAAAAAAAAA');
if (ajax.readyState == 4) {
if (ajax.responseText === "Loading, please wait") {
window.location = 'continue.php';
} else {
divresult.innerHTML = ajax.responseText
<!-- LimpiarCampos();-->
}
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("dias=" + dias + "&enviarajax=" + enviarajax + "&salida=" + salida +
"&llegada=" + llegada + "&depart=" + depart + "&arrive=" + arrive +
"&idrand=" + idrand + "&half_round=" + half_round + "&paynow=" + paynow + "&balance=" + balance + "&whenpayment=" + whenpayment + "");
}


Maybe its due to that I had an request on the page before? Or something is wrong, cant see anything
2:10 pm on Feb 27, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


First, when posting code on WebmasterWorld, it can be helpful to wrap it in the following tags to preserve some formatting:
[quote][pre][code]
[/code][/pre][/quote]

In your code you have this:
onSubmit="return enviarDatosSolicitud();"

the enviarDatosSolicitud function must have a return statement in it for this to work properly. To prevent the default form action (submitting the form, causing a new document to be loaded), you must "return false;" within your function. As you've posted it above, there is no return method at all in that function, so the form will still submit. And by the time the AJAX response comes back, the document that sent the request has now been replaced, and hence you never see the onreadystatechange function called.
2:19 pm on Feb 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 27, 2003
posts: 1318
votes: 0


the enviarDatosSolicitud function must have a return statement in it for this to work properly. To prevent the default form action (submitting the form, causing a new document to be loaded), you must "return false;" within your function. As you've posted it above, there is no return method at all in that function, so the form will still submit. And by the time the AJAX response comes back, the document that sent the request has now been replaced, and hence you never see the onreadystatechange function called.

puf,
this is so true,
didnt remember I changed from onclic to onsubmit....
as there is no validation in the form, thought not necesary return false.
so many new things.
I will try and get back.
The other question.
Is it ok to have several ajax scripts, or should be all in one as per w3c?
thanks

pd. I have learnt to add this for loading,
hope its correct, (at least workw as per my tests) as sometimes take some seconds to load:
ajax.onreadystatechange = function () {
if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3)
{
divResultado.innerHTML = 'Please wait...';
}
if (ajax.readyState == 4) {
if (ajax.responseText === "Loading, please wait") {
2:21 pm on Feb 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 27, 2003
posts: 1318
votes: 0


First, when posting code on WebmasterWorld, it can be helpful to wrap it in the following tags to preserve some formatting:


not sure I got this....

Edited
lol, not sure how you printed that quote, pre, code thing.
Nice picture lol
2:29 pm on Feb 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 27, 2003
posts: 1318
votes: 0


Adding return false to the end of script, I think made it work,
still needs some tests:

 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("dias=" + dias + "&enviarajax=" + enviarajax + "&salida=" + salida +
"&llegada=" + llegada + "&depart=" + depart + "&arrive=" + arrive +
"&idrand=" + idrand + "&half_round=" + half_round + "&paynow=" + paynow + "&balance=" + balance + "&whenpayment=" + whenpayment + "");
return false;
}
2:45 pm on Feb 27, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


If you use the "reply to this topic" link instead of the Quick Reply textarea, there is a "Disable codes for this message" checkbox that would allow you to print the quote, pre, code thing like I did. All of the codes you can use in a reply are listed here:
[webmasterworld.com...]


Is it ok to have several ajax scripts, or should be all in one as per w3c?

The link that you shared above says:

If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task.

This basically just means that since an AJAX request typically consists of a URL (where to send the request) and what to do when the response comes back, you can generalize that into a single function. For example, suppose you had some code that did something like this:


// AJAX request #1
var ajax1 = objectoAjax();
ajax1.open("POST", "page1.php", true);
ajax1.onreadystatechange = function () {
// Do some stuff
};
ajax1.send("foo=bar");

// AJAX request #2
var ajax2 = objectoAjax();
ajax2.open("POST", "page2.php", true);
ajax2.onreadystatechange = function () {
// Do some stuff
};
ajax2.send("id=1");

Instead, you could do something like this:


function sendAjax(url, data, callback) {
var ajax = objectoAjax();
ajax.open("POST", url, true);
ajax.onreadystatechange = callback;
ajax.send(data);
}

// AJAX request #1
sendAjax("page1.php", "foo=bar", function () {
// Do some stuff
});

sendAjax("page2.php", "id=1", function () {
// Do some stuff
});
2:48 pm on Feb 27, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Also, where you declare your "ajax" variable, don't forget to use var! Otherwise you're creating a global variable, which in general you should try to avoid. So instead of this in your code above:

ajax = objetoAjax();

Make it this:

var ajax = objetoAjax();
5:37 pm on Feb 27, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 27, 2003
posts: 1318
votes: 0



Thanks for everything, If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task.


So if I understand correctly I should have this for all ajax tasks I have and then all tasks on this same page.
Actually I already have 3 and another 3+3 in another language folder:
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

Then task 1
task 2
task 3
etc.