No consigo que con la funcion de ajax me cambie el src

gustavocaso · #1 (**permalink**) 06/07/2013, 19:31

Buenas intento que me código cambie la src de una imagen pero que antes haga una consulta con $.post a una base de datos donde coge el valor del estado de la mesa que es TINYINT y si es 0(ocupada) lo cambia 1(disponible) y si es 1 lo cambia a 0, y devuelve el estado final que recoge la función $.post y en función de la condición de si esta disponible le cambia la src y si esta ocupada le pone otra src.

este es mi código de html:

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reservas</title>
</head>
<body>
 
    <h1>Reservar</h1>
    
 
    
        
        <img id="mesa1" src="../img/seats_blue.png" alt="mesa" onclick="reservar_mesa($(this),$(this).attr('id'))">
        
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 
    <script>
    
    function reservar_mesa(img,id){
 
        // recibe dos variables el objeto en si y el atributo id que sera el que enviemos por post 
        
        var datos = "id_mesa="+id;
 
        var url = "../reservar_mesa.php";
        $.post(url, datos, function(estado){
            
            if(estado === "ocupada"){ // si devuelve ocupada cambiamos la imagen a roja
                img.attr('src', '../img/seats_red.png');
            } else{               //si devuelve disponible cambiamos la imagen a azul
                img.attr('src', '../img/seats_blue.png');
            }
        });
    }
 
    </script>
</html>

Y este es mi código de php:

Código PHP:

Ver original<?php 
require_once "inc/config.inc.php";
 
 
if($_REQUEST['id_mesa']){            //recibo la variable a traves de request 
    $id_mesa = $_REQUEST['id_mesa'];
 
    $mysqli = new mysqli($config['DB_HOST'], $config['DB_USER'], $config['DB_PASS'], $config['DB']);  // me conecto a la base de datos
 
    if (mysqli_connect_errno()) {   //compruebo que no haya errores en la conexion.
        printf("Conexion fallida: %s\n", mysqli_connect_error());
        exit();
    }
 
    $sql = "SELECT estado FROM mesas  WHERE id_mesa = '$id_mesa'";  // selecciono el estado de la mesa clickeada
 
    if ($resultado = $mysqli -> query($sql)) {  // condicion para comprobar que la consulta se este dando
 
            $fila = $resultado -> fetch_assoc();  // guardo en unarray los resultados
            $estado  =  $fila['estado'];  // guardo el estado de la mesa
 
            
 
            if($estado){  // si el estado es true o 1 lo cambio a 0 y devuelvo el estado final
                $consulta = $mysqli -> query ("UPDATE  mesas SET estado = '0' WHERE id_mesa = '$id_mesa'");
                
                $estado_final = "ocupada"; 
            } else {  // si el estado es false o 0 lo cambio a 1 y devuelvo el estado final
                $consulta = $mysqli -> query ("UPDATE  mesas SET estado = '1' WHERE id_mesa = '$id_mesa'");
            
                $estado_final = "disponible"; 
            }
                echo $estado_final; // devuelvo el estado final
 
        }   else{
            echo "Fallo en la primera consulta";
        }
 
        
    } else{
        echo "No has seleccionado mesa";
    }
 
 ?>

Cualquier ayuda sera bien recibida.

carlos_belisario · #2 (**permalink**) 06/07/2013, 20:48

primero img no es un objeto seleccionado por JQuery por lo tanto img.attr te debería de dar un error.
Img según entiendo no esta en el ámbito del closure que le da el valor al success, simplemente, dentro de este closure busca el elemento con jquery y le haces el cambio que necesitas

vesper_metal90 · #3 (**permalink**) 06/07/2013, 21:01

Yo lo haria asi mas facil

Código Javascript:

Ver original$(fuction(){
 
      $("#iddetuimagen").click(function(){
 
         $("#contenedor").load("tuarchivophp"),{tuviarable : valordelavariable,otravariable : "         <php  echo $tuvariableigualconphpsepuede?>" });
 
    });
 
}):

Código HTML:

Ver original<div id="contenedor">
<div>

para recibir el valor que envias tienes que poner

Código PHP:

Ver originalif(isset($_POST['elnombredemivariable'])){
 
$mivarible = $_POST['elnombredemivariable']
 
}

Lo que tu le mandas al archivo php este te lo devuelve en el div contenedor no se por ejemplo quieres buscar los cliente que se mayor a 25 años ti envias la variable con el load el archivo php la recibe la procesa y te devuelve algo que vas a cagar en el div contenedor

vesper_metal90 · #4 (**permalink**) 06/07/2013, 21:16

Cita:

Iniciado por carlos_belisario

primero img no es un objeto seleccionado por JQuery por lo tanto img.attr te debería de dar un error.
Img según entiendo no esta en el ámbito del closure que le da el valor al success, simplemente, dentro de este closure busca el elemento con jquery y le haces el cambio que necesitas

Tiene toda la razon lo que dice el amigo carlos_belisario pero lo puedes poner asi

Código HTML:

Ver original<a id="Imagen" href="" ><img src="barimage.bmp"/></a>

el jquery asi

Código Javascript:

Ver original$("a#Imagen").click(function(event){
                   event.preventDefault();
                   alert("Hola");
               })

No soy un experto pero se me ocurre algo asi

gustavocaso · #5 (**permalink**) 07/07/2013, 04:33

Al pasarle a la funcion reservar_mesa() el objeto en si $(this) y recibirla como img en la función si puedo acceder a la propiedad attr.
Lo que pretendo es que al hacer click en la imagen envie los datos al php en concreto su id, el php lo procese, modifique que en la base de datos el elemento con ese id le cambie el valor de la columna estado y devuelva su estado actual y en función de su estado actual que cambie la src de la imagen.

carlos_belisario · #6 (**permalink**) 07/07/2013, 07:48

Viendo bien ahora tu código y haciendo una prueba esto

Código PHP:

Ver originalfunction cambiar(img)
    {
        var datos = "id_mesa="+img.attr('id');
 
        var url = "reservar_mesa.php";
        $.post(url, datos, function(estado){            
            if(estado === "ocupada"){ // si devuelve ocupada cambiamos la imagen a roja
                img.attr('src', 'imagen/Grafico.png');
            } else{               //si devuelve disponible cambiamos la imagen a azul
                img.attr('src', 'imagen/foto1.png');
            }
        });
    }

me funciono correctamente, y si te fijas es tu mismo código que lo coloque en una función que ya tenía hecha, ahora si depuras con firebug te da algún error?? porque me parece mas error en la petición al servidor ya que el javascript funciona