Ayuda en ajax con datos...

alf2303 · #1 (**permalink**) 24/02/2011, 22:23

Tengo un problema con el codigo ajax... al ejecutar el index.php, si me desaparece bien el comobobox con un dato seleccionado y me aparece impreso en otro div con el dato al darle al boton aceptar, pero lo que tambien quiero siguiendo de eso, es que si quiero cambiar el dato(color) al darle click en el texto cambiar, ahora desaparesca el div con el dato impreso y me devuelva al div del combo para seleccionar otro dato...

estoy atorado en esto... una ayuda por favor...

Codigo ajax:

Código Javascript:

Ver originalfunction 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 datos(){
    //document.getElementById("combo").style.display == 'none'
    //document.getElementById("boton").style.display == 'none'
    
    document.getElementById("combo").style.display = "none";
    document.getElementById("combo").style.visibility = "hidden";
 
    //donde se mostrará el resultado
    divResultado = document.getElementById('resultado');
    //tomamos el valor de la lista desplegable
    col=document.formulario.s_colonia.value;
    
    //instanciamos el objetoAjax
    ajax=objetoAjax();
    //usamos el medoto POST
    //archivo que realizará la operacion
    ajax.open("POST", "muestra_resultado.php",true);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            //mostrar resultados en esta capa
            divResultado.innerHTML = ajax.responseText
        }
    }
    
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //enviando los valores
    ajax.send("colonia="+col)
    
}
 
function cambiar(){
    document.getElementById("resultado").style.display = "block";
    document.getElementById("resultado").style.visibility = "visible";
    document.getElementById("combo").style.display = "block";
    document.getElementById("combo").style.visibility = "visible";
}

Codigo muestra_resultado.php:

Código PHP:

Ver original<div style="float: left; background: #F93;">
    <?
    include("conexionbd.php");
    //capturar la colonia
    $colonia = $_POST['colonia'];
    echo $colonia;
    ?>
</div>

Codigo index.php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aparece Div</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
 
<body>
 
<form name="formulario" id="formulario" method="POST" action="form.php">
 
<div style="float: left; width:700px; height: 80px;">
    <div id="resultado" style="float: left; width:650px; height: 70px; background: #FC0;">
        <div id="combo" style="float: left; width: 400px; height: 40px;">
            <select name="s_colonia" id="s_colonia" onChange="poner_cp()">
                <option>Rojo</option>
                <option>Azul</option>
                <option>Amarillo</option>
                <option>Verde</option>
                <option>Cafe</option>
 
            </select>
            
            
        </div>
        <div id="boton" style="float: left; width: 81px; height: 31px;">
            <img src="btn_aceptar.png" width="81" height="31" style="cursor: pointer" onClick="datos()">
        </div>
    </div>
</div>
 
<div style="float:left; width:100px;">
    <a onclick="cambiar()" style="cursor: pointer;">cambiar</a>
</div>
 
</form>
 
</body>
</html>