当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - 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.

网友答案:

First, why the "data-status" 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 the data 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/

Hope it helps.

分享给朋友:
您可能感兴趣的文章:
随机阅读: