簡體   English   中英

jQuery SheepIt演示索引使用嵌套表單是錯誤的

[英]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" ]
   }
]

(注意:我並不是在尋找那種確切的格式;我可以解析任何輸出,我只需要從客戶端到服務器的所有數據就具有有意義的索引且沒有沖突。)

當涉及嵌套輸入時,此插件的索引“規范化”側似乎存在一些基本邏輯問題。

本質上是有一個nametemplateidtemplate ,它們是僅具有%index%%index_phones%的元素名稱,而索引應該是這些name ,然后是nameid應該是這些模板的元素名稱,僅具有%index%%index_phones%替換為實際的元素輸入ID。

什么在“正常化”過程發生的是一個函數在這些模板運行(每人形式元件一次),並且根據在表格上,取代要么 %index%%index_phones%與相關索引,這取決於哪個形式正在處理。

當輸入嵌套時,就會出現問題,因為該函數首先將%index%替換為例如0 然后,它將使用此值更新結果nameid ,例如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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM