CODEWITHSUNDEEP
jqueryserializationjquery-ui-sortable
Ours
Ours

Reputation: 392

The jQuery UI sortable serialization

I know this question has been asked numerous times but I think I'm missing a point or something. I'm trying to leverage the serialization of jQuery sortable, but it looks like it's not working.

Here is my base list:

    <ol class='simple_with_no_drop vertical'>
          <li id='script_1' class='highlight'>Hello ES</li>

          <li id='script_2' class='highlight'>Login ES</li>

          <li id='script_3' class='highlight'>Test ES</li>

          <li id='script_4' class='highlight'>Another ES</li>
        </ol>
      </div>

      <div class='span4'>
        <h3>Scenario scripts</h3>

        <ol class='simple_with_drop vertical'>
          <li id='script_1'>Hello ES</li>

          <li id='script_2'>Login ES</li>
        </ol>
      </div><button>Save Scenario</button>
      <pre id='serialize_output'> </pre>

Here is the js:

var group = $("ol.simple_with_drop").sortable({
 group: 'simple_with_drop',
 onDragStart: function ($item, container, _super) {
     if(!container.options.drop){
          $item.clone().insertAfter($item);
        }
        _super($item, container);
 },
 onDrop: function ($item, container, _super) {
       var data = group.sortable('serialize').get();
        var jsonString = JSON.stringify(data);
        $('#serialize_output').text(jsonString);
        _super($item, container);
      },    }); 
$("ol.simple_with_no_drop").sortable({
  group: 'simple_with_drop',
  drop: false
});

And the serialization result :

[[{},{},{}]]

The idea was to leverage the auto serialization with item_id form, but it looks lite it's not recognized. If I try, as in many ressources, without the .get(), I have a "Uncaught TypeError: Converting circular structure to JSON" error when dropping.

I tried to use the serialization with $(this) but got this result instead :

  [{"containerPath":"","containerSelector":"ol, ul","distance":0,"delay":0,"handle":"","itemPath":"","itemSelector":"li","bodyClass":"dragging","draggedClass":"dragged","placeholderClass":"placeholder","placeholder":"<li class=\"placeholder\"></li>","pullPlaceholder":true,"tolerance":0,"drag":true,"drop":true,"exclude":"","nested":true,"vertical":true,"group":"simple_with_drop"}]

Any input would be appreciated! thanks!

Upvotes: 1

Views: 829

Answers (1)

shouryaps
shouryaps

Reputation: 28

Your JS Code is fine. In your html code just add data-id attribute with each of the li, and it will work!

<ol class='simple_with_no_drop vertical'>
      <li id='script_1' data-id='script_1' class='highlight'>Hello ES</li>

      <li id='script_2' data-id='script_2' class='highlight'>Login ES</li>

      <li id='script_3' data-id='script_3' class='highlight'>Test ES</li>

      <li id='script_4' data-id='script_4' class='highlight'>Another ES</li>
    </ol>
  </div>

  <div class='span4'>
    <h3>Scenario scripts</h3>

    <ol class='simple_with_drop vertical'>
      <li id='script_1' data-id='script_1'>Hello ES</li>

      <li id='script_2' data-id='script_2'>Login ES</li>
    </ol>
  </div><button>Save Scenario</button>
  <pre id='serialize_output'> </pre>

Upvotes: 1

Related Questions