Cambiar Texto PHP con JavaScript

Huacho12 · #1 (**permalink**) 10/02/2012, 12:00

Muy buenos días!!!

Foreros!!!

Tengo una duda.................

Tengo dos botones ( atrás y siguiente) y tengo un archivo php en el que tengo puesto diferentes textos o párrafos, lo que no puedo

es que al apretar el botón "siguiente" me aparezca el texto siguiente y si apretó el botón de "atrás" me aparezca el texto anterior, cada uno de esos textos se deben de cargar en un DIV

Espero me puedan ayudar!!!

De antemano les agradezco la ayuda brindada....

ocp001a · #2 (**permalink**) 10/02/2012, 12:55

Si quieres que javascript le "diga" a php que coloque un letrero, tendría que ser con ajax, no obstante, si es sólo por el letrero, no sería necesario llamar a php, si previamente cargas el texto que va a aparecer y sólo lo vas mostrando / ocultando.

Huacho12 · #3 (**permalink**) 10/02/2012, 13:45

Hola ocp001a!!!!

Gracias por contestar!!! XD

Mmmm es como tu dices "que javascript le diga a php" pero como lo hago y en ajax no soy muy bueno que digamos solo tengo una función que manda a llamar a una pagina ya sea php o html dentro de un div y si lo hace......

No se si la misma funcion pueda servir con lo de mandar a llamar a los textos...

Por decir en mi archivo de php tengo:

Código PHP:

   
$var = $_GET["elTexo"]; 
 
if($var==1) 
{ 
      echo "texto 1"; 
} 
 
if($var==2) 
{ 
      echo "texto 2"; 
} 
 
if($var==3) 
{ 
      echo "texto 3"; 
} 
 
if($var==4) 
{ 
      echo "texto 4"; 
}

Y en los botones si apretó siguiente que me muestre texto 1, si lo vuelvo a apretar el texto 2 y así sucesivamente, con el botón de atrás es lo contrario

Espero me puedas apoyar!!!!

Y muchisimas gracias de antemano

Naahuel · #4 (**permalink**) 10/02/2012, 14:36

Si vas a usar ajax, suele ser menos dolor de cabeza si usás jQuery. Simplemente porque alguien ya se tomó el trabajo de integrarlo bien y hacerlo bien cross-browser y fácil de implementar.

Algo así debería funcionar: http://nahueljose.com.ar/ejemplos/Huacho12/

Lo que hace es usar jQuery para que al hacer click sobre los botones, lea qué hay en un atributo que yo llamé data-texto y entonces cargue un archivo php pasando eso por la variable elTexto

Este es el código fuente. El HTML + jQuery:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('button.cargar-texto-externo').click(function(){
        var texto_var = $(this).attr('data-texto');
        $('.contenedor-texto-externo').load('textos.php?elTexto=' + texto_var);
    });
});
 
</script>
</head>
<body>
    <!-- botones -->
    <button class="cargar-texto-externo" data-texto="1">Siguiente</button>
    <button class="cargar-texto-externo" data-texto="2">Anterior</button>
    <!-- contenedor del texto-->
    <div class="contenedor-texto-externo"></div>
</body>
</html>

El archivo PHP es como el tuyo pero corregí el nombre de la variable que le faltaba una t:

Código PHP:

Ver original<?php
$var = $_GET["elTexto"]; 
 
if($var==1) 
{ 
      echo "texto 1"; 
} 
 
if($var==2) 
{ 
      echo "texto 2"; 
} 
 
if($var==3) 
{ 
      echo "texto 3"; 
} 
 
if($var==4) 
{ 
      echo "texto 4"; 
}  
?>

Naahuel · #5 (**permalink**) 10/02/2012, 14:39

Algo que acabo de darme cuenta es que no es en realidad el comportamiento que querías. Vos querés hacer algo así como páginas, de forma que el número de texto se incremente con "siguiente" y disminuya con "anterior". Pero estudiando mi ejemplo y algo de javascript básico lo podés lograr

;)

Huacho12 · #6 (**permalink**) 10/02/2012, 15:00

Hola Naahuel!!!

Exceleeeeente!!! Ejemplo!!!!

Ya vi tu código y como tu dices el comportamiento no es el preciso pero si se puede modificar........ Solo que tendrás algún link para descargar el JQuery???

Y otra preguntita

.... Por que no utilizas los <imput type="buttom"..... /> ??????? O es por la sintaxis del JQuery????

Saludos y muchas gracias!!!!

Naahuel · #7 (**permalink**) 10/02/2012, 15:04

Para usar jQuery sólo necesitás agregar esto dentro de tu <head> y antes de tu script:

Código HTML:

Ver original<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Si querés lo podés descargar de ahí mismo y linkearlo localmente. También tenés http://www.jquery.com

Uso <button> porque quise, nada más. Podés usar cualquier elemento que quieras. El script de ejemplo que te hice tiene este selector:

button.cargar-texto-externo

jQuery usa selectores como los de CSS. Cambiá el selector al elemento que quieras usar. Si vas a usar inputs, podés poner:

input.cargar-texto-externo

O sino simplemente:

.cargar-texto-externo

De esa forma funcionaría al hacer click sobre cualquier elemento que tenga la clase "cargar-texto-externo" (Ya sean <a>, <button>, <input>, <div>, lo que sea).

Huacho12 · #8 (**permalink**) 10/02/2012, 15:29

Naahuel!!!!

W0o0o00oralesss!!!!!

!!!!

Muchas gracias!!!! de verdad muchas gracias!!!!

Antes ya había investigado de JQuery!!! pero no había leído o entendido eso que me acabas de explicar!!!

Muchisimas gracias!!!! Ahora a buscar la forma de que la variable se incremente!!!