jquery - Ajax within an each() method

Question

I have three scripts

The first one dynamically generates a form that contain several inputs whose values contain the id_mensaje I'm intereted in. I want to delete the mysql registries related to the id_mensaje. I'd rather show you the scripts

1.- correo.php

<div id='eliminar_mensaje'><a href='#'>Eliminar</a> </div>      
<form>  
<input class='elim_msg' type='checkbox' value='id_mensaje_".$i."' />  

...  more inputs whith same class name

</form>    

2.- correo.js

$('#eliminar_mensaje a').on('click', function(){  
    $('#loading').show();  
    $('.elim_msg').each(function(i,e){  
        var value = $(e).val();  
        var checked = $(e).prop('checked');  
        if(value != 'ok' && checked == true){  
            $.ajax({  
                url: 'private/control_correo.php',  
                type: 'POST',  
                data: 'id_mensaje='+value+'&accion=eliminar_mensaje'  
            });  
        } else {  
            //do nothing  
        }  
    });  
    location.reload(true);  
    return false;  
});  

3.- control_correo.php

...} else if(isset($_POST['accion']) AND $_POST['accion'] == 'eliminar_mensaje'){  
        consultav2("DELETE FROM destinatarios WHERE id_mensaje = '".$_POST['id_mensaje']."';");    
        consultav2("DELETE FROM mensajes WHERE id_mensaje = '".$_POST['id_mensaje']."';");  
    }    

When you click on the link whithin the eliminar_mensaje div it looks that the javascript code works but it really doesn't for any reason i'm not able to find.

does any of you see anything in the scripts?
Tanks a lot in advance!

Answer 1

You need success and error parameters in your ajax call to determine whether the request was successful or not:

$.ajax({  
    url: 'private/control_correo.php',  
    type: 'POST',  
    data: 'id_mensaje='+value+'&accion=eliminar_mensaje',
    success: function(message) {
        // do things on success
        alert(message);
    },
    error: function(message) {
        // ajax request failed (not necessarily the server side processing failed)
        alert(message);
    }
});

You should also look at building an array of data to pass first, then passing in an array and just doing one ajax call.

$('#eliminar_mensaje a').on('click', function(){  
    $('#loading').show();  
    var ajaxArray = {};
    $('.elim_msg').each(function(i,e){  
        var value = $(e).val();  
        var checked = $(e).prop('checked');  
        if(value != 'ok' && checked == true){  
            ajaxArray.push( e ); // add contents of e to array 
        } else {  
            //do nothing  
        }  
    });

    // done with finding data, do ajax
    $.ajax({  
        url: 'private/control_correo.php',  
        type: 'POST',  
        data: {
            dataArray: ajaxArray
        },
        success: function(message) {
            // do things on success
            alert(message);
        },
        error: function(message) {
            // ajax request failed (not necessarily the server side processing failed)
            alert(message);
        }
    });
    // your server side script loops through the passed array and does things there, only one ajax request
});

Also, what's the location.reload() for? That happens on click as well and might be interfering with your ajax processing... if you send an array with ONE request, you can put your location.reload into the success function.

Answer 2

$.ajax in .each means you're making a series of simultaneous AJAX requests and these are probably failing. You need to queue your AJAX request, so that only one at a time is active at any given point. The others need to wait in line. Alternatively, you can modify your server script to accept a single request containing multiple items.

Answer 3

try this:

data: { id_mensaje: value, accion: 'eliminar_mensaje'}

instead of:

data: 'id_mensaje='+value+'&accion=eliminar_mensaje' 

Answer 4

This will work fine for you

<script>
$(document).ready(function(){

    $('#eliminar_mensaje a').on('click', function(){  alert('hj')
    $('#loading').show();  
    $('.elim_msg').each(function(i,e){ 
        var value = $(e).val();  
        var checked = $(e).prop('checked');  
        if(value != 'ok' && checked == true){  
            $.ajax({  
                url: 'private/control_correo.php',  
                type: 'POST',  
                data: 'id_mensaje='+value+'&accion=eliminar_mensaje'  
            });  
        } else {  
            //do nothing  
        }  
});  

}); 

});

</script>



<input type="button" class="clik_for_fetch" value="dsfds"/>

<div id='eliminar_mensaje'><a href='javascript:void(0)'>Eliminar</a> </div>      
<form>  
<input class='elim_msg' type='checkbox' value='id_mensaje_".$i."' />  

...  more inputs whith same class name

</form>