使用類序列化？

我目前正在使用id值div標籤serialize，即：使用類序列化？

HTML：

<div class="column"> 
    <div id="portlet_1">some content here</div> 
    <div id="portlet_2">some content here</div> 
    <div id="portlet_3">some content here</div> 
</div>

的jQuery：

$(this).sortable('serialize', {key: 'item'})

這工作正常。

的問題是，我需要讓用戶動態選擇哪個porlet他/她想要在屏幕上，他們可以在屏幕上有相同的Portlet多次，如果他們想，即：

HTML：

<div class="column"> 
    <div id="portlet_1">some content here</div> 
    <div id="portlet_1">some content here</div> 
    <div id="portlet_1">some content here</div> 
    <div id="portlet_2">some content here</div> 
    <div id="portlet_2">some content here</div> 
    <div id="portlet_3">some content here</div> 
</div>

由於相同的id s，導致很多問題。

現在，我已經改變了結構，使用class ES代替id S，即：

HTML：

<div class="column"> 
    <div class="portlet_1">some content here</div> 
    <div class="portlet_1">some content here</div> 
    <div class="portlet_1">some content here</div> 
    <div class="portlet_2">some content here</div> 
    <div class="portlet_2">some content here</div> 
    <div class="portlet_3">some content here</div> 
</div>

怎樣基礎上，class，而不是id序列化？

這是因爲它系列化基於id S的不使用的代碼更完整的提取物：

的jQuery：

$(".column").sortable({ 
    connectWith: '.column', 
    update: function(event, ui) { 
     var that = this; 

     $.ajax({ 
      url: 'some web service here', 
      type: 'POST', 
      data: { strItems:$(that).sortable('serialize', {key: 'item'}) }, 
      error: function(xhr, status, error) { 
       //some error message here 
      }, 
      success: function() { 
       //do something on success 
      } 
     }); 

    } 
});

對不起，忘了提，我使用的是舊jquery版本1.4。

來源

2012-06-20 oshirowanen

如何可以在第一個例子中正常工作，如果你送'項目= 1項= 2項= 3'到服務器？你打算最終得到什麼？就像'item = 1＆item = 1＆item = 1＆item = 2＆item = 2＆item = 3'？ – VisioN

當我得到'item = 1＆item = 2＆item = 3'時，我將它分開並相應地在服務器級別使用它。是的，根據上面的示例中的HTML，您展示的最終示例正是「item = 1＆item = 1＆item = 1＆item = 2＆item = 2＆item = 3」後面的內容。 – oshirowanen

然後最簡單的就是更新你的jQuery並使用'attribute'選項（如@JBRTRND答案）：http://jsfiddle.net/WTTsB/。 – VisioN

試試這個：

$(this).sortable('serialize', {key: 'item', attribute: 'class'});

的jQuery UI 1.8 documentation：

可能的選項包括： '關鍵'（取代第1部分[]與任何你想要的）， '屬性'（測試另一個屬性不是'id'）和'表達'（使用你自己的正則表達式）。

來源

2012-06-20 11:06:45 jbrtrnd

這與jquery 1.4一起工作的機會是什麼？ – oshirowanen

哎呀，對不起，我沒有看到你編輯的帖子！ – jbrtrnd

我剛剛試過這個，我用jQuery 1.4得到了'item = all'。我會嘗試更新我的jQuery版本到1.8，並希望不會遇到任何向後兼容性問題。 – oshirowanen

你可以自己動手完成它：

data: function(){ 
    var mySerial; 
    $(this).find('div').each(function(){ 
     var raw = $(this).attr('class'); 
     var el = raw.split('_'); 
     mySerial += el[0]+"[]="+el[1]+"&"; 
    }); 
    return mySerial.substr(0,(mySerial.length-1)); 
}

，應返回是這樣的： portlet[]=1&portlet[]=1&portlet[]=2 ...

來源

2012-06-20 11:11:50 AvL

如果一切都失敗了，我會試試這個。 – oshirowanen

這此要點。

jQuery('.class_input').serializeAnything()

https://gist.github.com/4482228

(function($) { 

$.fn.serializeAnything = function() { 

var toReturn = []; 

$.each(this, function() { 

if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type))) { 

var val = $(this).val(); 

toReturn.push(encodeURIComponent(this.name) + "=" + encodeURIComponent(val)); 

} 

}); 

return toReturn.join("&").replace(/%20/g, "+"); 

} 


})(jQuery);

來源

2013-01-08 08:46:17 keithics

使用類序列化？

回答

相關問題