Dos Funciones de JavaScript

danramglez · #1 (**permalink**) 24/10/2012, 07:56

Código HTML:

Ver original<html>
    <head> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
 
                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
 
                // manipulate the name/id values of the input inside the new element
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
 
                // insert the new element after the last "duplicatable" input field
                $('#input' + num).after(newElem);
 
                // enable the "remove" button
                $('#btnDel').attr('disabled','');
 
                // business rule: you can only add 10 names
                if (newNum == 10)
                    $('#btnAdd').attr('disabled','disabled');
            });
 
            $('#btnDel').click(function() {
                var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                $('#input' + num).remove();     // remove the last element
 
                // enable the "add" button
                $('#btnAdd').attr('disabled','');
 
                // if only one element remains, disable the "remove" button
                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');
            });
 
            $('#btnDel').attr('disabled','disabled');
        });
    </script>
 
     
        <meta charset="utf-8" />    
        <title>Ejemplo</title>   
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />  
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>  
        <link rel="stylesheet" href="/resources/demos/style.css" />  
          <script>   
          $(function() {    
          var availableTags = [    
          "ActionScript",       
          "AppleScript",    
          "Asp",      
          "BASIC",       
          "C",      
          "C++",     
          "Clojure",     
          "COBOL",       
          "ColdFusion",
          "Daniel",
          "Mary",   
          "Erlang",        
          "Fortran",     
          "Groovy",     
          "Haskell",   
          "Java",     
          "Berletzis", 
          "Xml", 
          "web", 
          "Lisp",     
          "Perl",      
          "PHP",      
          "Python",   
          "Ruby",     
          "Scala",       
          "Scheme"  
          ];  
              function split( val ) {           
              return val.split( /,\s*/ );        }    
              function extractLast( term ) {        
              return split( term ).pop();       
          }      
           $( "#name" )      
          // don't navigate away from the field on tab when selecting an item         
          .bind( "keydown", function( event ) {          
          if ( event.keyCode === $.ui.keyCode.TAB &&      
          $( this ).data( "autocomplete" ).menu.active ) {   
          event.preventDefault();                }            })    
          .autocomplete({                minLength: 0,               
          source: function( request, response ) {                
          // delegate back to autocomplete, but extract the last term    
          response( $.ui.autocomplete.filter(             
          availableTags, extractLast( request.term ) ) );                },      
          focus: function() {                 
          // prevent value inserted on focus          
          return false;                },        
          select: function( event, ui ) {              
          var terms = split( this.value );   
          // remove the current input                
          terms.pop();                 
          // add the selected item            
          terms.push( ui.item.value );             
          // add placeholder to get the comma-and-space at the end   
          terms.push( "" );                    this.value = terms.join( ", " );    
          return false;                }            });    });   
          </script>
         
    </head>
 
<body>
 
<form id="myForm">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        Nombre:<p class="ui-widget"><label for="name"> <input type="text" class="text" name="name"value="<?php if (isset($posted['name'])) echo $posted['name']; ?>" id="name" /></label>
    <div>
        <input type="button" id="btnAdd" value="Agregar otro nombre" />
        <input type="button" id="btnDel" value="Eliminar nombre" />
    </div>
</form>
 
</body>
</html>

Buen dia podrian ayudarme con estas dos funciones de JavaScript quiero que me agregue un campo nuevo y tambien que lo autocomplete pero no puede hacer las dos gracias por su ayuda

emprear · #2 (**permalink**) 24/10/2012, 08:07

Agregá un doctype válido y funciona

danramglez · #3 (**permalink**) 24/10/2012, 08:10

Y cual seria un doctype valido ? gracias

emprear · #4 (**permalink**) 24/10/2012, 08:40

Cita:

Iniciado por danramglez

Y cual seria un doctype valido ? gracias

Tu pregunta sorprende, ¿como podés estar haciendo una página que involucra un javascrip complejo, jQuery, php y no tener idea de que es o cual es la función de un doctype?

http://es.wikipedia.org/wiki/Declara...o_de_documento

danramglez · #5 (**permalink**) 24/10/2012, 10:13

Ahhh te referias a eso, no t habia entendido

marlanga · #6 (**permalink**) 24/10/2012, 11:26

Eso del doctype está muy bien si quieres pasar el 3wc validator, pero si lo que de verdad quieres es que funcione tu código, mira estos cambios:

Código HTML:

