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.

回答1:

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

https://github.com/johnny/jquery-sortable/blob/master/source/js/jquery-sortable.js#L118
```
var result = $.extend({}, $parent.data())
```

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

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

https://github.com/jquery/jquery/blob/1.9-stable/src/data.js#L252
```
dataAttr( elem, name, data[ name ] );
```
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/

来源：https://stackoverflow.com/questions/24377212/jquery-sortable-updated-data-not-being-serialized

标签

javascript

jquery

html

serialization

jquery-ui-sortable