Foros del Web » Programando para Internet » Javascript »

Añadir clase a botón pero no funciona. Avanzado

Estas en el tema de Añadir clase a botón pero no funciona. Avanzado en el foro de Javascript en Foros del Web. Hola he colgado un ejemplo para poder ver el código de mi problema. http://xurl.es/kwrp1 Resulta que tengo una plantilla html/css con botones que cambian de ...
  #1 (permalink)  
Antiguo 14/06/2011, 09:29
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 17 años, 7 meses
Puntos: 2
Añadir clase a botón pero no funciona. Avanzado

Hola he colgado un ejemplo para poder ver el código de mi problema.
http://xurl.es/kwrp1

Resulta que tengo una plantilla html/css con botones que cambian de color con :hover
Lo curioso es que cuando ese mismo botón se muestra a través de una consulta ajax no ya no cambia de color, si que conserva los estilos (tamaño, color...) pero el color de :hover deja de hacerlo.

Para poder ver el error basta con clicar sobre el botón de radio etiquetado cono "Si" y se mostrará un botón que no cambia de color.

El probelma real por lo que veo con firebug es que al cargarse dinámicamente el botón con el texto "Mostrar empresas Funciona mal" este no llama a la función
function artButtonSetup(className)
que es la que hace que el boton cambie de color (bueno realmente lo que hace es cambia de posicion una imagen).

Pongo el código de la función que por algún motivo no es llamada cuando el botón se mustra tras una consulta ajax.

Código HTML:
/* begin Button */
function artButtonSetup(className) {
    jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function (i, val) {
        var b = jQuery(val);
        if (!b.parent().hasClass('dpw-button-wrapper')) {
            if (b.is('input')) b.val(b.val().replace(/^\s*/, '')).css('zoom', '1');
            if (!b.hasClass('dpw-button')) b.addClass('dpw-button');
            jQuery("<span class='dpw-button-wrapper'><span class='dpw-button-l'> </span><span class='dpw-button-r'> </span></span>").insertBefore(b).append(b);
            if (b.hasClass('active')) b.parent().addClass('active');
        }
        b.mouseover(function () { jQuery(this).parent().addClass("hover"); });
        b.mouseout(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); });
        b.mousedown(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); });
        b.mouseup(function () { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); });
    });
}
jQuery(function() { artButtonSetup("dpw-button"); });

/* end Button */
ya se que es bastante confuso el tema este pero agradeceria cualquier ayuda o comentario.
Gracias
  #2 (permalink)  
Antiguo 14/06/2011, 09:41
 
Fecha de Ingreso: mayo-2011
Ubicación: sinaloa
Mensajes: 150
Antigüedad: 8 años, 6 meses
Puntos: 4
Respuesta: Añadir clase a botón pero no funciona. Avanzado

mmmm
lo mas probable es que sea por que lo tengas directo desde una funcion.

para serte sincero no se utilizar ajax.
Siempre que tengo errores utilizo tantos alert como sea posible. vas descartando los que no necesitas hasta llegar con el problema.

puedes realizar otras pruebas poniendole en html el evento y el nombre de la funcion creo que es un poco mas ordenado saber donde estas utilizando las funciones
<div id="boton_" mouseover="nom_over('boton_');" ... y bueno haci con todas sus funciones el problema es que saldrian demaciadas funciones. es tan solo otra manera de hacerle.
  #3 (permalink)  
Antiguo 14/06/2011, 10:25
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 8 años, 8 meses
Puntos: 192
Respuesta: Añadir clase a botón pero no funciona. Avanzado

¿Y por qué utilizaste jQuery? Bastaba con usar :hover en CSS, ¿no?

En fin, respondiendo a tu pregunta: El problema está en que, efectivamente, el nuevo botón no tiene asignado el handler para el evento que dispara el cambio de clases. En lugar de asignar dicho handler con ".mouseover, .mouseout, etc" necesitás hacerlo con .delegate(). .delegate() es equivalente a .live() para asignar un handler, con la diferencia que los nuevos elementos que cumplan con el selector heredarán el handler sin necesidad de asignárselo de nuevo.
__________________
nahueljose.com.ar
  #4 (permalink)  
Antiguo 14/06/2011, 10:45
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 17 años, 7 meses
Puntos: 2
Respuesta: Añadir clase a botón pero no funciona. Avanzado

