combinar jQuery y PHP

juangonzalez73 · #1 (**permalink**) 06/08/2013, 10:43

Hola, tengo un problemilla que creo se solucionaría usando Ajax. Tengo un conocimiento muy básico de Ajax y no me veo de momento capacitado, os agradecería si podéis sugerirme alguna otra opción o guiarme sobre qué hacer con Ajax.

Lo que quiero hacer es que una serie de botones, al hacer clic, cambien unos campos de texto que tienen debajo (haces clic en el nombre de un curso y ves la información relacionada). El contenido de esos campos viene de una base de datos.

En el html llamo a cada variable:

<div class="curso">
<div class="fechaCurso"> <?= $cursoSelecc["fechas"]?> </div>
<div class="tituloCurso"> <?= $cursoSelecc["titulo"]?> </div>
<div class="textoCurso"> <?= $cursoSelecc["texto"]?> </div>
</div>

Y mediante un evento onClick para cada botón obtengo la id del curso:

<div class="cursoBoton" onClick="infoCurso(<? echo $curso["id"]?>)">

Pero si creo la función "infoCurso(id)" no puedo meterle php para definir la variable "cursoSelecc":

$cursoSelecc = mysql_query("SELECT * FROM cursos WHERE id = '$_GET[id]'")

El problema es que no sé dónde meter la definición de la variable porque no se puede meter código php dentro de jQuery y como decía no domino Ajax. O quizá voy muy desencaminado, después de horas dándole vueltas no veo nada!

Gracias

pateketrueke · #2 (**permalink**) 06/08/2013, 11:06

Que no domines Ajax no es excusa para no intentarlo, claro que es Ajax lo que necesitas porque como bien indicas no se pueden combinar ambos lenguajes no más por que sí.

Te sugiero buscar temas similares en el foro, lo menos que puedes hacer es aprender un poco más antes de pedirle a los demás que escriban el código por ti.

juangonzalez73 · #3 (**permalink**) 06/08/2013, 11:18

Pateketrueque, te aseguro que he estado investigando y aprendiendo, he encontrado que el problema está ahí y he intentado ponerme al día en Ajax, pero no siempre es posible aprender tanto en unas horas. Tampoco pedía que me escribieran el código, sólo pedía "si podéis sugerirme alguna otra opción o guiarme sobre qué hacer con Ajax".

Vamos, que no creo que haya sido tan caradura, menuda respuesta chaval... Ya me las buscaré, gracias.

jluishg · #4 (**permalink**) 06/08/2013, 11:35

Creo que debes aclarar algo:

Cuando utilizas ajax lo que buscas es actualizar alguna parte de tu documento o pagina web, sin volver a llamar todo el sitio, por lo que regularmente tendras un elemento contenedor destino, adicional puede que necesitas que el contenido a actualizar sea resultado de operaciones con php, entonces debes entender que se llama un script php que generar codigo de salida html.

Es algo asi

<html>
<a href="">click</a>
<div id="resultadoajax"></div>
</html>

entonces cuando haces click en "click" este llama un script php que genera el resultado en el div "resultadoajax"

jarios · #5 (**permalink**) 06/08/2013, 11:45

Fuera del tema: ¿Podrias utlizar para otras veces el resaltador de codigo?. :)

Ahora hablando de tu problema. Como yo lo veo:

Puede que si y puede que no necesites Ajax. Me explico:

1º Sin Ajax:

Código HTML:

Ver original<div class="curso">
<div class="fechaCurso"> <?= $cursoSelecc["fechas"]?> </div>
<div class="tituloCurso"> <?= $cursoSelecc["titulo"]?> </div>
<div class="textoCurso"> <?= $cursoSelecc["texto"]?> </div>
</div>

Con php estas enviando a la web $cursoSelecc["fechas"] ... y seguramente en alguna de esas columnas de la tabla (me lo estoy imaginando que puede ser asi) esta el texto que quieres enviar. Podrias ocultarlo en un div y luego mostrarlo con jquery. Ocultar un div es algo asi (he buscado por encima):

