actualizar select ajax

lukas4 · #1 (**permalink**) 27/01/2012, 11:04

Que tal maestros, tengo un problemita y espero ustedes me puedan guiar por el camino correcto

Lo que quiero es que después de que se haga la actualización de algún usuario en el nombre o apellido, el select se actualice mostrando el nuevo nombre del usuario. con lo que tengo orita al momento de actualizar me despliega otro select en lugar de el mensaje de actualizacion exitosa.

tengo las siguientes funciones en js:

Código Javascript:

Ver originalfunction request(val){//trae la info de los usuarios: id,nombre, etc
    if(val==""){
        document.getElementById("result").innerHTML="";
        return;
    }
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("result").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","buscar1.php?q="+val+"&t="+Math.random(),true);
    xmlhttp.send();
}
function loadSelect(){//carga el select con los usuarios
    document.getElementById("userList").innerHTML=""
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("userList").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","select.php",true);
    xmlhttp.send();
}
function alter(){//actualiza los campos de nombre, apellido y localidad del usuario
    user=document.getElementById("user").value;
    name=document.getElementById("name").value;
    last=document.getElementById("last").value;
    loc=document.getElementById("loc").value;   
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("response").innerHTML=xmlhttp.responseText;
        }
    }
    data="?q="+user+"&name="+name+"&last="+last+"&loc="+loc+"&t="+Math.random();
    xmlhttp.open("GET","act.php"+data,true);
    xmlhttp.send();
    loadSelect();// aqui mando llamar la función para cargar el select con los datos actualizados, pero no me funciona correctamente =(
}

este es mi body:

Código HTML:

Ver original<body>
<div id="userList">
<?php
include 'dataconnect.php';
 
$sql="SELECT id, name, last FROM person ORDER BY name";
$result=mysql_query($sql) or die(mysql_error());
if(mysql_num_rows($result)==0){
    echo "No data was found";
}
else{
    echo "<select onchange=\"request(this.value)\">";
    echo "<option value=''>Select an user</option>";
    while($row=mysql_fetch_array($result)){
        echo "<option value='".$row['id']."'>".$row['name']." ".$row['last']."</option>";
    }
    echo "</select>";
}
?>
</div>
<div id="result">
</div>
</body>

y estos son mis archivos php:

Código PHP:

  <? //buscar1.php 
include 'dataconnect.php'; 
$user=$_GET['q']; 
$sql="SELECT person.id, person.name, person.last, location.location FROM person LEFT JOIN location on person.id=location.personId WHERE person.id=".$user.""; 
$result=mysql_query($sql) or die (mysql_error()); 
if(mysql_num_rows($result)==0){ 
    echo "No data was found"; 
} 
else{ 
    $row = mysql_fetch_array($result);?> 
    <input type="hidden" style="display:none;" value="<?=$row['id']?>" id="user"/> 
    <table> 
        <tr> 
            <td>First Name:</td><td><input type="text" value="<?=$row['name']?>" id="name"/></td> 
        </tr> 
        <tr> 
            <td>Last Name:</td><td><input type="text" value="<?=$row['last']?>" id="last"/></td> 
        </tr> 
        <tr> 
            <td>Location:</td><td><input type="text" value="<?=$row['location']?>" id="loc"/></td> 
        </tr> 
        <tr> 
            <td><input type="button" value="Delete" onclick=""/></td> 
            <td><input type="button" value="Update" onclick="alter();"/></td> 
        </tr> 
    </table> 
    <div id="response"></div> 
<?} 
?>

Código PHP:

  <?php//act.php 
 
include 'dataconnect.php'; 
$sql="UPDATE person, location SET person.name='".$_GET['name']."', person.last='".$_GET['last']."', location.location='".$_GET['loc']."' WHERE person.id=location.personId AND location.personId=".$_GET['q'].""; 
 
$result=mysql_query($sql);// or die(mysql_error()); 
if(!$result){ 
    die("Update failure: ".mysql_error()); 
} 
else{ 
    echo "Update Succesfull"; 
} 
?>

Código PHP:

  <?php//select.php 
include 'dataconnect.php'; 
 
$sql="SELECT id, name, last FROM person ORDER BY name"; 
$result=mysql_query($sql) or die(mysql_error()); 
if(mysql_num_rows($result)==0){ 
    echo "No data was found"; 
} 
else{ 
    echo "<select onchange=\"request(this.value)\">"; 
    echo "<option value=''>Select an user</option>"; 
    while($row=mysql_fetch_array($result)){ 
        echo "<option value='".$row['id']."'>".$row['name']." ".$row['last']."</option>"; 
    } 
    echo "</select>"; 
} 
?>

disculpen tanto código, pero no quería omitir nada.