Consultas de php con ajax

anahi_pulido · #1 (**permalink**) 22/06/2015, 17:18

Tengo una pagina donde se muestra un carrusel de imágenes que representan películas que pueden ser vistas en la pagina y yo quiero mostrar el nombre de la película a la que se hizo clic, pero el problema que tengo para hacer la consulta es que el carrusel es dinámico y lo cargo con información de la base de datos, así que no se como puedo obtener el "id" de la imagen porque cuando hago la consulta solo me muestra información de la ultima imagen no de la imagen a la que hice clic, ya había preguntado antes y lo que me dijeron fue que use ajax pero la verdad no le entendí muy bien (link de la pregunta anterior: [URL="http://www.forosdelweb.com/f18/consultas-php-1127617/"]http://www.forosdelweb.com/f18/consultas-php-1127617/[/URL] ) tambien debo decir que cambie un poco el código.

Gracias c:

Código HTML:

Ver original<html lang="en">    
    <head> 
        <title>Cine Online</title>
    </head>
    <body>
        <div>
            <div id="demo">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <h1 style="color: #808080"><p>Pel&iacute;culas</p></h1>
                        </div>
                    </div>
                    <br>
                    <br>
                    <br>
                    <center>
                        <div class="row">
                            <div class="span12">
                                <div id="owl-example" class="owl-carousel">

Código PHP:

Ver original<?php  
                                        $peli = mysqli_query($con,"SELECT * FROM pelicula ORDER BY nombre");
                                        while($x = mysqli_fetch_array($peli)) {
                                            echo '<div>';
                                            echo '<img id="'.$x['id'].'" src="'.$x['url_img'].'" alt="" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo"/>';
                                            echo '<h3></h3>';
                                            echo '</div>';
                                            $url = $x['url_img'];
                                            $id = $x['id'];
                                        }
                                    ?>

Código HTML:

Ver original</div>
                            </div>
                        </div>
                    </center>
                </div>
            </div>
        </div>    
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" onclick="load_pelicula(nom_pelicula)">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title" id="exampleModalLabel" style="color:#782E86"><b>Crea tu propia sala</b></h3>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label id="" for="recipient-name" class="control-label">C&oacute;digo de sala: <?php $codigo = rand(); echo $codigo;?></label>
                                <label for="message-text" class="control-label"><font color="#6E6E6E"></font></label>
                            </div>
                            <div class="form-group">
                                <label id="nom_pelicula" for="message-text" class="control-label" onclick="">Pel&iacute;cula:
                                   <?php
                                          [COLOR="Red"]//aquí quiero mostrar el nombre de la película[/COLOR]
                                    ?>
                                </label>
                                <label id="" for="message-text" class="control-label"><font color="#6E6E6E"></font></label>
                            </div>
                            <div class="form-group">
                                <label id="" for="message-text" class="control-label">Administrador de la Sala: <?php echo $_SESSION['nom_us']; ?></label>
                                <label id="" for="message-text" class="control-label"><font color="#6E6E6E"></font></label>
                            </div>
                            <h3 class="modal-title" id="exampleModalLabel" style="color:#782E86"><b>Invita a tus amigos</b></h3>
                            <br>
                            <div class="form-group">
                                <label for="message-text" class="control-label">Invitado 1:</label>
                            </div>
                            <div class="col-sm-4">
                                <input name="invi1" placeholder="Nombre" style="color:#782E86" type="text" class="form-control" id="text" placeholder="">
                            </div>
                            <br></br>
                            <div class="form-group">
                                <label for="message-text" class="control-label">Invitado 2:</label>
                            </div>
                            <div class="col-sm-4">
                                <input name="invi2" placeholder="Nombre" style="color:#782E86" type="text" class="form-control" id="text" placeholder="">
                            </div>
                            <br></br>
                            <div class="form-group">
                                <label for="message-text" class="control-label">Invitado 3:</label>
                            </div>
                            <div class="col-sm-4">
                                <input name="invi3" placeholder="Nombre" style="color:#782E86" type="text" class="form-control" id="text" placeholder="">
                            </div>
                            <br>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <a href="">Ver m&aacute;s informaci&oacute;n</a>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Ir a pel&iacute;cula</button>
                        <button accesskey type="button" class="btn btn-purple">Crear Sala</button>
                    </div>
                </div>
            </div>
        </div>
        <br>
        //funcion de ajax para llamar la consulta
        <script> 
            function loadPelicula(id_pelicula)
            {
                var url = "Get_pelicula.php";
                var data = { id: id};
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    dataType: "html"
                }).done(function( data )
                {
                    $("#nom_pelicula").html(data);
                });
            }
        </script>
    </body>
</html>

Triby · #2 (**permalink**) 24/06/2015, 00:39

El onclick para actualizar el nombre de película debería estar en cada imagen y no aparte, porque donde está siempre enviará el mismo valor y supongo que corresponde a la última película cargada.

Código HTML:

Ver original<img src="ubicacion/de/imagen/.ext" onclick="funcion('nombre de película');" />

Por cierto, no veo tan necesario el uso de AJAX si aquí mismo puedes especificar el nombre/título de la película.

anahi_pulido · #3 (**permalink**) 24/06/2015, 15:08

Y de que otra forma se puede hacer sin ajax?

Triby · #4 (**permalink**) 24/06/2015, 18:41

No quedó claro el ejemplo que puse?... qué parte no entendiste?

anahi_pulido · #5 (**permalink**) 24/06/2015, 19:52

En el onclick de la imagen debo mandar a llamar la función que hice o debo hacer otra función? esa es la parte que no entendí. La verdad es que he tenido muchos problemas para entender como se hace eso