entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

jQery Problema al pasar variables autogeneradas

Tengo un problema, al tratar de pasar variable a través de jQery:

A través de PHP y un for generó un listado de enlaces de personas con 2 variables nombre y apellido, hasta aquí todo bien, si sigues el enlace te lleva a la ficha de la persona, ahora bien el problema empezo cuando quise cambiar el title del head con el nombre y apellidos de la persona, esto con jQuery se puede hacer y funciona, pero el problema es cuando dentro de la ficha de la persona hay enlace a otras fichas estas al cargar el usuario el title se queda con los datos de la anterior ficha, esto ocurre porque el data-nombre y el data-apellido, son la misma variable.

Cuando en la página principal (el listado de personas) género a través del for los enlaces estas 2 variables, se llaman igual pero cuando a través del DOM paso las variable jQuery pilla las 2 primeras variables por defecto del listado, pongo un ejemplo para que se me entienda

<a href="ficha.php" class="ficha" data-nombre="Pepito" data-apellidos="De los Palotes">Pepito De los Palotes</a>
<a href="ficha.php" class="ficha" data-nombre="Juan" data-apellidos="Garcia Jimenez">Juan Garcia Jimenez</a>
<a href="ficha.php" class="ficha" data-nombre="Antonio" data-apellidos="Martinez Soriano">Antonio Martínez Soriano</a>
<a href="ficha.php" class="ficha" data-nombre="Pepe" data-apellidos="Perez Menendez">Pepe Perez Menendez</a>
<a href="ficha.php" class="ficha" data-nombre="Alberto" data-apellidos="Molina Perez">Alberto Molina Pérez</a>

Si clicko en Alberto Molina Pérez los datos que devuelve son Pepito De los Palotes, en todas las ocasiones, esto lo solucione poniendo un contador

$contador = 0;
for(...) {
data-contador="<?php echo $contador; ?>"
data-nombre<?php echo $contador; ?>="<?php echo $nombre; ?>" 
data-apellidos<?php echo $contador; ?>="<?php echo $apellidos; ?>" 
$contador++;
}

Hasta aquí bien, esto también funciona, devuelve esto:

<a href="ficha.php" data-contador="0"  class="ficha0" data-nombre0="Pepito" data-apellidos0="De los Palotes">Pepito De los Palotes</a>
<a href="ficha.php" data-contador="1"  class="ficha1" data-nombre1="Juan" data-apellidos1="Garcia Jimenez">Juan Garcia Jimenez</a>
<a href="ficha.php" data-contador="2"  class="ficha2" data-nombre2="Antonio" data-apellidos2="Martinez Soriano">Antonio Martínez Soriano</a>
<a href="ficha.php" data-contador="3"  class="ficha3" data-nombre3="Pepe" data-apellidos3="Perez Menendez">Pepe Perez Menendez</a>
<a href="ficha.php" data-contador="4"  class="ficha4" data-nombre4="Alberto" data-apellidos4="Molina Perez">Alberto Molina Pérez</a>

El contador es necesario ya que el código se genera de forma variable, no se sabe cuántas fichas y enlaces hay y aunque se supiese es absurdo tener que llamar a cada variable manualmente (que se puede hacer)

El código jQuery sería:

$(document).ready(function() {
$("body").on("click", "a", function(event) {            
event.preventDefault();

var clase = $(this,"a").prop("class");
contador = $(clase).data('contador');
var nombre = $(clase).data('nombre' + contador);
var apellidos = $(clase).data('apellidos' + contador);
document.title = nombre + ' ' + apellidos;
});
});

Como vengo diciendo esto funciona, pero el problema como comentaba es cuando dentro de la ficha de una persona hay enlace a otras fichas, para que lo entendais, dentro de la ficha de Pepito De los Palotes hay un enlace que apunta Alberto Molina Pérez, Alberto al ser un único enlace su código sería:

<a href="ficha.php" data-contador="0"  class="ficha0" data-nombre0="Alberto" data-apellidos0="Molina Perez">Alberto Molina Pérez</a>

y aquí viene el problema, porque Pepito era:

<a href="ficha.php" data-contador="0"  class="ficha0" data-nombre0="Pepito" data-apellidos0="De los Palotes">Pepito De los Palotes</a>

Si os fijais las variables son las mismas, estuve dándole vueltas al asunto de como solucionar esto, cambie el nombre de la clase de los enlaces de dentro de la ficha, pero nada y al final a través de PHP se me ocurrió utilizar un número aleatorio que no se repitiese, así sería complicado que se diese lo de antes y funcionó genera números aleatorios de este tipo:

<a href="ficha.php" data-contador="567"  class="ficha567" data-nombre567="Alberto" data-apellidos567="Molina Perez">Alberto Molina Pérez</a>
<a href="ficha.php" data-contador="234"  class="ficha234" data-nombre234="Pepito" data-apellidos234="De los Palotes">Pepito De los Palotes</a>

Pero cual fue mi sorpresa, que a la hora de aplicarlo seguía sin funcionar, s clickas en el listado a Pepito el title cambia a Pepito, pero si dentro de la ficha de Pepito clickas en Alberto, en el title sigue apareciendo Pepito.

Y ya no se a que se debe este problema y cómo resolverlo a ver si me podeis echar una mano espero haberme explicado bien.

Saludos

