CODEWITHSUNDEEP
jqueryajax
Rodolfo
Rodolfo

Reputation: 105

Submitting via jquery-ajax a form generated among an uncertained number of other forms via php

I generate several forms through a php loop like this: 

for($i=0 ; $i<count($recibidos) ; $i++){  
    $remitente = consultav2("SELECT * FROM mensajes JOIN ".$recibidos[$i]['u_remitente']." ON mensajes.remitente = ".$recibidos[$i]['u_remitente'].".id_".$recibidos[$i]['u_remitente']."
                                                    WHERE mensajes.id_mensaje = '".$recibidos[$i]['id_mensaje']."';");
    echo"
        <tr>
            <form id='recibido".$i."'>
            <td>".$remitente[0]['nombre']." ".$remitente[0]['apellidos']."</td><td>".$remitente[0]['asunto']."</td>
            <td>".$remitente[0]['fecha_mensaje']."</td><td><input type='submit' value='Leer' /></td>
            <input type='hidden' name='accion' value='leer' />
            <input type='hidden' name='id_mensaje' value='".$remitente[0]['id_mensaje']."' />
            </form>
        </tr>
    ";

}

The resulting form amount is uncertain. The problem is that I want any form to get submitted via jquery-ajax when clicking on the corresponding submit button but I'm having problems in the jquery part. My not working proposal is like this... 

$('[id=^recibido]').each(function(index, value){
  $(this).submit(function(){

    var datos = $(this).serialize();
    $.ajax({
        url: 'private/control_correo.php',
        type: 'post',
        data: datos,
        success: function(respuesta){
            $('#mostrar_mensaje').html(respuesta).show();
        },
        error: function(){
            $('#mostrar_mensaje').html('Error al intentar leer el mensaje').show();
        }
    });
    return false;
  });

});

Can anyone see any problem in my jquery code? I would appreciate any help.
Thanks in advance!

Upvotes: 0

Views: 80

Answers (2)

PlantTheIdea
PlantTheIdea

Reputation: 16359

You may just want to try optimizing it a bit. First, give your php-generated items a class:

<form id='recibido".$i."' class="recibidoForm">

Then, get rid of the unnecessary .each and just use .on()

$('.recibidoForm').on('submit',function(e){
    var datos = $(this).serialize(),
        $mostrar_mensaje = $('#mostrar_mensaje');

    e.preventDefault();

    $.ajax({
        url: 'private/control_correo.php',
        type: 'post',
        data: datos,
        success: function(respuesta){
            $mostrar_mensaje.html(respuesta).show();
        },
        error: function(){
            $mostrar_mensaje.html('Error al intentar leer el mensaje').show();
        }
    });
});

This should do what you want, and be far less overhead. Also, using a class selector like this is far more efficient that using an attribute selector.

Upvotes: 1

bipen
bipen

Reputation: 36531

your attribute selector is incorrect...=^

$('[id=^recibido]').each(function(index, value){
//-----^^--here

it should be ^= jQuery( "[attribute^='value']" )

$('[id^="recibido"]').each(function(index, value){

and you don't need each function here..just

$('[id^="recibido"]').submit(function(){
  var datos = $(this).serialize();
    .......
   return false;
});

should work

Upvotes: 1

Related Questions