I’m trying to set a function that makes an Ajax call, but I must confess I can’t understand what’s happening when I set the onclick event. I’m trying to make an Ajax call to get fields from a database and display them to the user. The idea is that the users type a Last Name in an input field, and then, depending on the link they click on, the function I’m trying to build displays the results of a query to the database. I handle the query with a switch statement in PHP on the script that the Ajax function calls, but I can’t set the variable that handles this behavior on the Javascript code.
I’ve got the Javascript code like this:
var ajaxRequest = ajaxFunction();
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
} return ajaxRequest;
}
function process() {
id="default";
profesional = document.getElementById('profesional');
dotal = document.getElementById('dot');
proyecta = document.getElementById('proy');
proyecta_A = document.getElementById('proy_af');
gastosM = document.getElementById('gastos_med');
autos = document.getElementById('aut');
polifam = document.getElementById('polif');
profesional.onclick=function() {
id="prof";
return id;
}
dotal.onclick=function() {
id="dotal";
return id;
}
proyecta.onclick=function() {
id="proyecta";
return id;
}
proyecta_A.onclick=function() {
id="proyAf";
return id;
}
gastosM.onclick=function() {
id="gastos_medicos";
return id;
}
autos.onclick=function() {
id="autos";
return id;
}
polifam.onclick=function() {
id="polifam";
return id;
}
if(ajaxRequest.readyState==4 || ajaxRequest.readyState==0) {apellido = encodeURIComponent(document.getElementById('query').value)
if (apellido != undefined) {
ajaxRequest.open("GET", 'adminsrc.php?buscarregistro=' +apellido +'&id='+id, true)
ajaxRequest.send("");
ajaxRequest.onreadystatechange=handleServerResponse;
}
}
else setTimeout('process()',1000);
}
function handleServerResponse(){
{
if (ajaxRequest.readyState==4) {
if(ajaxRequest.status==200) {
respuesta=ajaxRequest.responseXML;
respuestadoc = respuesta.documentElement;
if (apellido != undefined) {
ident = respuesta.getElementsByTagName('identidad')[0];
result = ident.firstChild;
refrescar = respuesta.getElementsByTagName('identidad')[1];
actualizar = refrescar.firstChild;
if(result!=undefined) {
resultado = result.data;
document.getElementById('profesreg').setAttribute('value', resultado);
document.getElementById('dotalreg').setAttribute('value', resultado);
document.getElementById('gmmreg').setAttribute('value', resultado);
document.getElementById('proyectareg').setAttribute('value', resultado);
document.getElementById('proyecta2reg').setAttribute('value', resultado);
document.getElementById('autosreg').setAttribute('value', resultado);
document.getElementById('polifreg').setAttribute('value', resultado);
}
if(actualizar!=undefined) {
actualiza = actualizar.data;
document.getElementById('actual_1').setAttribute('value', actualiza);
document.getElementById('actual_2').setAttribute('value', actualiza);
document.getElementById('actual_3').setAttribute('value', actualiza);
document.getElementById('actual_4').setAttribute('value', actualiza);
document.getElementById('actual_5').setAttribute('value', actualiza);
document.getElementById('actual_6').setAttribute('value', actualiza);
document.getElementById('actual_7').setAttribute('value', actualiza);
}
msje = respuestadoc.firstChild.childNodes[0];
if (msje !=undefined) {
mess = msje.data;
document.getElementById("res").innerHTML = "<h4>"+ mess +"</h4>";
}
}
setTimeout('process()',1000);
}
else alert ('hubo un problema al conectarse con el servidor: ' + ajaxRequest.statusText);
}
}
}
//-->
Where the last part is just to set the value of hidden fields in the form so that PHP recognizes those values (they are set to update some fields in the database).
But I must say I’m pretty stuck with the javascript (I’ve never been good at it).
Any suggestions, please?
@Mate The xml file is built like so:
<identificacion>
<response>
Se encontró al asegurado con nombre Mara Fernanda Bravo Palomino, número de póliza 27608165, la cual vence el 2003-04-05 y cuyos beneficiarios contratados son Ana Camila Lpez Bravo
</response>
<identidad>Bravo Palomino</identidad>
<identidad>si</identidad>
</identificacion>
And once (a few weeks ago) I already had it working with a function like so:
function process() {
if(ajaxRequest.readyState==4 || ajaxRequest.readyState==0) {apellido = encodeURIComponent(document.getElementById('query').value)
if (apellido != undefined) {
ajaxRequest.open("GET", 'adminsrc.php?buscarregistro=' +apellido, true)
ajaxRequest.send("");
ajaxRequest.onreadystatechange=handleServerResponse;
}
}
else setTimeout('process()',1000);
}
and the function handleServerResponse above; but as you can see I can only extract the text nodes from the xml with that complicated iteration. Surely there’s an easier way.
1) Download jQuery Library and link to te correct path !!
2) I’m a bit blind with html and xml response, but I think you can solve well.