Tengo un codigo COPY&PASTE que necesito modificar y no entiendo Jquery.

SirDuque · #1 (**permalink**) 02/02/2011, 16:06

Hola chicos, tengo un codigo que usa libreria Jquery-1.4.1.min
este codigo CREA otra fila renombrando los campos 1,2,3,4,5,6,7,8, etc...
actualmente lo estoy usando en un form de venta...

AHORA... funciona 10 puntos, perooooooo tengo que hacer clic en un link para que cree los campos, y yo lo necesito en un EVENTO por ejemplo en onFocus=""

Les dejo unas fotos y los codigos...

codigo HTML

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=latin1" />
<!-- Inicio de Scripts -->
<script type="text/javascript" src="./venta/ajax_framework.js"></script>
<script src="shortcuts.js" type="text/javascript"></script>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="newcam.js" type="text/ecmascript"></script>
<script language="javascript" src="script.js"></script>
<script>
function totalll(){
var cont = 0;
for (var i=9, campo = document.forms[0]; i<campo.elements.length ; i+=7){
              if(campo.elements[i].value != "" || campo.elements[i].value != 0){
                       cont= cont + parseInt(campo.elements[i].value);
               }
}
document.forms[0].total5.value=cont;
}
</script>
<!-- Fin Scripts inicio Style Maestro -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
 
<BODY style="background-color: transparent;"  >
<form action="venta_.php" name="venta" method="post">
<div align="center">
  <table width="830" border="1">
  <tr class="fuentea">
    <td width="844">F/Pago
      :
      <select name="fp" id="fp">
        <option value="0" selected="selected"><strong>C/C</strong></option>
        <option value="1">EF</option>
      </select>
      <br />
      <br />
      Socio N&ordm;:
      <input name="socio" id="socio" type="text" onKeyUp="javascript:autosuggest()" autocomplete="off"/>
      <div id="results"> </div>    Nombre y Apellido: 
      <input type="text" name="nombre" id="nombre" size="45"/>
      <br />
      </label>
      <table width="100%">
        <tr>
          <td width="8%"><div align="left">Cant.</div></td>
          <td width="15%"><div align="center">C&oacute;digo</div></td>
          <td width="53%"><div align="center">Descripci&oacute;n del producto</div></td>
          <td width="13%"><div align="right">P./Unidad</div></td>
          <td width="11%"><div align="center">Total</div></td>
        </tr>
        <table width="100%">
 
 
    <tr>
    <td><a onClick="id1.value='';subt1.value='0';can1.value='';cod1.value='';des1.value='';uni1.value='0';ppp1.value='';totalll(); document.venta.can1.focus()"href="#" class="fuentea" >(-) </a>
    <input type="text" name="can1"  id="can1" size="2" maxlength="2" autocomplete="off" onFocus="nextfield ='cod1';" onKeyPress="return numbersonly(this, event)"/>    </td><td>
    <input name="cod1" type="text" id="cod1" size="14" maxlength="13" autocomplete="off"  onKeyDown="buscar(this);return numbersonly(this, event)" onFocus="nextfield ='des1';"/>
    </td><td>
    <input name="des1" type="text" id="des1" size="55" maxlength="50" autocomplete="off" onFocus="nextfield ='can2';completar(cod1,uni1,des1,id1,ppp1);sumar(can1,uni1,subt1); totalll(); jump(can2);" readonly="readonly"/> 
    <input type="hidden" name="ppp1" id="ppp1"/><input type="hidden" name="id1" id="id1" />
    </td><td>
    <input name="uni1" type="text" id="uni1" size="6" maxlength="4" autocomplete="off" value="0" readonly="readonly"/>
    </td><td>
    <input name="subt1" type="text" id="subt1" value="0" size="6" maxlength="5" readonly="readonly" autocomplete="off"/>
    </td></tr>
     <tr id="mascampos"><a href="#">CLIC AQUI PARA CREAR MAS CAMPOS</a></tr>
     <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input type="text" name="total5" id="total5" size="6" value="0" autocomplete="off" readonly="readonly"/></td>
  </tr>
