Nueva Versión: Sexy Forms 1.3

Liberada una nueva versión de Sexy Forms. Entre los cambios más significativos se encuentran:

  • Compatibilidad con Internet Explorer 6
  • Nuevo SelectBox con manejo de eventos
  • Varios bugs de posición arreglados
  • SelectBox ahora recibe foco
  • SelectBox ahora muestra iconos en IE7 & IE6
  • Arreglado el bug TextArea que ponia la barra de desplazamiento en cualquier lado en Opera

Mucha gente me ha dicho que tiene problemas con el SelectBox y los eventos. Por ejemplo un caso muy común es el de los Select dependientes, que se usan para elegir Ciudades por ejemplo. Hay que tener en cuenta de que el Select de SexyForms no funciona igual que un Select nativo y hay que “forzar” el refresco de los elementos.

  $('selectbox').options[$('selectbox').options.length] = new Option('Nueva Opcion', '1');

  $('selectbox').refresh(); // refrescamos el selectbox

Pueden ver un ejemplo real de esto en la siguiente dirección: SexyForms SelectBox Demo

En resumen, si posees un SelectBox dependiente de Ajax, ten en cuenta que tendrás que modificar tu script para adaptarlo a SexyForms, agregando la función refresh() cada vez que modifiques los elementos del SelectBox.

Sin embargo, si no sabes hacerlo o no quieres tener problemas con el SelectBox puedes elegir mantener el nativo enviando el parámetro “noconflict” cuando llamas a la función DoSexy, osea de la siguiente manera:

  $$("input", "select", "textarea").each(function(el) {
    el.DoSexy({noconflict:true});
  });
Mauricio says:

Eduardo, tengo problemas para poder implementar la función Refresh para los select dependientes en mi código ya que lo estoy realizando con Xajax, te dejo mi código:

require_once ('xajax/xajax.inc.php'); //incluimos la librelia xajax
function ciudades($id_region, $id_ciudad) {
  $respuesta = new xajaxResponse(); //Creamos el objeto xajax
  $inputDestino = "divRegiones"; //indicamos el ID del tag HTML de destino. en este caso el DIV que contiene el selector
  $propiedadInputDestino = "innerHTML"; //indicamos la propiedad que deseamos que se modifique. Colocaremos el selector dentro del DIV
  //indicamos el nuevo valor que este tendrá. Cadena HTML
  $valorAAsignar = '


';

  $respuesta->addAssign($inputDestino, $propiedadInputDestino, $valorAAsignar);
  return $respuesta;

}

Y el código HTML de los selects dependientes:


Ojala me puedas guiar, gracias!

    Eduardo says:

    No conozco XAJAX pero lo que te puedo decir es que deberías buscar cómo ejecutar el evento onComplete del ajax, y en ese evento tirarle el refresh() a los selects.

    Según lo que pude encontrar pero no estoy seguro, es poner este código al final de tu página:

    window.addEvent('domready', function() {
      xajax.callback.global.onComplete = function () {
        $('comunas').refresh();
      };
    });
    
    Este comentario te ha servido? y colabora con el blog
    Reply
    Amir says:

    Mau, haber si te puedo ayudar, tienes que hacer esto:

    $respuesta->addScript("$('comunas').refresh();");
    

    después de tu addAssign.

    Un saludo.!

Mauricio says:

Gracias por la ayuda Eduardo, he estado Googleando y aun no encuentro la forma, realmente tampoco yo entiendo mucho de xajax y no se donde poner el refresh.

Probe tu solucion y Firebug me lanza el error:

xajax.callback is undefined
xajax.callback.global.onComplete = function ()

esutoraiki says:

Hola Eduardo como puedo refrescar un campo tipo checkbox. Mira hago lo siguiente>

$('id_checkbox').refresh();

Y el campo igual no se refresca. Mi problema surge por que quiero utilizar un botón de restablecer formulario. Y quiero que los checkbox, queden deseleccionados. Gracias de antemano Eduardo

    Amir says:

    @esutoraiki: haber si te puedo ayudar mi estimado…
    el botón en html para resetear formularios es

    <input type="reset" name="reset" id="reset" value="Borrar Form" />
    

    ahora veo que lo que quieres es uncheck y check los checkboxes…

    no sé que framework uses, yo soy a la old school
    y la forma en que lo hago es:

    
    function checkUncheckBox(checkbox_id)
    {
     var checkbox = document.getElementById(checkbox_id);
    
    if(checkbox.checked == true)
    {
       checkbox.checked = false;
    }else
    {
       checkbox.checked = true;
    }
    }
    

    Espero te pueda servir de algo.

    Un saludo.

      Eduardo says:

      Si pero el SexyForms no refresca correctamente el estado si lo cambias por código.

      Tendrías que lanzar el evento click:

      // en mootools
      $('checkbox').fireEvent('click');
      
      // en jquery
      $('checkbox').trigger('click');
      

      en la próxima versión le agrego una funcion para esto.

      Este comentario te ha servido? y colabora con el blog
      Reply
    esutoraiki says:

    Gracias a Amir y a Eduardo por las respuestas. Solucionado :)

Jhonatan Castro Polo says:

Necesito saber si es posible cambiar el atributo icon de un input desde el codigo. y como hacerlo

amigo eduardo una molestia tu ejemplo de los select anidados no me funciona estoy usando las ultimas versiones del mootools 1.3 y del sexyform 1.3 y no marca ni error ni muestra el contenido.

Mainly need to post and inquire where you obtained your template? I’m looking for one for my new blogging site and really like yours. Thanks so much.