Resulta que este codigo lo genera un software que genera plantillas HTML de muchisima calidad en muy poco tiempo y me fnciona super bien y me hace ahorrar mucho tiempo y dinero.
El único problema que tengo hasta ahora es ese.
No solo con lo de la imagen del botón ya que simplemente podría poner unos botones aparte que no usen jquery. Al recargar contenido dinamicamente hay algunos estilos aparte que no se cargan y eso me biene fatal para mis plicaciones.

Un saludo y haber si alguien mas se anma y me ayuda con el tama este que me lleva loco...
  #5 (permalink)  
Antiguo 14/06/2011, 16:50
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 10 años
Puntos: 18
Busqueda Respuesta: Añadir clase a botón pero no funciona. Avanzado

La función no es llamada porque la llamada se hace al momento de cargar la pagina principal y el contenido añadido por ajax simplemente no estaba comprendido. La solución es volver a realizar la llamada luego de que el contenido se haya añadido.

Hace la llamada artButtonSetup("dpw-button"); luego de obtener los resultados de tu petición ajax y después me contas.

Aca te dejo el código que creo que tendrías que modificar en tu archivo ajax.js:


Código:
function MostrarConsulta(datos,contenedor){
        divResultado = document.getElementById(contenedor);
        ajax=objetoAjax();
        ajax.open("GET", datos);
        ajax.onreadystatechange=function() {
                if (ajax.readyState==4) {
                        divResultado.innerHTML = ajax.responseText;

                        artButtonSetup("dpw-button"); 

                }
        }
        ajax.send(null)
}



Saludos!
__________________
http://www.ignacionieva.com.ar

Última edición por inieva; 14/06/2011 a las 17:06
  #6 (permalink)  
Antiguo 14/06/2011, 17:34
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 17 años, 7 meses
Puntos: 2
Respuesta: Añadir clase a botón pero no funciona. Avanzado

Cita:
Iniciado por inieva Ver Mensaje
La función no es llamada porque la llamada se hace al momento de cargar la pagina principal y el contenido añadido por ajax simplemente no estaba comprendido. La solución es volver a realizar la llamada luego de que el contenido se haya añadido.

Hace la llamada artButtonSetup("dpw-button"); luego de obtener los resultados de tu petición ajax y después me contas.

Aca te dejo el código que creo que tendrías que modificar en tu archivo ajax.js:


Código:
function MostrarConsulta(datos,contenedor){
        divResultado = document.getElementById(contenedor);
        ajax=objetoAjax();
        ajax.open("GET", datos);
        ajax.onreadystatechange=function() {
                if (ajax.readyState==4) {
                        divResultado.innerHTML = ajax.responseText;

                        artButtonSetup("dpw-button"); 

                }
        }
        ajax.send(null)
}
Saludos!


Hola gracias por responder, creo que si que van por ahí los tiros.
Lo pruebo y te comento algo.
Un saludo.
  #7 (permalink)  
Antiguo 15/06/2011, 05:55
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 17 años, 7 meses
Puntos: 2
Respuesta: Añadir clase a botón pero no funciona. Avanzado

Cita:
Iniciado por inieva Ver Mensaje
La función no es llamada porque la llamada se hace al momento de cargar la pagina principal y el contenido añadido por ajax simplemente no estaba comprendido. La solución es volver a realizar la llamada luego de que el contenido se haya añadido.

Hace la llamada artButtonSetup("dpw-button"); luego de obtener los resultados de tu petición ajax y después me contas.

Aca te dejo el código que creo que tendrías que modificar en tu archivo ajax.js:


Saludos!

Hola lo he probado y me dio algunos problemas pero ahora no se cómo pero funciona perfectamente ej ejemplo tal cual me lo habias puesto.
Puedes ver el ejemplo si quieres ya que lo he actualizado el el FTP.
Aprovecho para preguntar con algo parecido que me paso en esta misma plantilla.
¿Habría alguna forma de engañar a Jquery para que cuando haga un petición ajax jquery piense que se ha recargado toda la página y así evitarme estos problemas?
Muchas gracias y un saludo.
  #8 (permalink)  
Antiguo 15/06/2011, 13:57
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 10 años
Puntos: 18
Respuesta: Añadir clase a botón pero no funciona. Avanzado

Bueno, yo no lo llamaría engañar y no sé si te resuelva tus problemas pero igual que hiciste esto recién de llamar a la función artButtonSetup después de que se completo la petición ajax podes llamar a una función que englobe todo lo que tu página principal hace al cargarse.
__________________
http://www.ignacionieva.com.ar

Etiquetas: avanzado, clase
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:41.