Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Colocar checkboxes sólo a elementos nuevos

 Estas en el tema de Colocar checkboxes sólo a elementos nuevos en el foro de Frameworks JS en Foros del Web. Tengo unos cuadros de lista que incluyen checkboxes. Cuando se marcan, los cuadros son eliminados si se hace clic al botón Eliminar. A su vez, ...
  #1 (permalink)  
Antiguo 12/02/2012, 09:37
Avatar de metacortex
Viejo demente
  
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 10 meses
Puntos: 832
Colocar checkboxes sólo a elementos nuevos
Tengo unos cuadros de lista que incluyen checkboxes. Cuando se marcan, los cuadros son eliminados si se hace clic al botón Eliminar.

A su vez, existe un campo de texto "Agregar" donde se añaden nuevos elementos separados por comas al hacer clic en "Actualizar".

Lo que quiero es que los cuadros existentes no incluyan checkboxes, sólo los nuevos que se agreguen.

Actualmente tengo configurado click() para que vacíe el contenedor y lo reemplace por los elementos que dicta el append() en el bucle. Sé que éste es el problema pero no tengo ni idea de cómo hacer que los elementos existentes se conserven tal cual. Si alguien me puede echar una mano se agradece.

Aquí dejo lo que se ha hecho hasta ahora (puede pegarse directamente):

