jQuery/PHP Foreach Ajax Request

Question

I'm attempting to use jQuery each in my new website code. At the moment, for each div class "added" on the page, it loops through them and submits an AJAX request to my PHP script which then updates the database. The problem with this is, if the user created 100 items, 100 requests would be sent which is just not acceptable. I'd prefer to send all data in 1 go, so if there are 100 items, PHP would simply have to loop through a $_GET array.

$( ".added" ).each(function() {
    var position = $(this).position();

    $.ajax({
        type: "GET",
        url: "index.php?action=save",
        data: {
            id: $(this).attr("id"),
            top: position.top,
            left: position.left,
            img: $(this).attr("image")
        },
        success: function (data) {
            //alert(data);
        }
    });
});

Any solutions, or for those who can send me in the right direction, I'd be very grateful.

Kind regards.

Loop through the divs first, create an array with the values you need – and then send that array afterwards. — C3roe
– C3roe, Commented May 3, 2014 at 20:36

technology_dreamer · Accepted Answer · 2014-05-03 20:41:19Z

1

After reviewing your need, it should be better to create an array to hold the informacion for each added class. Then you could send this array to the server (it will be helpful to convert the array into JSON, it's a suggestion)

var position_array = [];

$('.added').each(function()
{
    //Get the position of the element       
    var position = $(this).position();

    var id = $(this).attr("id");
    var top = position.top;
    var left = position.left;
    var img = $(this).attr("image");

    var object = 
    {
        'id': id,
        'top': top,
        'left': left,
        'img': img
    }

    position_array.push(object);
}); 

$.ajax(
{
    type: "GET",
    url: "index.php?action=save",
    data: 
    {
        add_array: position_array
    },
    success: function (data) 
    {
            //alert(data);
    }
});

answered May 3, 2014 at 20:41

technology_dreamer

4731 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3600003 Over a year ago

Brilliant solution, I'm glad I asked this question now as you've just added to my knowledge of working with arrays and requests with jQuery.

NMC · Accepted Answer · 2014-05-03 20:42:18Z

1

You could use the POST method instead of GET, which will give you more freedom when passing arguments to PHP. After that, just pass an array of your divs throught the data field.

$( "#submitDivs" ).on('click',function() {


    var divsData = [];
    $( ".added" ).each(function() {
        var position = $(this).position();
        divsData[$(this).attr("id")] = {
            id: $(this).attr("id"),
            top: position.top,
            left: position.left,
            img: $(this).attr("image")
        };
    });

    $.ajax({
        type: "POST",
        url: "index.php?action=save",
        data: { divs: divsData },
        success: function (data) {
            //alert(data);
        }
    });
});

This function will be fired when the element with ID 'submitDivs' will be clicked. After that, in PHP you can do the following to iterate over the divs :

$divs = json_decode($_POST['divs']);
foreach($divs as $div){
    echo $div['id'];
}

answered May 3, 2014 at 20:42

NMC

85311 silver badges19 bronze badges

1 Comment

user3600003 Over a year ago

A great solution, as is the above answer - I have tested both and they both seem to do what I need. Thanks!

obysky · Accepted Answer · 2014-05-03 21:01:20Z

Simple Way to do this .. just set a timer javascript for your client to do another request().. (only client have charge cpu and server do just one request to 3 sec for one client)
For good protection you do this in server also ..

var urls = [];
var timer = now();

onclick(function(){
    add_url_in_urls[]($(this).href());
]);
setInterval(function(){
  dooooo();
},3000);

function dooooo(){

timer = renow();

    if (timer > now()){
        $( ".added" ).each(function() { // added links or list url in array javascript //
            var position = $(this).position();
            $.ajax({
                type: "GET",
                url: "index.php?action=save",
                data: {
                    id: $(this).attr("id"),
                    top: position.top,
                    left: position.left,
                    img: $(this).attr("image")
                },
               success: function (data) {
              //alert(data);
           }
        });
    });     
 }
}
(toujours modérer ses actions javascript en functions réutilisables ...)

Collectives™ on Stack Overflow

jQuery/PHP Foreach Ajax Request

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related