时间戳

首页 > 解决方案 > 使用嵌套表单的 jQuery SheepIt 演示索引错误

javascript - 使用嵌套表单的 jQuery SheepIt 演示索引错误

问题描述

我在这里使用演示：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" ]
   }
]

（注意：我不是在寻找那种确切的格式；我可以解析任何输出，我只需要将所有数据从客户端获取到具有有意义索引且没有冲突的服务器。）

标签： javascriptjquerysheepit

解决方案

当涉及到嵌套输入时，该插件的索引“规范化”端似乎存在一些基本逻辑问题。

本质上，有一个nametemplate和一个idtemplate，它们是元素名称，只有索引应该是%index%或%index_phones%应该在哪里，然后name和id应该是这些模板，只有%index%或%index_phones%替换为实际的元素输入ID。

在“规范化”过程中发生的事情是一个函数在这些模板上运行（每个表单每个元素一次），并且根据表单，替换或替换 相关索引，具体取决于正在处理的表单。%index%%index_phones%

当输入嵌套时会出现问题，因为函数首先替换（例如）%index%为 let's say 0。然后它更新结果name或id使用这个值，比如person_addresses_0_phones_%index_phones%_phone。当它遇到嵌套表单时，它会再次执行相同的操作，仅使用%index_phones%. 现在的结果是person_addresses_%index%_phones_0_phone因为它仍然使用未修改的模板属性，而不是已经半修改的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

推荐阅读