Código Javascript: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Prueba Sortable</title>
  6. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
  9. <style type="text/css">
  10. body {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; coloer: #444}
  11. #sortable { list-style-type: none; margin: 0; padding: 0; width: 700px; }
  12. #sortable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
  13. .input {width: 600px; padding: 3px; font-family: Lucida Console; font-size: 12px; color: #444; }
  14. .demo-description {clear: both;}
  15. </style>
  16. <script type="text/javascript">
  17. jQuery(document).ready(function($){
  18.  
  19.     function interseccion( texto1 , texto2 ) {
  20.             array1 = texto1.split(",");
  21.             $.each(texto2.split(",") , function (ind , valor) {
  22.                 if (array1.indexOf(valor) == -1)
  23.                     array1.push(valor);
  24.             });
  25.         return array1;
  26.     }
  27.  
  28.     $("#wpsi_res_submit").click(function() {
  29.         $( "#sortable" ).empty();
  30.  
  31.         var valor2 = '';
  32.         var inter = interseccion($("#wpsi_res_img1").val() , $("#wpsi_res_img2").val());
  33.  
  34.         for (i = 0; i < inter.length; i++) {
  35.             $( "#sortable" ).append('<li class="ui-state-default" id="li-' + inter[i] + '">' + inter[i] + ' <input type="checkbox" class="check" id="eliminar-' + inter[i] + '" /><\/li>');
  36.  
  37.             valor2 += inter[i];
  38.  
  39.             if (i < inter.length - 1) {
  40.                 valor2 += ',';
  41.             }
  42.         }
  43.  
  44.         $('#wpsi_res_img1').val(valor2);
  45.         $('#wpsi_res_img2').val('');
  46.     });
  47.  
  48.     $("#sortable").sortable({
  49.         update: function() {
  50.             var wpsi_pos = [];
  51.             $('#sortable > li').each(function(i) {
  52.                 wpsi_pos[i] = $(this).attr('id').replace('li-' , '');
  53.             });
  54.  
  55.             $('#wpsi_res_img1').val(wpsi_pos.toString());
  56.         }
  57.     });
  58.  
  59.     $("#wpsi_res_delete").click(function () {
  60.         $('.check:checked').parent().empty().remove();
  61.             var wpsi_pos2 = [];
  62.             $('#sortable > li').each(function(i) {
  63.                 wpsi_pos2[i] = $(this).attr('id').replace('li-' , '');
  64.             });
  65.  
  66.             $('#wpsi_res_img1').val(wpsi_pos2.toString());
  67.  
  68.     });
  69.  
  70. });
  71. </script>
  72. </head>
  73. <body>
  74. <div class="demo-description">
  75.     <p>Orden de lista: <input type="text" name="wpsi-res-img1" id="wpsi_res_img1" class="input" value="1,2,3,4,5,6,7,8,9,10,11,12" /></p>
  76.     <p>Agregar: <input type="text" name="wpsi-res-img2" id="wpsi_res_img2" class="input" /></p>
  77.     <p><input type="submit" name="wpsi-res-submit" id="wpsi_res_submit" value="Actualizar" /></p>
  78.     <p><input type="submit" name="wpsi-res-delete" id="wpsi_res_delete" value="Eliminar cuadro" /></p>
  79. </div>
  80. <div class="demo">
  81.     <ul id="sortable">
  82.         <li class="ui-state-default" id="li-1">1</li>
  83.         <li class="ui-state-default" id="li-2">2</li>
  84.         <li class="ui-state-default" id="li-3">3</li>
  85.         <li class="ui-state-default" id="li-4">4</li>
  86.         <li class="ui-state-default" id="li-5">5</li>
  87.         <li class="ui-state-default" id="li-6">6</li>
  88.         <li class="ui-state-default" id="li-7">7</li>
  89.         <li class="ui-state-default" id="li-8">8</li>
  90.         <li class="ui-state-default" id="li-9">9</li>
  91.         <li class="ui-state-default" id="li-10">10</li>
  92.         <li class="ui-state-default" id="li-11">11</li>
  93.         <li class="ui-state-default" id="li-12">12</li>
  94.     </ul>
  95. </div>
  96. </body>
  97. </html>
  #2 (permalink)  
Antiguo 13/02/2012, 03:59
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 1 mes
Puntos: 192
Respuesta: Colocar checkboxes sólo a elementos nuevos
Espero haber entendido: http://jsbin.com/urayan

Código HTML: 
Ver original
  1. <script type="text/javascript">
  2. jQuery(document).ready(function($){
  3.  
  4. //    function interseccion( texto1 , texto2 ) {
  5. //            array1 = texto1.split(",");
  6. //            $.each(texto2.split(",") , function (ind , valor) {
  7. //                if (array1.indexOf(valor) == -1)
  8. //                    array1.push(valor);
  9. //            });
  10. //        return array1;
  11. //    }
  12.  
  13. //differencia en lugar de interseccion
  14. Array.prototype.diff = function(a) {
  15.     return this.filter(function(i) {return !(a.indexOf(i) > -1);});
  16. };
  17.  
  18.     $("#wpsi_res_submit").click(function() {
  19.         //$( "#sortable" ).empty();                                 // no vaciar!
  20.  
  21.         var input_1 = $('#wpsi_res_img1');                          //almacenar los inputs en variables
  22.         var input_2 = $('#wpsi_res_img2');                          //almacenar los inputs en variables
  23.         
  24.         var valor2 = '';
  25.         
  26.         var val_arr1 = input_1.val().split(',');        //calcular la diferencia
  27.         var val_arr2 = input_2.val().split(',');        //calcular la diferencia
  28.         var inter = val_arr2.diff(val_arr1);            //calcular la diferencia
  29.         
  30.         console.log(inter);                             //debug
  31.         console.log(inter.length);                      //debug
  32.         
  33.         for (i = 0; i < inter.length; i++) {
  34.             //agregar solo los que son nuevos
  35.             $( "#sortable" ).append('<li class="ui-state-default" id="li-' + inter[i] + '">' + inter[i] + ' <input type="checkbox" class="check" id="eliminar-' + inter[i] + '" /><\/li>');
  36.  
  37.             valor2 += inter[i];
  38.  
  39.             if (i < inter.length - 1) {
  40.                 valor2 += ',';
  41.             }
  42.         }
  43.  
  44.         input_1.val(input_1.val() + ',' + valor2);                          //en lugar de borrar todo, agregar solo los nuevos
  45.         input_2.val('');
  46.     });
  47.  
  48.     $("#sortable").sortable({
  49.         update: function() {
  50.             var wpsi_pos = [];
  51.             $('#sortable > li').each(function(i) {
  52.                 wpsi_pos[i] = $(this).attr('id').replace('li-' , '');
  53.             });
  54.  
  55.             $('#wpsi_res_img1').val(wpsi_pos.toString());
  56.         }
  57.     });
  58.  
  59.     $("#wpsi_res_delete").click(function () {
  60.         $('.check:checked').parent().empty().remove();
  61.             var wpsi_pos2 = [];
  62.             $('#sortable > li').each(function(i) {
  63.                 wpsi_pos2[i] = $(this).attr('id').replace('li-' , '');
  64.             });
  65.  
  66.             $('#wpsi_res_img1').val(wpsi_pos2.toString());
  67.  
  68.     });
  69.  
  70. });
  71. </script>

Comenté los cambios para que puedas entender lo que hice :P
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 13/02/2012, 04:02
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 1 mes
Puntos: 192
Respuesta: Colocar checkboxes sólo a elementos nuevos
Encontré dos problemas con mi código que los dejo para que los sluciones vos, son sencillos:

* Se agrega una caja en blanco si no se pone nada en el input "Agregar".
* Por consecuencia del error anterior, si ahora agregamos una caja nueva, en el input de arriba el último valor aparece separado por dos comas.
__________________
nahueljose.com.ar

Etiquetas: ajax, checkboxes, elementos, html, input, javascript, jquery, js, nuevos
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:51.