papulo
21-08-2007, 11:14:17
Veamos, ando programando una aplicación web con PHP,XHTML,CSS y firebird.
A parte, me he metido de lleno con todo el fregado del Ajax (xmlhttprequest).
El caso es que la aplicación, funciona de maravilla con Firefox pero con iexplorer y Opera me falla uno de los apartados.
Es un formulario de texto, en el cual voy entrando caracteres y realizo una búsqueda en nuestra DB de clientes y mediante Ajax me muestra las coincidencias justo en un recuadro (<div id="autocompletediv"> debajo y se recalcula con cada nueva pulsación.
El caso es que salvo con Firefox, con los otros dos no hace nada de nada y no se por que debe fallar (pero ni la mas remota idea, para que mentir :confused:).
Procedo a añadir todo el código pertinente:
<div style="padding: 10px;">
<form method="post" action="index.php">
<input id="companyaddressid" name="companyaddressid" style="width: 150px; height: 16px;" type="hidden" value="" onkeypress="" /><br />
<input id="yourname" style="width: 150px; height: 16px;" type="text" value="" autocomplete="off" onkeypress="autocomplete(this.value, event)" /><br />
<input type="submit" value="Buscar..." />
</form>
</div>
<div id="autocompletediv" class="autocomp"></div>
Esta es la porción de código perteneciente al form que en el onkeypress del campo text lanza la función autocomplete.
function findPosX(obj){
var curleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x){
curleft += obj.x;
}
return curleft;
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y){
curtop += obj.y;
}
return curtop;
}
function autocomplete (thevalue, e){
theObject = document.getElementById("autocompletediv");
theObject.style.visibility = "visible";
theObject.style.width = "152px";
var posx = 0;
var posy = 0;
posx = (findPosX (document.getElementById("yourname")) + 1);
posy = (findPosY (document.getElementById("yourname")) + 23);
theObject.style.left = posx + "px";
theObject.style.top = posy + "px";
var theextrachar = e.which;
if (theextrachar == undefined){
theextrachar = e.keyCode;
}
//The location we are loading the page into.
var objID = "autocompletediv";
//Take into account the backspace.
if (theextrachar == 8){
if (thevalue.length == 1){
var serverPage = "autocomp.php";
} else {
var serverPage = "autocomp.php" + "?sstring=" + thevalue.substr (0, (thevalue.length -1));
}
} else {
var serverPage = "autocomp.php" + "?sstring=" + thevalue + String.fromCharCode (theextrachar);
}
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
function setvalue (thevalue, companyaddressid){
acObject = document.getElementById("autocompletediv");
acObject.style.visibility = "hidden";
acObject.style.height = "0px";
acObject.style.width = "0px";
document.getElementById("yourname").value = thevalue;
document.getElementById("companyaddressid").value = companyaddressid;
}
Este es el código de functions.js donde tengo la función de autocompletado y las que necesita. findPosX/Y sirven para detectar als coordenadas sobre las que haremos el autocompletado, autocomplete detecta las entradas de texto y las manda al formulario autocomp.php
<?php
include("lib/libreria_conexiondb.php");
if (strlen($_GET['sstring'])>1) {
//autocomp.php
//Consultas que realizaremos contra la DB para buscar coincidencias.
$SQL_search_name="SELECT mca.address_company_name AS COMPANY, mca.address, mct.name AS CONTACT, mca.id AS COMPANY_ADDRESS_ID
FROM mng_company_address mca inner join mng_contact mct on mca.id=mct.company_address_id
WHERE mct.name like '%".$_GET['sstring']."%'";
//echo $SQL_search_name;
$SQL_search_name=consulta_managerdb($SQL_search_name);
$SQL_search_address="SELECT mca.address_company_name AS COMPANY, mca.address, mct.name AS CONTACT, mca.id AS COMPANY_ADDRESS_ID
FROM mng_company_address mca inner join mng_contact mct on mca.id=mct.company_address_id
WHERE mca.address like '%".$_GET['sstring']."%'";
//echo $SQL_search_address;
$SQL_search_address=consulta_managerdb($SQL_search_address);
$SQL_search_company="SELECT mca.address_company_name AS COMPANY, mca.address, mct.name AS CONTACT, mca.id AS COMPANY_ADDRESS_ID
FROM mng_company_address mca inner join mng_contact mct on mca.id=mct.company_address_id
WHERE mca.address_company_name like '%".$_GET['sstring']."%'";
//echo $SQL_search_company;
$SQL_search_company=consulta_managerdb($SQL_search_company);
?>
<div style="background: #CCCCCC;">
<?php
while ($fila = ibase_fetch_object ($SQL_search_name)){
?>
<div class="searchname" onclick="setvalue ('<?php echo $fila->COMPANY; ?>','<?php echo $fila->COMPANY_ADDRESS_ID; ?>')"><?php echo $fila->COMPANY." - ".$fila->ADDRESS." - "?><strong><?php echo $fila->CONTACT; ?><br /></strong></div><?php
}
?>
<?php
while ($fila = ibase_fetch_object ($SQL_search_address)){
?>
<div class="searchaddress" onclick="setvalue ('<?php echo $fila->COMPANY; ?>','<?php echo $fila->COMPANY_ADDRESS_ID; ?>')"><?php echo $fila->COMPANY." - "?><strong><?php echo $fila->ADDRESS; ?><br /></strong></div><?php
}
?>
<?php
while ($fila = ibase_fetch_object ($SQL_search_company)){
?>
<div class="searchcontact" onclick="setvalue ('<?php echo $fila->COMPANY; ?>','<?php echo $fila->COMPANY_ADDRESS_ID; ?>')"><strong><?php echo $fila->COMPANY?></strong><?php echo " - ".$fila->ADDRESS; ?><br /></div><?php
}
}
?>
</div>
En autocomp.php voy buscando coincidencias entre los caracteres que entro y los datos de la DB, luego los resultados los devuelvo y con la función setvalue que acaba rellenando los campos que necesito y al darle al boton submit ya me recarga la página con los datos que acabo de darle.
Cuando no va, no llega ni a realizar el amago de autocompletado.
No se por donde pillarlo, la verdad, pero bueno, espero que alguien arroje un poco de luz sobre todo este asunto.
Saludos.
A parte, me he metido de lleno con todo el fregado del Ajax (xmlhttprequest).
El caso es que la aplicación, funciona de maravilla con Firefox pero con iexplorer y Opera me falla uno de los apartados.
Es un formulario de texto, en el cual voy entrando caracteres y realizo una búsqueda en nuestra DB de clientes y mediante Ajax me muestra las coincidencias justo en un recuadro (<div id="autocompletediv"> debajo y se recalcula con cada nueva pulsación.
El caso es que salvo con Firefox, con los otros dos no hace nada de nada y no se por que debe fallar (pero ni la mas remota idea, para que mentir :confused:).
Procedo a añadir todo el código pertinente:
<div style="padding: 10px;">
<form method="post" action="index.php">
<input id="companyaddressid" name="companyaddressid" style="width: 150px; height: 16px;" type="hidden" value="" onkeypress="" /><br />
<input id="yourname" style="width: 150px; height: 16px;" type="text" value="" autocomplete="off" onkeypress="autocomplete(this.value, event)" /><br />
<input type="submit" value="Buscar..." />
</form>
</div>
<div id="autocompletediv" class="autocomp"></div>
Esta es la porción de código perteneciente al form que en el onkeypress del campo text lanza la función autocomplete.
function findPosX(obj){
var curleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x){
curleft += obj.x;
}
return curleft;
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y){
curtop += obj.y;
}
return curtop;
}
function autocomplete (thevalue, e){
theObject = document.getElementById("autocompletediv");
theObject.style.visibility = "visible";
theObject.style.width = "152px";
var posx = 0;
var posy = 0;
posx = (findPosX (document.getElementById("yourname")) + 1);
posy = (findPosY (document.getElementById("yourname")) + 23);
theObject.style.left = posx + "px";
theObject.style.top = posy + "px";
var theextrachar = e.which;
if (theextrachar == undefined){
theextrachar = e.keyCode;
}
//The location we are loading the page into.
var objID = "autocompletediv";
//Take into account the backspace.
if (theextrachar == 8){
if (thevalue.length == 1){
var serverPage = "autocomp.php";
} else {
var serverPage = "autocomp.php" + "?sstring=" + thevalue.substr (0, (thevalue.length -1));
}
} else {
var serverPage = "autocomp.php" + "?sstring=" + thevalue + String.fromCharCode (theextrachar);
}
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
function setvalue (thevalue, companyaddressid){
acObject = document.getElementById("autocompletediv");
acObject.style.visibility = "hidden";
acObject.style.height = "0px";
acObject.style.width = "0px";
document.getElementById("yourname").value = thevalue;
document.getElementById("companyaddressid").value = companyaddressid;
}
Este es el código de functions.js donde tengo la función de autocompletado y las que necesita. findPosX/Y sirven para detectar als coordenadas sobre las que haremos el autocompletado, autocomplete detecta las entradas de texto y las manda al formulario autocomp.php
<?php
include("lib/libreria_conexiondb.php");
if (strlen($_GET['sstring'])>1) {
//autocomp.php
//Consultas que realizaremos contra la DB para buscar coincidencias.
$SQL_search_name="SELECT mca.address_company_name AS COMPANY, mca.address, mct.name AS CONTACT, mca.id AS COMPANY_ADDRESS_ID
FROM mng_company_address mca inner join mng_contact mct on mca.id=mct.company_address_id
WHERE mct.name like '%".$_GET['sstring']."%'";
//echo $SQL_search_name;
$SQL_search_name=consulta_managerdb($SQL_search_name);
$SQL_search_address="SELECT mca.address_company_name AS COMPANY, mca.address, mct.name AS CONTACT, mca.id AS COMPANY_ADDRESS_ID
FROM mng_company_address mca inner join mng_contact mct on mca.id=mct.company_address_id
WHERE mca.address like '%".$_GET['sstring']."%'";
//echo $SQL_search_address;
$SQL_search_address=consulta_managerdb($SQL_search_address);
$SQL_search_company="SELECT mca.address_company_name AS COMPANY, mca.address, mct.name AS CONTACT, mca.id AS COMPANY_ADDRESS_ID
FROM mng_company_address mca inner join mng_contact mct on mca.id=mct.company_address_id
WHERE mca.address_company_name like '%".$_GET['sstring']."%'";
//echo $SQL_search_company;
$SQL_search_company=consulta_managerdb($SQL_search_company);
?>
<div style="background: #CCCCCC;">
<?php
while ($fila = ibase_fetch_object ($SQL_search_name)){
?>
<div class="searchname" onclick="setvalue ('<?php echo $fila->COMPANY; ?>','<?php echo $fila->COMPANY_ADDRESS_ID; ?>')"><?php echo $fila->COMPANY." - ".$fila->ADDRESS." - "?><strong><?php echo $fila->CONTACT; ?><br /></strong></div><?php
}
?>
<?php
while ($fila = ibase_fetch_object ($SQL_search_address)){
?>
<div class="searchaddress" onclick="setvalue ('<?php echo $fila->COMPANY; ?>','<?php echo $fila->COMPANY_ADDRESS_ID; ?>')"><?php echo $fila->COMPANY." - "?><strong><?php echo $fila->ADDRESS; ?><br /></strong></div><?php
}
?>
<?php
while ($fila = ibase_fetch_object ($SQL_search_company)){
?>
<div class="searchcontact" onclick="setvalue ('<?php echo $fila->COMPANY; ?>','<?php echo $fila->COMPANY_ADDRESS_ID; ?>')"><strong><?php echo $fila->COMPANY?></strong><?php echo " - ".$fila->ADDRESS; ?><br /></div><?php
}
}
?>
</div>
En autocomp.php voy buscando coincidencias entre los caracteres que entro y los datos de la DB, luego los resultados los devuelvo y con la función setvalue que acaba rellenando los campos que necesito y al darle al boton submit ya me recarga la página con los datos que acabo de darle.
Cuando no va, no llega ni a realizar el amago de autocompletado.
No se por donde pillarlo, la verdad, pero bueno, espero que alguien arroje un poco de luz sobre todo este asunto.
Saludos.