aprender - plantillas para cakephp

Agregar y eliminar campos de formulario en Cakephp

Question

Estoy buscando una manera de tener un formulario en cakephp que el usuario puede agregar y eliminar campos de formulario antes de enviarlo. Después de echar un vistazo y preguntarle al pastel IRC la respuesta parece ser usar Jquery, pero después de horas de mirar no puedo averiguar cómo hacerlo.

El único ejemplo que tengo de esto en cake lo encontré en http://www.mail-archive.com/[email protected]/msg61061.html pero después de todos mis esfuerzos, no puedo hacer que este código funcione correctamente ( creo que es llamar controladores / modelos que no figura en el ejemplo)

También encontré un ejemplo de jquery ( http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/ ) que hace lo que me gustaría que hiciera mi formulario pero no puedo resolverlo cómo usar el formulario cakephp helper para que funcione correctamente y para que el nombre sea correcto. (obviamente, $ form helper es php, así que no puedo generar nada con eso después de que el navegador se haya cargado).

Soy nuevo en el pastel y nunca he usado jQuery, y estoy absolutamente perplejo con la forma de hacerlo, así que si alguien tiene un ejemplo de cakephp que tiene funcionando o puede indicarme la dirección correcta de lo que necesito para completar esto, sería mucho apreciado.

Gracias por adelantado

Answer 1

Tomaría la ruta directa de jquery, personalmente. Supongo que podrías hacer que PHP genere el código para jquery para insertarlo (de esa manera podrías usar el helper de formularios), pero agrega complejidad sin obtener nada.

Como el asistente de formulario solo genera html, eche un vistazo al html que desea generar. Supongamos que quiere algo para "agregar otro campo", que al hacer clic en él, agregará otro campo en el html. Su html que se agregará será algo así como:

<input type="text" name="data[User][field][0]" />

Ahora, para usar jquery para insertarlo, haría algo así como vincular la función add_field al evento click en el enlace.

    $(document).ready( function() {
      $("#link_id").click( ''add_field'' );
      var field_count = 1;
    } );

    function add_field()
    {
      var f = $("#div_addfield");
      f.append( ''<input type="text" name="data[User][field]['' + field_count + '']" />'' );
      field_count++;
    }

Por supuesto, si un usuario deja esta página sin enviarla y regresa, pierde su progreso, pero creo que se trata de los conceptos básicos de lo que está tratando de lograr.

Answer 2

Este fue mi enfoque para eliminar elementos:

En la vista, tuve esto:

echo $form->input(''extrapicture1uploaddeleted'', array(''value'' => 0));

La lógica que seguí fue que el valor 0 significaba, aún no se eliminó, y el valor 1 significaba eliminado, siguiendo una lógica booleana.

Ese era un elemento de entrada normal, pero con CSS utilicé la propiedad ''display: none'' porque no quería que los usuarios lo vieran en el formulario. Entonces, lo que hice fue que los usuarios hicieron clic en el botón "Eliminar" para eliminar un elemento de entrada para cargar una imagen, había un mensaje de confirmación y, al confirmarlo, el valor del elemento de entrada oculto con CSS cambiaba de 0 a 1:

    $("#deleteextrapicture1").click(
    function() {
        if (confirm(''Do you want to delete this picture?'')) {
            $(''#extrapicture1upload'').hide();
            // This is for an input element that contains a boolean value where 0 means not deleted, and 1 means deleted.
            $(''#DealExtrapicture1uploaddeleted'').attr(''value'', ''1'');
        }
        // This is used so that the link does not attempt to take users to another URL when clicked.
        return false;
    }
);

En el controlador, la condición $ this-> data [''Deal''] [''extrapicture1uploaddeleted'']! = ''1'' significa que la imagen adicional 1 no se ha eliminado (eliminando el botón de carga con JavaScript). $ this-> data [''Deal''] [''extrapicture1uploaddeleted''] == ''1'' significa que la imagen fue eliminada.

Traté de usar un elemento oculto de entrada y cambiar su valor con JavaScript de la manera que expliqué arriba, pero estaba obteniendo un error de agujero negro de la Seguridad de CakePHP. Aparentemente no me permitía cambiar el valor de los elementos de entrada con JavaScript y luego enviar el formulario. Pero cuando utilicé elementos de entrada regulares (no ocultos), pude cambiar sus valores con JavaScript y enviar el formulario sin problemas. Mi enfoque era utilizar elementos de entrada regulares y ocultarlos con CSS, ya que el uso de elementos ocultos de entrada arrojaba el error de agujero negro al cambiar sus valores con JavaScript y luego enviar el formulario.

Afortunadamente, la forma en que lo hice podría dar algo de luz como un posible enfoque para eliminar campos de formulario en CakePHP usando JavaScript.