![](/img/trans.png)
[英]Can I have multiple levels of nested cloned forms using SheepIt JQuery plugin?
[英]jQuery SheepIt demo indexes are wrong using nested forms
我在這里使用演示: http : //www.mdelrosso.com/sheepit/index.php? lng=en_GB&sec= demo3
但是,如果您有兩種外部形式(地址),而每種都有兩種內部形式(數字),並檢查元素,您會注意到輸入名稱在字符串中仍然具有#index#
和/或#index_phone#
字符串索引名稱。
如果您嘗試提交表單,那么字段數據將丟失(因為僅保留該名稱的最新副本)。 我已經嘗試調試JavaScript,以便對其進行修補,但是我沒有發現錯誤的地方。 似乎normalizeForms
函數無法正確處理嵌套。
我該怎么做才能更正代碼,使索引按預期執行? (即:這樣,輸入兩個地址(A和B),每個地址都有兩個電話號碼(A1,A2和B1,B2)會給我一個POSTed值,例如:
"people" : [
0 : {
"addresses" : "A",
"phones" [ 0 : "A1", 1: "A2" ]
},
1 : {
"addresses" : "B",
"phones" [ 0 : "B1", 1: "B2" ]
}
]
(注意:我並不是在尋找那種確切的格式;我可以解析任何輸出,我只需要從客戶端到服務器的所有數據就具有有意義的索引且沒有沖突。)
當涉及嵌套輸入時,此插件的索引“規范化”側似乎存在一些基本邏輯問題。
本質上是有一個nametemplate
和idtemplate
,它們是僅具有%index%
或%index_phones%
的元素名稱,而索引應該是這些name
,然后是name
和id
應該是這些模板的元素名稱,僅具有%index%
或%index_phones%
替換為實際的元素輸入ID。
什么在“正常化”過程發生的是一個函數在這些模板運行(每人形式元件一次),並且根據在表格上,取代要么 %index%
或%index_phones%
與相關索引,這取決於哪個形式正在處理。
當輸入嵌套時,就會出現問題,因為該函數首先將%index%
替換為例如0
。 然后,它將使用此值更新結果name
或id
,例如person_addresses_0_phones_%index_phones%_phone
。 當它到達嵌套表單時,它僅使用%index_phones%
再次執行相同的%index_phones%
。 現在的結果是person_addresses_%index%_phones_0_phone
因為它仍在使用未修改的template屬性,而不是已經修改了一半的name
。
為了正確地解決此問題,確實需要重新構建圍繞插件整個部分的邏輯,但是我拍了一個快速補丁,應該將其作為臨時修正。
在主插件文件中,將normalizeFieldsForForm
函數更新為:
function normalizeFieldsForForm(form, index)
{
form.find(formFields).each(function(){
var that = $(this)
,idTemplateAttr = getOrSetTemplate(that,"id")
,nameTemplateAttr = getOrSetTemplate(that, "name")
,idAttr = that.attr("id")
,nameAttr = that.attr("name")
,formParents = that.parents('[idtemplate]')
/* Normalize field name attributes */
var newNameAttr = nameTemplateAttr.replace(options.indexFormat, index);
/* Normalize field id attributes */
var newIdAttr = idTemplateAttr.replace(options.indexFormat, index);
$.each(formParents,function(index,element){
$element = $(element);
if($element.data('indexFormat') != options.indexFormat){
/* Normalize field name attributes */
newNameAttr = newNameAttr.replace($element.data('indexFormat'), $element.data('formIndex'))
/* Normalize field id attributes */
newIdAttr = newIdAttr.replace($element.data('indexFormat'), $element.data('formIndex'))
}
});
form.find("label[for='"+idAttr+"']").each(function(){
$(this).attr("for", newIdAttr);
});
that.attr("id", newIdAttr);
that.attr("name", newNameAttr);
});
}
然后更新addForm
函數。 在未修改的插件文件中的第385
行周圍,添加該行
// Index format
newForm.data('indexFormat', options.indexFormat);
水准之上
// Index
newForm.data('formIndex', getIndex());
在插件作者開始解決邏輯問題之前,這應該作為修復。 這是針對插件版本1.1.1
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.