Código HTML:

Ver original<div style="display: none;"> <?= $cursoSelecc["texto"]?></div>

Deberas buscar como se muestra/oculta un div oculto con jquery o libreria.

2º Puede que si necesites Ajax:

Si buscas un poco de Ajax en Jquery veras que lo que se hace es una peticion a una web y que esta puede devolver otro html, json, txt...

Te recomiendo que empieces por [URL="http://www.w3schools.com/jquery/jquery_ajax_load.asp"]aqui[/URL]

Tendras que crear un php que pasandole el id te devuelva el texto y como en los ejemplos del w3school simplemente remplazas.

Dudas??

Ahora traenos codigo :).

Saludos.

juangonzalez73 · #6 (**permalink**) 06/08/2013, 11:49

Sí jluishg, se trata de actualizar sólo una parte que es resultado de llamadas mediante php, justo lo que explicas. Me ayuda un montón, gracias!

juangonzalez73 · #7 (**permalink**) 06/08/2013, 11:56

Ok jarios, soy nuevo por aquí y no conocía el resaltador de código! Lo usaré..

Conozco la opción de mostrar div ocultos con jQuery, pero prefiero una solución más limpia porque puede haber un montón de cursos (o div).

Me estoy peleando con Ajax y sí, cuando lo consiga os enseño el resultado ;)

Gracias!

juangonzalez73 · #8 (**permalink**) 10/08/2013, 05:57

Cita:

Iniciado por jarios

Fuera del tema: ¿Podrias utlizar para otras veces el resaltador de codigo?. :)

Ahora hablando de tu problema. Como yo lo veo:

Puede que si y puede que no necesites Ajax. Me explico:

1º Sin Ajax:

Código HTML:

Ver original<div class="curso">
<div class="fechaCurso"> <?= $cursoSelecc["fechas"]?> </div>
<div class="tituloCurso"> <?= $cursoSelecc["titulo"]?> </div>
<div class="textoCurso"> <?= $cursoSelecc["texto"]?> </div>
</div>

Con php estas enviando a la web $cursoSelecc["fechas"] ... y seguramente en alguna de esas columnas de la tabla (me lo estoy imaginando que puede ser asi) esta el texto que quieres enviar. Podrias ocultarlo en un div y luego mostrarlo con jquery. Ocultar un div es algo asi (he buscado por encima):

Código HTML:

Ver original<div style="display: none;"> <?= $cursoSelecc["texto"]?></div>

Deberas buscar como se muestra/oculta un div oculto con jquery o libreria.

2º Puede que si necesites Ajax:

Si buscas un poco de Ajax en Jquery veras que lo que se hace es una peticion a una web y que esta puede devolver otro html, json, txt...

Te recomiendo que empieces por [URL="http://www.w3schools.com/jquery/jquery_ajax_load.asp"]aqui[/URL]

Tendras que crear un php que pasandole el id te devuelva el texto y como en los ejemplos del w3school simplemente remplazas.

Dudas??

Ahora traenos codigo :).

Saludos.

Bueno, pues ya está montado y funciona perfectamente, tengo en el archivo php "principal":

1. Un contenedor vacío o con un texto que será sustituido:

Código HTML:

Ver original<div class="contCurso"></div>

2. Una serie de botones (dentro de un bucle while) con llamada a una función javascript:

Código HTML:

Ver original<a href="javascript:cargaCurso('<? echo $curso["id"]?>')">
     <div class="cursoBoton">
    <? echo $curso["titulo_corto"]; ?>
      </div>
</a>

3. Y la función:

Código Javascript:

Ver originalfunction cargaCurso(idCurso){
    $(".contCurso").load("verCursos.php",{id:idCurso});
}

Esta función descarga el contenido del archivo "verCursos.php" dentro del div "contCurso" tras pasarle la id del curso en el que se ha hecho clic. Esta id indica de qué curso se deben descargar, desde la base de datos, los contenidos que se solicitan en el archivo "verCursos.php".

Muchas gracias a los que habéis aportado algo!