</table>
      </table>
 
      <div align="right">
        <input type="reset" name="cancel" id="cancel" value="Cancelar" />
        <input type="submit" name="done" value="Emitir">
        <br />
      </div></td>
  </tr>
</table>
 
 
</div>
</form>
 
<p>&nbsp;</p>
 
</body>
</html>

el JS que genera los nuevos campos:
newcam.js

Código Javascript:

Ver originaljQuery.fn.generaNuevosCampos = function(indice){
        $(this).each(function(){
            elem = $(this);
            elem.data("indice",indice);
            
            elem.click(function(e){
                e.preventDefault();
                elem = $(this);
                indice = elem.data("indice");
                var nextindice;
                var tilde;
                tilde="'";
                nextindice= indice + 1;
      texto_insertar ='ak genero el CODIGO de los campos a agregar';
                indice ++;
                elem.data("indice",indice);
                nuevo_campo = $(texto_insertar);
                elem.before(nuevo_campo);
            });
        });
        return this;
    }
    $(document).ready(function(){
        $("#mascampos").generaNuevosCampos(2);
});

Código HTML:

Ver original"......
 
 
     <tr id="mascampos"><a href="#">CLIC AQUI PARA CREAR MAS CAMPOS</a></tr>
 
...."

como ven donde esta la leyenda y donde aparece en la imagen, lo que quiero sacar es esto:

"....<a href="#">CLIC AQUI PARA CREAR MAS CAMPOS</a>....."

y agregar un evento onFocus="" en uno de los campos.

de verdad agradesco a todos por tomarce unos min en leer..

quike88 · #2 (**permalink**) 02/02/2011, 16:21

en newcam.js debes cambiar este código:

Código Javascript:

Ver original$("#mascampos").generaNuevosCampos(2);

por algo así:

Código Javascript:

Ver original$("#idcampo").focus(generaNuevosCampos(2));

donde idcampo es el id del objeto al que le quieres añadir el evento onfocus.

Saludos.

SirDuque · #3 (**permalink**) 02/02/2011, 16:29

Quike88 y que pongo en el onfocus ???

quike88 · #4 (**permalink**) 03/02/2011, 07:36

que tal SirDuque,

esta linea

Código PHP:

Ver original$("#idcampo").focus(generaNuevosCampos(2));

agrega el evento onfocus a cualquier elemento (con el id=idcampo en este caso), y hace que se ejecute la función generaNuevosCampos(2) cada que ocurre dicho evento.

http://api.jquery.com/focus/

Saludos.

SirDuque · #5 (**permalink**) 03/02/2011, 12:41

Hola quike88, bueno puse como dijiste y no me funciono, lei el link, muy interesante, pero creo que ese script es para jquery 1.5 yo uso uno mas viejo, igual mas o menos entendi como funciona, con los ejemplos que me diste.

Te hago una pregunta, puedo hacer de este Jquery una simple funcion?
para poder ejecutarlo con un:

onFocus="generaNuevosCampos(2)"
onKeyPress="generaNuevosCampos(2)"

en cualquier lado, no en X lugar.. ya que necesito hacer como un bucle, dentro de los campos que este script crea. necesito que este el evento para que siga creando

SirDuque · #6 (**permalink**) 10/02/2011, 18:14

Chicos, por favor, necesito convertir esta herramienta en un simple evento.

En el HTML esta el tr:

Cita:

<tr id="mascampos"><a href="#">CLIC AQUI PARA CREAR MAS CAMPOS</a></tr>

quiero que el tr quede haci:

Cita:

y que poniendo como evento:

onFocus="generaNuevosCampos(2)"
onKeyPress="generaNuevosCampos(2)"

cree las nuevas tablas en el TR

Cita:

Gracias