Ver original<html>
    <head> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
        <meta charset="utf-8" />    
        <title>Ejemplo</title>   
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />  
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>  
        <link rel="stylesheet" href="/resources/demos/style.css" />  
          <script>     
          var availableTags = [    
          "ActionScript",       
          "AppleScript",    
          "Asp",      
          "BASIC",       
          "C",      
          "C++",     
          "Clojure",     
          "COBOL",       
          "ColdFusion",
          "Daniel",
          "Mary",   
          "Erlang",        
          "Fortran",     
          "Groovy",     
          "Haskell",   
          "Java",     
          "Berletzis", 
          "Xml", 
          "web", 
          "Lisp",     
          "Perl",      
          "PHP",      
          "Python",   
          "Ruby",     
          "Scala",       
          "Scheme"  
          ];  
          function split( val ) {           
          return val.split( /,\s*/ );        }    
          function extractLast( term ) {        
          return split( term ).pop();       
          }
            function focusear(nodo){
            nodo.bind( "keydown", function( event ) {          
              if ( event.keyCode === $.ui.keyCode.TAB &&      
              $( this ).data( "autocomplete" ).menu.active ) {   
              event.preventDefault();                }            }).
              autocomplete({                minLength: 0,               
              source: function( request, response ) {                
              // delegate back to autocomplete, but extract the last term    
              response( $.ui.autocomplete.filter(             
              availableTags, extractLast( request.term ) ) );                },      
              focus: function() {                 
              // prevent value inserted on focus          
              return false;                },        
              select: function( event, ui ) {              
              var terms = split( this.value );   
              // remove the current input                
              terms.pop();                 
              // add the selected item            
              terms.push( ui.item.value );             
              // add placeholder to get the comma-and-space at the end   
              terms.push( "" );                    this.value = terms.join( ", " );    
              return false;                }            });
              
          }
            
 
        $(function() {
            $('#btnAdd').click(function() {
                var num     = $('.name').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
 
                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('<input type="text" class="text name" name="name" value="" />').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
 
                // insert the new element after the last "duplicatable" input field
                $('#name' + num).after(newElem);
 
                // enable the "remove" button
                $('#btnDel').removeAttr('disabled');
 
                // business rule: you can only add 10 names
                if (newNum == 10)
                    $('#btnAdd').attr('disabled','disabled');
                    
                focusear(newElem);
            });
 
            $('#btnDel').click(function() {
                var num = $('.name').length; // how many "duplicatable" input fields we currently have
                $('#name' + num).remove();     // remove the last element
 
                // enable the "add" button
                $('#btnAdd').removeAttr('disabled');
 
                // if only one element remains, disable the "remove" button
                if (num == 2)
                    $('#btnDel').attr('disabled','disabled');
            });
 
            $('#btnDel').attr('disabled','disabled');
            
            focusear($("#name1"));  
        });
    </script>
         
    </head>
 
<body>
 
<form id="myForm">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        Nombre:<p class="ui-widget"><label for="name"> <input type="text" class="text name" name="name1" value="" id="name1" /></label>
    <div>
        <input type="button" id="btnAdd" value="Agregar otro nombre" />
        <input type="button" id="btnDel" value="Eliminar nombre" />
    </div>
</form>
 
</body>
</html>

No eliminabas bien el atributo "disabled" de los elementos.
Al clonar los elementos, además de clonar los botones innecesariamente, también clonabas los métodos del "autocomplementar", que darán problemas (por ejemplo, el FOCUS siempre te manda al focus del primer elemento, ya que has clonado sus métodos y eventos). Lo que hay que hacer es convertir el input:text en un autocompletar cada vez que se cree. No solo al principio.
Y otros fallos menores como tener separado código en común en dos scripts diferentes con sus propios ámbitos.

emprear · #7 (**permalink**) 24/10/2012, 11:43

Script original
http://foros.emprear.com/html/2f.html

Script original + con Doctype
http://foros.emprear.com/html/2fdoctype.html

Las dos funcionan, por ejemplo, en Chrome, Firefox, pero no funcionarán en IE sin el Doctype. Me limito a la generación de elementos y el "autocompletar"

Si bien no lo aclara, no me extrañaría que la haya visto en IE

Las estadísticas globales situan el uso de IE9/8 en un 20% aproximadamente, y en estadísticas regionalizadas ese número aumenta. Son porcentuales lo suficientemente grandes como para tenerlos en cuenta a la hora de diseñar.

marlanga · #8 (**permalink**) 24/10/2012, 11:49

En realidad, tus dos enlaces funcionan mal. O lo que es lo mismo, no funcionan. Prueba el que le puse y busca las diferencias.

Por suerte o por desgracia, la compaía donde trabajo y sus clientes ignorarn Internet Explorer en todas sus versiones, asi que no lo tengo en cuenta para hacer pruebas por costumbre.

marlanga · #9 (**permalink**) 24/10/2012, 11:52

--Mierda, doble post--

emprear · #10 (**permalink**) 24/10/2012, 12:21

Cita:

Iniciado por marlanga

En realidad, tus dos enlaces funcionan mal. O lo que es lo mismo, no funcionan. Prueba el que le puse y busca las diferencias.

Por suerte o por desgracia, la compaía donde trabajo y sus clientes ignorarn Internet Explorer en todas sus versiones, asi que no lo tengo en cuenta para hacer pruebas por costumbre.

Cita:

@danramglez:
me agregue un campo nuevo y tambien que lo autocomplete

Ambos objetivos se cumplen, con las limitaciones que observé antes, vaya a saber con que y como lo estás viendo

Cita:

@marlanga:
la compaía donde trabajo y sus clientes ignorarn Internet Explorer en todas sus versiones

esa es la política del aveztruz

marlanga · #11 (**permalink**) 24/10/2012, 12:54

Es mejor que la política del topo. Ambos objetivos no se cumplen, sólo tienes que probarlo.
Ahora dejemos que venga el usuario y que responda quién le ha resuelto el problema que tenía.

Mi compañía simplemente sigue los estándares. No hacemos páginas webs para la peluquería de la tía pepa.
Cuando a explorer le salga del pito seguirlos, funcionará. El 10 parece que será el primero donde explorer no se pase los estándares de la W3C por el forro. Aunque seguirá sin soportar webGL, y los websockets veremos a ver a qué nivel.