CODEWITHSUNDEEP
javascriptjqueryhtmlserializationjquery-ui-sortable
ak85
ak85

Reputation: 4264

jQuery Sortable updated data not being serialized

I am using the jQuery Sortable plugin.

Looking at the basic example on how to serialize the data I have the below code.

    <div class='span4'>
        <ol class='serialization vertical'>
            <li data-id='1' data-name='Item 1' data-status='1'>Item 1 <span class="status">toggle</span></li>
            <li data-id='2' data-name='Item 2' data-status='1'>Item 2 <span class="status">toggle</span></li>
            <li data-id='3' data-name='Item 3' data-status='1'>Item 3 <span class="status">toggle</span></li>
            <li data-id='4' data-name='Item 4' data-status='1'>Item 4 <span class="status">toggle</span></li>
            <li data-id='5' data-name='Item 5' data-status='1'>Item 5 <span class="status">toggle</span></li>
            <li data-id='6' data-name='Item 6' data-status='1'>Item 6 <span class="status">toggle</span></li>
        </ol>
    </div>

    var group = $("ol.serialization").sortable({
      group: 'serialization',
      delay: 500,
      onDrop: function (item, container, _super) {
        var data = group.sortable("serialize").get();
        var jsonString = JSON.stringify(data, null, ' ');
    console.log(jsonString);
        $('#serialize_output2').text(jsonString);
        _super(item, container)
      }
    });

I want to allow the user to toggle the status of each item so I have also added in 

    jQuery(document).on("click", ".status", function (event) {
        var status = $(this).closest("li").attr("data-status");
        if(status == 1) {
            $(this).closest("li").attr( 'data-status','0');
        }
        else {
            $(this).closest("li").attr( 'data-status','1');
        }
    });

If I click toggle before dragging and dropping the list item the console.log will return the correct status (1 or 0).

However after I have dragged and dropped, if I try and click to update the status then drag and drop again the console.log returns the correct order of my list but not the most up to date status.

What do I need to do here to ensure the serialized data reflects the value of the data attribute at the time of the drop?

see this fiddle.

Upvotes: 2

Views: 922

Answers (1)

zihen
zihen

Reputation: 261

First, why the "data-status" is not updated, as follows:

  1. https://github.com/johnny/jquery-sortable/blob/master/source/js/jquery-sortable.js#L118

    var result = $.extend({}, $parent.data())

  2. https://github.com/jquery/jquery/blob/1.9-stable/src/data.js#L244

    if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {

  3. https://github.com/jquery/jquery/blob/1.9-stable/src/data.js#L252

    dataAttr( elem, name, data[ name ] );

  4. https://github.com/jquery/jquery/blob/1.9-stable/src/data.js#L291

    if ( data === undefined && elem.nodeType === 1 ) {

So the reason is that the data is cached by jQuery.

The solution:

var group = $("ol.serialization").sortable({
    group: 'serialization',
    delay: 500,
    onDrop: function (item, container, _super) {
        group.children().each(function(){
            jQuery._data(this, 'parsedAttrs', false);
            jQuery.removeData(this);
        });
        var data = group.sortable("serialize").get();
        var jsonString = JSON.stringify(data, null, ' ');
        console.log(jsonString);
        $('#serialize_output2').text(jsonString);
        _super(item, container)
     }
 })

This fiddle: http://jsfiddle.net/hb6hU/1/

Upvotes: 3

Related Questions