[RESOLVED] Javascript reloading page, or crashing, don’t know why

(warning long post, sorry)

I’m pretty new at PHP-Ajax but I’ve worked my way way around it so far.. until now….

I’m trying to display content dynamically in a DIV

My Script is a merge of two other scripts I found online one function (showUser) uses a GET method and the other (funcionPost) uses a POST method independently they work like a charm, but combined in the same script they throw some issues.

[code=php]
<script type=”text/javascript”>
alert(“Comienzo Script”);

function getXMLObject() //XML OBJECT
{ alert(“Comienzo ~ getXMLObject()”);
var xmlHttp = false;

try { xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”); alert(“FLAG ~ EXPLORER 6-“); /*For Old Microsoft Browsers*/ }
catch (e) { try { xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); alert(“FLAG ~ EXPLORER 6+”);/* 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(); alert(“FLAG ~ FIREFOX,CHROME,OPERA”);/*For Mozilla, Opera Browsers*/}
return xmlHttp; // Mandatory Statement returning the ajax object created
alert(“FIN ~ getXMLObject()”);
}//getxmlobjects

var xmlhttp = new getXMLObject();//xmlhttp holds the ajax object

function handleServerResponse() {alert(“Entra al server response”);
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(“Server response ~ if (xmlhttp.readyState==4 && xmlhttp.status==200)”);
document.getElementById(“txtVP”).innerHTML=xmlhttp.responseText; //Update the HTML Form element PROBLEM COULD BE HERE
//break;
}
else {alert(“Error al llamado AJAX”);}
alert(“Sale del server response”);
}//handleserverresponse

function funcionPost(opcion) {
var getdate = new Date(); //Used to prevent caching during ajax call

if(opcion == 1)
{
if(xmlhttp) {
var rut = document.getElementById(“rut”);
var nombre = document.getElementById(“nombre”);
var apellido = document.getElementById(“apellido”);
var telefono = document.getElementById(“telefono”);
var email = document.getElementById(“email”);

xmlhttp.open(“POST”,”vistapreliminarusuario.php”,true); //calling testing.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

alert(“Entro a funcionPost con cadena= “+ “rut=” + rut.value + “&nombre=” + nombre.value + “&apellido=” + apellido.value + “&telefono=” + telefono.value + “&email=” + email.value +” FECHA “+ getdate.value);

xmlhttp.send(“rut=” + rut.value + “&nombre=” + nombre.value + “&apellido=” + apellido.value + “&telefono=” + telefono.value + “&email=” + email.value); //Posting txtname to PHP File
}
}
if(opcion == 2)
{
if(xmlhttp) {
var txtname1 = document.getElementById(“txtname1”);
var txtname12 = document.getElementById(“txtname12”);

xmlhttp.open(“POST”,”testing2.php”,true); //calling testing.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

xmlhttp.send(“txtname1=” + txtname1.value + “&txtname12=” + txtname12.value); //Posting txtname to PHP File
}
}

alert(“Sale de funcionPost”);
}//funcionpost

function showUser(str)
{
alert(“Entro a showUser con str=”+str);

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtSalida”).innerHTML=xmlhttp.responseText; //OR PROBLEM MIGHT BE HERE
document.getElementById(“selectusuario”).value=””;
document.getElementById(“selectviaje”).value=””;
document.getElementById(“selectconsulta”).value=””;
}
}
xmlhttp.open(“GET”,”getoption.php?q=”+str,true);
xmlhttp.send();

alert(“sale de showUser”);

}//showUser

alert(“Fin Script”);
</script>
[/code]

There are lot’s of alerts to keep track on things, but still can’t determing whats wrong, perhaps due to my lack of experience with javascript…

I’ll run down the behavior of the script when using it…
some alerts are in spanish since i’m Chilean.
[COLOR=”Blue”]
*loads the page creates object for FIREFOX*[/COLOR]

Comienzo Script [COLOR=”SeaGreen”]// script start[/COLOR]
FLAG ~ FIREFOX,CHROME,OPERA
Fin Script [COLOR=”SeaGreen”]// script end
[/COLOR]
[COLOR=”Blue”]*click on drop down menu and select option 1 that uses showUser function*[/COLOR]

Entro a showUser con str=”+str [COLOR=”SeaGreen”]// Enters to showUser function where str is the value selected from the drop down menu, in this case 1.[/COLOR]
Sale de showUser[COLOR=”SeaGreen”] //exits showUser function, displays form in DIV with id “txtSalida”[/COLOR]
[COLOR=”Blue”]
*I fill out the form and press the submit button, the idea is to show a preview of the input data for confirmation, the preview DIV is called “txtVP”*

*once the submit button is pressed( onclick=”funcionPost(1);” )*[/COLOR]

Entro a funcionPost con cadena= “+ “rut=” + rut.value + “&nombre=” + nombre.value + “&apellido=” + apellido.value + “&telefono=” + telefono.value + “&email=” + email.value +” FECHA “+ getdate.value[COLOR=”SeaGreen”] // this alert show that it entered the funcionPost function and displays the data that was in the form.[/COLOR]

[COLOR=”Blue”]*HERE IS WHEN THINGS BECOME ODD TO ME*

*It will enter the handleServerResponse function and loop 3 times between*[/COLOR]

Entra al server response [COLOR=”SeaGreen”]// Enters server response[/COLOR]
Error al llamado AJAX [COLOR=”SeaGreen”]// Error in ajax call[/COLOR]
Sale del server response [COLOR=”SeaGreen”]// Exits server response
[/COLOR]
[COLOR=”Blue”]*In the fourth iteration it will display the information correctly in the txtVP DIV, my gues is that it takes 4 times because of the readyState, but that’s just my guess*[/COLOR]

Server response ~ if (xmlhttp.readyState==4 && xmlhttp.status==200)
[COLOR=”Blue”]
*So far I would be happy with the results, since it actually displays stuff in the way I like it… regardles of the 3 previous error iterations… but then… it iterates one more time..dunno why…*[/COLOR]

Entra al server response [COLOR=”SeaGreen”]// Enters server response[/COLOR]
Server response ~ if (xmlhttp.readyState==4 && xmlhttp.status==200)
Sale del server response[COLOR=”SeaGreen”] // Exits server response[/COLOR]

[COLOR=”Blue”]*and…*[/COLOR]

Comienzo Script [COLOR=”SeaGreen”]// script start[/COLOR]
FLAG ~ FIREFOX,CHROME,OPERA
Fin Script [COLOR=”SeaGreen”]// script end[/COLOR]

[COLOR=”Blue”]*which reloads the whole thing and i’m back at square 1*[/COLOR]

Without the alerts to track every move… everything happens in fractions of second.. due to tracking I was able to determine that it actually displays the info correctly, BUT then reloads the whole thing…

I know it’s a lot to ask….. but i’m feeling hopeless here and perhaps you can see the error more evidently than me….

I would appreciate greatly your help…
or even if you just took the time to read all this… I’m in gratitude…

thank you in advance and looking forward to your questions, comments or replies

Also in #JavaScript _↴