obtener valor de jQuery UI buttonset

[mayid]

Estoy usando jquery ui buttonset para darle estilo a los radio buttons. Es esto:
http://jqueryui.com/demos/button/#radio

Por alguna razón, el plugin no cambia el estado de los radio buttons cuando se clickea sobre uno de ellos. Y no encuentro manera de obtener el estado actual a la hora de enviar el formulario por ajax.

Este el el codigo:

Código HTML:

...
<tr>
                                <td class="label"><div>Pop Ups:</div></td>
                                <td class="iphone-radio">
                                    <input type="radio" id="radio1" name="popups" val="on" /><label for="radio1">ON</label>
                                    <input type="radio" id="radio2" name="popups" checked="checked> val="off" /><label for="radio2">OFF</label>
                                </td>
                            </tr>
                            <tr>
                                <td class="label"><div>Notificaciones:</div></td>
                                <td class="iphone-radio">
                                    <input type="radio" id="radio3" name="notifications" val="on" /><label for="radio3">ON</label>
                                    <input type="radio" id="radio4" name="notifications" val="off" checked="checked" /><label for="radio4">OFF</label>
                                </td>
                            </tr>
...
 

Código Javascript:

j( "#preferences .iphone-radio" ).buttonset();
 

La documentacion del buttonset no dice como obtener el valor actual!! Y no encuentro en internet nada util.

En fin, una vez inicializados mis grupos de radio button, aquellos que tienen el atributo "checked" por default nunca lo pierden, y a los demas nunca se les adjudica.

Alguna pista?

[quike88]

Hola,

Tienes un par de errores en el HTML, como por ejemplo en esta linea en lugar de comilla dobre tienes un ">":

Código HTML:

<input type="radio" id="radio2" name="popups" checked="checked" val="off" /><label for="radio2">OFF</label>
 

Esto no se si sea un error o lo hiciste intencionalmente, pero la propiedad de la etiqueta input es value y no val.

Con esas correcciones, deberías poder recibir los datos en la página que se envía el formulario, si quieres obtener el valor seleccionado por JavaScript sería así:

Código Javascript:

//para los radiobuttons con nombre "notifications"
$('input:radio[name=notifications]:checked').val();
 

Saludos.

[mayid]

Gracias. Mira, lo de las comillas fue al borrar el codigo PHP cuando publique en el foro. En mi archivo esta bien escrito.

En cuanto al value, es algo que agregué como ultima prueba. Gracias por señalar que esta mal escrito. De cualquier manera debería funcional sin el atributo "value", tal como aparece en el demo:
http://jqueryui.com/demos/button/#radio

Código HTML:

<div id="radio">
        <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
    </div>
 

Igual, vuelvo a repetir que el demo de jquery UI no cambia el atributo checked al clickear sobre un boton. Es decir, evidentemente no se basan en el input original. Pero tampoco proveen metodos para obtener el valor de los <span> que generan para dar estilo.

[quike88]

Pues si cambia el checked, tal vez no lo veas con el inspector de elementos. ¿Probaste con lo que puse?

Código Javascript:

$('input:radio[name=notifications]:checked').val();
 

Saludos.

[mayid]

Ok mañana lo pruebo. Mil Gracias. Venía intentando con .serialize() pero mejor será un bucle each con esto que planteas, a ver si esta ves si anda.

[Dany_s]

funciona de igual forma que sin el ui, por eso no dice nada en la documentación porque tenés que tratar el html para obtener el valor
si no le das un valor no sabrás cuál es el seleccionado porque te dará como resultado radio=on para cualquiera, capaz por eso te parece que no cambia el valor

Código HTML:

<form>
    <div id="radio">
        <input type="radio" id="radio1" name="radio" value="1" /><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" value="2" checked="checked" /><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" value="3" /><label for="radio3">Choice 3</label>
    </div>
    <input type="submit" />
</form>
 

Código Javascript:

$( "#radio" ).buttonset();
        $('form').submit( function(){
            alert( $(this).serialize() );
            return false;
        });
 

[mayid]

Dany: ya paso un monton de tiempo, pero acabo de retomar el proyecto. Y si, funciona como dijiste, con un value. Sabes? Tenía escrito val en vez de value (se puede ver en mi primer post). Cambiando el nombre de ese atributo, ya funciona. Mil gracias!