Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 9 de 9

Tema: Jquery

  1. #1
    Recien Llegado! Habitual
    Fecha de Ingreso
    18 oct, 14
    Mensajes
    10
    Poder de Reputación
    5

    Jquery

    Buenas noches!
    Quisiera hacer una consulta sobre id dinamico, tengo una tabla en mysql la cual imprimo y cada consulta la pongo dentro de un formulario para enviar datos a otra pagina..

    while($reg=mysqli_fetch_array($registro1)){
    echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
    echo "
    <tr>
    <td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
    <td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
    <td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>
    </tr>";
    echo "</form>";

    los datos los envio a travez de ajax, para que no me recargue la pagina. Hasta ahi todo perfecto... lo que necesito ahora es que cada vez que envie el formulario me oculte el boton agregar correspondiente a esa parte de la tabla. Pero no puedo.. busque dos formas:

    $(document).ready(function() {
    $().ajaxStart(function() {
    $('#loading').show();
    $('#result').hide();
    }).ajaxStop(function() {
    $('#loading').hide();
    $('#result').fadeIn('slow');
    });
    $('#form, #fat, #fo3').submit(function() {
    $.ajax({
    type: 'POST',
    url: 'pedido.php',
    data: $(this).serialize(),
    success: function(data) {
    //este seria el codigo que borra el boton pero que no lo hace
    $('input[id^="enviar"]').click(function(){
    var id = $(this).css('display','none');
    });

    }
    })
    return false;
    });
    })

    y la otra es esta:

    $(document).ready(function() {
    $().ajaxStart(function() {
    $('#loading').show();
    $('#result').hide();
    }).ajaxStop(function() {
    $('#loading').hide();
    $('#result').fadeIn('slow');
    });
    $('#form, #fat, #fo3').submit(function() {
    $.ajax({
    type: 'POST',
    url: 'pedido.php',
    data: $(this).serialize(),
    success: function(data) {
    $('input[id^="enviar"]').click(function(){
    var id = $(this).css('display','none');
    });

    }
    })
    return false;
    });
    //lo coloco fuera del success, lo que sucede es que si apreto el boton me lo oculta aunque no se haya completado el formulario
    $('input[id^="enviar"]').click(function(){
    var id = $(this).css('display','none');
    });

    })

    que estaria haciendo mal o que me faltaria?

    muchas gracias

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    Hola!

    Primero que nada, los id de las etiquetas deben ser únicos; si quieres repetir un identificador, usa una clase.

    Código HTML:
    <form id="form-unico" class="grupo-form">
    </form>
    
    <form class="grupo-form">
    </form>
    
    <form class="grupo-form">
    </form>
    
    <form class="grupo-form">
    </form>
    Esto es importante por dos motivos:

    1.- Validación del HTML. Para que tu código cumpla con los estándares de la W3.
    2.- Porque te ayudará cuando necesites aplicar CSS y Javascript a ciertos elementos o a todos.

    Usualmente las etiquetas (<a>, <form>, etc.) se les asigna un id único y además una clase (class).

    El problema con tu código es que estás escondiendo el botón después de que se ha enviado el formulario pero luego de que se ha presionado, por lo que el botón se tendría que presionar nuevamente para que se escondiera.

    Una forma de hacer lo que quieres es esta:

    Código:
    // Según lo que mencioné anteriormente, deberías cambiar form id='form' por form class='form' y hacer referencia utilizando un punto: .form
    $('#form, #fat, #fo3').submit(function(e) {
      e.preventDefault();
      $this = $(this); // $(this) hace referencia al formulario que se envió y necesitas guardarlo en una variable porque dentro de $.ajax, 
                            // $(this) hará referencia a la función que se ejecuta y no al formulario que se envió.
    
      $.ajax({
        type: 'POST',
        url: 'pedido.php',
        data: $(this).serialize(),
        success: function(data) {
          // Aquí seleccionas el input con type igual a submit y lo escondes (yo lo eliminaría si es que no modifica el diseño:
          // $this.find("input[type='submit']").remove();
          $this.find('input[type=submit]').css('display', none);
        }
      });
    });
    Espero que te sirva :)

  3. #3
    Recien Llegado! Habitual
    Fecha de Ingreso
    18 oct, 14
    Mensajes
    10
    Poder de Reputación
    5
    Hola! Como estas? Muchas gracias por responder...
    hice los cambios, en el form le agregue class="form" y luego en el ajax tambien y quedo asi:

    $('.form, #fat, #fo3').submit(function(e) {
    e.preventDefault();
    $this = $(this);
    $.ajax({
    type: 'POST',
    url: 'pedido.php',
    data: $(this).serialize(),
    success: function(data) {
    $this.find('input[type=submit]').css('display', none);
    }
    })
    pero no me lo oculta... de todas maneras seguire probando y lo publico.. muchas gracias!!!

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    La consola del navegador dice algo? Mira este post para que sepas cómo utilizarla: http://www.comocreartuweb.com/consul...zar-la-consola

  5. #5
    Recien Llegado! Habitual
    Fecha de Ingreso
    18 oct, 14
    Mensajes
    10
    Poder de Reputación
    5
    Me fije en la consola de errores y me sale el error en la linea "$this.find('input[type=submit]').css('display', none);" y dice esto: "Uncaught ReferenceError: none is not defined"

  6. #6
    Recien Llegado! Habitual
    Fecha de Ingreso
    18 oct, 14
    Mensajes
    10
    Poder de Reputación
    5
    Bueno el error es que none estaba sin comillas simples dentro de css: $this.find('input[type=submit]').css('display', 'none');
    igual no me lo oculta, pero me tira el siguiente error: Failed to load resource: net::ERR_CACHE_MISS, igual este mensaje ya me aparecia antes.. ahora no me tira ningun error pero no lo oculta
    Última edición por diegoxxiii; 01/12/2014 a las 18:16

  7. #7
    Recien Llegado! Habitual
    Fecha de Ingreso
    18 oct, 14
    Mensajes
    10
    Poder de Reputación
    5
    Bueno he dado con el resultado al menos por ahora, je, lo seguire probando... al codigo que me pasaste le agrege $this.parent().find("input[type=submit]").hide();
    Lo busque por otro foro... de JQuery nose mucho, y veo que tengo que ponerme a estudiar sobre el tema.. una vez agregado eso lo que hice fue cambiar las etiquetas <tr> de lugar y las puse por encima del <form>...
    antes estaban asi:
    while($reg=mysqli_fetch_array($registro1)){
    echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
    echo "
    <tr>
    <td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
    <td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
    <td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>
    </tr>";
    echo "</form>";
    ahora:

    while($reg=mysqli_fetch_array($registro1)){
    echo "<tr>";
    echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
    echo "

    <td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
    <td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
    <td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>";
    echo "</form>";echo</tr>";
    Porque haria eso, porque lo que buscaba es el submit despues de la clase .form pero pero el submit que estaba dentro de la etiqueta <td> no es hijo de .form es hizo de <tr> por ende tenia que poner el <td> como hijo de .form... quedand

    $(document).ready(function() {
    $().ajaxStart(function() {
    $('#loading').show();
    $('#result').hide();
    }).ajaxStop(function() {
    $('#loading').hide();
    $('#result').fadeIn('slow');
    });
    $('.form').submit(function(e) {
    e.preventDefault();
    $this = $(this);
    $.ajax({
    type: 'POST',
    url: 'pedido.php',
    data: $(this).serialize(),
    success: function(data) {
    $('#agregado').show(1000);
    setTimeout(function() {
    $("#agregado").fadeOut(1500);
    },2000);
    $this.parent().find('input[class^="agregar"]').hide();
    }
    })
    return false;
    });
    })
    Como dije no soy un especializado en el tema de jquery asique si llegase a estar mal explicado y alguien lo puede explicar mejor estaria bueno que lo explique, este fue mi razonamiento desde mi logica.. jeje
    Asi logro ocultar el boton

    Muchas gracias por la ayuda y por el tiempo..

    Saludos!!

  8. #8
    Recien Llegado! Habitual
    Fecha de Ingreso
    18 oct, 14
    Mensajes
    10
    Poder de Reputación
    5

  9. #9
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    Me alegro que lo hayas solucionado :).

    Igualmente quería explicar algo.

    El input submit, si bien no es hijo directo del form (hablando en el primer caso), sí es un descendiente del mismo. Esto es lo mismo que un árbol genealógico, donde html es nuestro primer antepasado, head y body son los hijos y ambos tienen descendencia distinta (head -> meta, style, link, title, etc.; body -> form, a, input, div, p, etc.).

    jQuery, y los selectores CSS (jQuery utiliza los selectores CSS mayoritariamente), pueden encontrar los elementos dentro de otro sin importar la profundidad (cantidad de padre o descendientes):

    Código:
    <form id="miform">
      <div class="uno">
        <div class="dos">
          <div class="tres">
            <div class="cuatro">
              <input type="submit" />
            </div>
          </div>
        </div>
      </div>
    </form>
    
    jQuery(document).ready(function($) {
      // Asumiendo que sólo hay un input dentro del form
      console.log('Input: ' + $('#miform').find('input[type="submit"]'));
      console.log('Si sólo hay un form con un input: ' + $('form input'));
      // En realidad si hay más de un form o un input, jQuery devolverá un array con los elementos seleccionados en lugar de sólo uno.
    });

Temas Similares

  1. jQuery
    Por mldonna en el foro Foro General
    Respuestas: 0
    Último Mensaje: 17/08/2014, 16:30
  2. Dropdown con jQuery
    Por Doodleo en el foro Curso de jQuery
    Respuestas: 6
    Último Mensaje: 13/06/2014, 04:26
  3. ayuda con jquery
    Por pelaoloco en el foro Curso de jQuery
    Respuestas: 3
    Último Mensaje: 13/08/2012, 18:32
  4. Galerías en Jquery
    Por GazzD en el foro Curso de jQuery
    Respuestas: 1
    Último Mensaje: 29/05/2012, 00:16
  5. mas informacion jquery
    Por jacob en el foro Curso de jQuery
    Respuestas: 2
    Último Mensaje: 20/12/2011, 21:02

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •