Looping through a serialized sortable table

Question

I'm sending some serialized data to a PHP script via AJAX:

HTML:

<table class="mytable">
    <tbody>
        <tr id="item_01">
            <td>content</td>
        </tr>
        <tr id="item_02">
            <td>content</td>
        </tr>
        <tr id="item_03">
            <td>content</td>
        </tr>
        <tr id="item_04">
            <td>content</td>
        </tr>
        <tr id="item_05">
            <td>content</td>
        </tr>
    </tbody>
</table>

JS:

$( '.mytable tbody' ).sortable({
    update: function() {
        items = $( this ).sortable( 'serialize' );
        $.ajax({
            url: 'ajax.php',
            type: 'post',
            data: { action: 'foo', items }
            cache: false,
            error: function() {
                console.log( 'Error' );
            }
        });
    }
});

PHP:

$action = $_POST['action'];
if ($action == 'foo') {
    $items = $_POST['items'];
    for ( $i = 0; $i < count($items); $i++ ) {
        .....
    }
}

I had the impression that one could loop through the $_POST['items'] var without any conversion, but I'm getting the serialized data instead:

item[]=val_1&item[]=val_2&item[]=val_3& ... &item[]=val_n

How can I loop through this?

Thanks in advance

nibnut · Accepted Answer · 2017-01-17T21:26:30.937

1

So the issue is with the way you post the items in your ajax call: the "serialize" function returns a string not an object. So you'll want to keep adding post data to the string as in:

...
data: 'action=foo&' + items // items is a string of the form "item[]=content&item[]=content..."
...

Hope this helps!

edited Jan 17 '17 at 21:26

answered Jan 17 '17 at 21:13

nibnut

3,072
2
15
17

Tried this, but the `$_POST['items']` var still contains the serialized data, not a PHP array. Maybe the fact I'm adding the `action` var to the `data` setting in the AJAX request is altering the whole thing. – leemon Jan 17 '17 at 21:23
Doh - you are right. Serialize returns a string, so you won't be able to use it directly as an object for posting. I've updated my answer. – nibnut Jan 17 '17 at 21:27

score 1 · Answer 2 · edited May 23 '17 at 12:16

Check this out and provide us with specific of solution you need out of solution within links:

How do I PHP-unserialize a jQuery-serialized form?

I've made your code preview on c9.io and it's working fine. Try to make external ajax.php with code like that:

<?php
    $action = $_POST['action'];
    if ($action == 'foo') {
        $items = $_POST['items'];

        parse_str($_POST['items'], $params);
        var_dump($params);
    }
?>

And make something like:

$(document).ready(function(){
  var items = $('.mytable tbody').sortable();
  items = items.sortable('serialize');

  var ajaxRequest = function(){
    $.ajax({
      url: 'ajax.php',
      type: 'post',
      data: {
        action: 'foo',
        items
      },
      cache: false,
      complete: function(data){
        console.log(data)
      },
      error: function() {
        console.log('Error');
      }
    });
  };

  setInterval(function(){
    ajaxRequest();
  }, 2000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table class="mytable">
  <tbody>
    <tr id="item_01">
      <td>content</td>
    </tr>
    <tr id="item_02">
      <td>content</td>
    </tr>
    <tr id="item_03">
      <td>content</td>
    </tr>
    <tr id="item_04">
      <td>content</td>
    </tr>
    <tr id="item_05">
      <td>content</td>
    </tr>
  </tbody>
</table>

Check your console and browser request timeline and you will see array of unnamed keys [0..n] with values returned by your script.

Check this link for explanation how to work with this values:

jQuery UI sortable not serializing with custom attributes

Looping through a serialized sortable table

2 Answers2