2 Respuestas

2votos

bichomen Puntos2770

AL final era un problema con la construcción del jQuery, en stackoverflow me dieron la solución:

http://stackoverflow.com/questions/40786700/php-jquery-data-value

$(document).ready(function() {
   $("body").on("click", "a", function(event) {         
    event.preventDefault(); 
    if($(this).attr("id").valueOf() == "enlace"){
        var name = $(this).attr("data-name").valueOf();
        var lastname =  $(this).attr("data-lastname").valueOf();
    }
    alert(name + " " + lastname);
    $.ajax({
     url: $(this).attr("href").valueOf() 

    }).done(function(data) {

    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="ficha.php?" id="enlace" class="enlace"
data-name = "name1"
data-lastname = "lastname1">
  Name1
</a>
<a href="ficha.php?" id="enlace" class="enlace"
data-name = "name2"
data-lastname = "lastname2">
  Name2
</a>
<a href="ficha.php?" id="enlace" class="enlace"
data-name = "name3"
data-lastname = "lastname3">
  Name3
</a>

La solución era mucho más sencilla que todo lo que yo había hecho, me había liado igualmente @Leonardo-Tadei gracias por tomarte la molestia en intentar ayudarme, tu opción implica recargar el archivo css constantemente a medida que el PHP lo cambie con jQuery solo modifico el estilo o estilos en cuestión.

1voto

Leonardo-Tadei comentado

Me alegra que hayas encontrado una solución que te sirva!

PD: tal vez me expliqué mal en mis respuestas, porque no implicaba cargar cada vez el CSS, sino tener los estilos ya definidos y que PHP genera el HTML que los usa.
Igual, hay muchas soluciones válidas para un problema! Lo importante es resolver y seguir adelante.

2votos

Peter comentado

Sería mejor que pongas el código que soluciona tu problema en lugar de un enlace, así le servirá a otros con el mismo problema viendo todo en conjunto.

Saludos.

3votos

Leonardo-Tadei Puntos227320

Hola @bichomen,

me parece que estás agregando muchísima complejidad innecesaria, o tal vez un uso inadecuado de AJAX...

Así como generás en PHP los A con los datos de las personas, tendrías que poder crear el TITLE con el nombre de la persona que se entró para ver!

Simplemente poné el TITLE al principio de ficha.php y no tendrás ningún otro problema.

Incluso, pordías pasarte este parámetro por GET a ficha.php en vez de buscarlo (aunque seguro que lo buscás para mostrar la ficha):

<a href="ficha.php?n=Pepito+De+los+Palotes" data-contador="0" class="ficha0" data-nombre0="Pepito" data-apellidos0="De los Palotes">Pepito De los Palotes</a>

Saludos cordiales!

2votos

bichomen comentado

Hola @Leonardo-Tadei gracias por responder, el problema es que no solo uso estas variables para cambiar el titulo de la página que como dices tu lo podria solucionar poniéndolo al principio de la ficha (cuando hablo de título me refiero a los que sale en la pestaña del navegador junto al icono de la web),sino que también , las utilizo para cambiar algunos estilos, por ejemplo dentro de la página pongo también el nombre y los apellidos en un div y si el texto es muy largo con estilos le cambio el tamaño de la letra, si no lo he puesto es porque ya me parecía bastante complejo el código como para liados más el caso es que si soluciono lo del titulo solucionaré lo demás.

Como dices debo estar poniendo una complejidad excesiva y algo del jquery que se me escapa.

2votos

Leonardo-Tadei comentado

Siendo ese el escenario, lo más simple es que al principio de ficha.php leas los datos de la DB de la persona a mostrar por su ID, y que luego generes todo ese contenido desde PHP, en vez de generarlo dinámicamente desde JavaScript.

Es más simple y más eficiente!

Todo lo que es decoración, hacelo con CSS, porque tampoco justifica cambiar propiedades CSS desde JavaScript...

Recordá el principio KISS de programación!

1voto

bichomen comentado

Claro pero es que con PHP no se pueden modificar estilos dinamicamente.

Si sabes como hacer que cambien cierto estilos dependiendo de la longitud del texto para que se adapten al contenido utilizando solo PHP o CSS simple soy todo oídos, de momento solo se me ocurre con jQuery

0voto

Leonardo-Tadei comentado

Sí se pueden cambiar estilos dinámicamente con PHP. Lo que pasa es que para hacerlo, hace falta cargar la página, en vez de actualizar una parte del contenido vía AJAX... por eso te proponía apuntar a ficha.php, que es un script diferente.

Luego, en ficha.php, podés generar el HTML y CSS que quieras, según te haga falta.

Si no querés generar el CSS inline, siempre podés apuntar como hoja de estilo a "estilo.php" y que sea también un script el que genere las reglas de decoración.

Si el parámetro es la longitud del texto, yo no lo complicaría mucho y crearía 3 o 4 estilos según la longitud, luego en PHP con strlen() dependiendo de la longitud, aplico el estilo correspondiente:

...
$lon = strlen($texto);
$estilo = 'clase_uno';
if($lon > 100){ $estilo = 'clase_dos'; }
if($lon > 200){ $estilo = 'clase_tres'; }
if($lon > 300){ $estilo = 'clase_cuatro'; }
?>
<div class="<?=$estilo?>">
...

Saludos cordiales!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta