Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema con AJAX

Estas en el tema de Problema con AJAX en el foro de Frameworks JS en Foros del Web. Mi problema es el siguiente: Tengo un FILESET con 2 SELECT y un INPUT, el SELECT "Descripción" y el INPUT "Número de Producto" se deben ...
  #1 (permalink)  
Antiguo 14/03/2011, 21:35
 
Fecha de Ingreso: septiembre-2010
Mensajes: 9
Antigüedad: 13 años, 7 meses
Puntos: 0
Pregunta Problema con AJAX

Mi problema es el siguiente: Tengo un FILESET con 2 SELECT y un INPUT, el SELECT "Descripción" y el INPUT "Número de Producto" se deben llenar con los datos de una tabla y el segundo SELECT "Seriales" deberia llenarse con los datos de otra tabla, pero esos datos que se cargaran en ese segundo SELECT van a depender de la opción que se seleccione en el primer SELECT.


El problema es que el dato que deberia cargarse dentro del INPUT se esta cargando es al lado del segundo SELECT, y no consigo como enviarlo a ese INPUT.

Aquí estan los códigos:

AJAX.JS
================================================== =======
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 pedirDatos(){
//donde se mostrará el resultado

var lista,cedula_cliente,contacto_cliente,direccion_cl iente,ciudad_cliente,estado_cliente,telefono_clien te,email_cliente,ajax,resul;
lista = document.getElementById("lista").value;
contacto_cliente = document.getElementById("contacto_cliente");
cedula_cliente = document.getElementById("cedula_cliente");
direccion_cliente = document.getElementById("direccion_cliente");
ciudad_cliente = document.getElementById("ciudad_cliente");
estado_cliente = document.getElementById("estado_cliente");
telefono_cliente = document.getElementById("telefono_cliente");
email_cliente = document.getElementById("email_cliente");


ajax=objetoAjax();

ajax.open("POST", "procesa.php",true);

ajax.onreadystatechange=function() {
if (ajax.readyState==4) {

resul = ajax.responseText.split('-');


contacto_cliente.value = resul[2];
cedula_cliente.value = resul[3];
direccion_cliente.value = resul[4];
ciudad_cliente.value = resul[5];
estado_cliente.value = resul[6];
telefono_cliente.value = resul[7];
email_cliente.value = resul[8];


}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("nombre="+lista);
}


// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="descripcion_equipo";
listadoSelects[1]="serial_equipo";

var producto, resul;
producto = document.getElementById("producto_equipo");

function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}

function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects , idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrige n);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelect s[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option");nueva Opcion.value=0;nuevaOpcion.innerHTML="Selecciona Opción...";
selectActual.appendChild(nuevaOpcion);selectActual .disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDest ino);

// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=objetoAjax();
ajax.open("GET", "procesa.php?select="+idSelectDestino+"&opcion="+o pcionSeleccionada+"&producto="+producto, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option");nueva Opcion.value=0;nuevaOpcion.innerHTML="Cargando..." ;
selectDestino.appendChild(nuevaOpcion);selectDesti no.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseTe xt;
}
}
ajax.send(null);
}
}
================================================== =======

PROCESA.PHP
================================================== =======
<?php
include("conexion.php");
include("datos_conexion.php");
include("functions.php");
$conexion = new Conexion_2010(servidor,usuario,clave,baseDatos);

if(isset ($_POST['nombre'])){
$nombre = $_POST['nombre'];

$consulta = 'select * from clientes where nombre="'.$nombre.'" ';
$query = mysql_query($consulta) or die (mysql_error());
$datos = mysql_fetch_array($query);

echo $datos['codigo']."-".$datos['nombre']."-".$datos['contacto']."-".$datos['cedula']."-".$datos['direccion']."-".$datos['ciudad']."-".$datos['estado']."-".$datos['telefono']."-".$datos['email'];

exit;
}


if(isset($_GET["select"]) && isset($_GET["opcion"])){
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"]; $producto = $_GET['producto'];
}


$consulta = mysql_query("SELECT * FROM seriales WHERE codigo_equipo='$opcionSeleccionada'") or die(mysql_error());
$sql = mysql_query("SELECT producto FROM equipos WHERE codigo='$opcionSeleccionada'") or die(mysql_error());

$row = mysql_fetch_array($sql);

// Comienzo a imprimir el select
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
while($registro=mysql_fetch_row($consulta))
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
$registro[1]=htmlentities($registro[1]);
// Imprimo las opciones del select
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";

echo $row['producto'];
echo "<input type='text' size='10' maxlength='10' value='".$row['producto']."' />";
}
================================================== =======
  #2 (permalink)  
Antiguo 14/03/2011, 21:55
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 5 meses
Puntos: 16
Respuesta: Problema con AJAX

pfff pega el código con la etiqueta highlight que así se hace menos tedioso leerlo, así como esta pegado al margen la verdad es que no em dan ganas de leerlo.

---- Edit ----

Bueno tu problema es que el código que retorna la página procesa.php es precisamente un select y un texto al lado.

lo que se me ocurre es que uses una cadena especial para separar ,las cadenas, por ejemplo #/#, de este modo tu archivo procesa debería quedar algo así:

Código PHP:
Ver original
  1. //Lógica para crear el select dependiente
  2. echo "#/#";
  3. echo $row['producto'];

Luego cuando tengas el responseText del ajax en el javascript le puedes aplicar un split para separar por su lado el select y por otro el código del producto y finalmente asiganarle el select y el cçodigo del producto al elemento correspondiente, en código algo así:

Código Javascript:
Ver original
  1. if (ajax.readyState==4) {
  2. var re = ajax.responseText.split('#/#');
  3.                 selectDestino.parentNode.innerHTML= re[0];
  4.  
  5. var code = document.getElementById('code');
  6.  
  7. code.value = re[1];
  8.             }

esto suponiendo que el input donde tiene que ir el código tenda id="code"

Saludos

PD: acostumbrate a usar el highlight para visualizar el código, sobre todo cuando pegues códigos largos
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!

Última edición por El_Metallick; 14/03/2011 a las 22:08

Etiquetas: ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:43.