使用嵌套表单时，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＃索引名称中的字符串。

But if you have two of the outer forms (addresses) and two each for the inner forms (numbers) and inspect the elements you'll notice the names of the inputs still have the #index# and/or #index_phone# strings in the index names.

如果您尝试提交表单，则字段数据将丢失（因为只有保留该名称的最新副本）。我已经尝试调试JavaScript，所以我可以修补它，但我没有看到它的错误。似乎 normalizeForms 函数没有正确处理嵌套。

If you try to submit the form then, the field data is lost (since only the latest copy of that name is kept). I've tried debugging the JavaScript so I can patch it, but I'm not seeing where it's wrong. It seems like the normalizeForms function isn't handling nesting correctly.

我该怎么做才能纠正代码所以索引按预期执行？ （即：输入两个地址（A和B），每个地址有两个电话号码（A1，A2和B1，B2）给我一个POSTed值，如：

What can I do to correct the code so the indexes perform as expected? (That is: so that an input of two addresses (A and B), each with two phone numbers (A1, A2 and B1, B2) gives me a POSTed value like:

"people" : [
   0 : {
       "addresses" : "A",
       "phones" [ 0 : "A1", 1: "A2" ]
   },
   1 : {
       "addresses" : "B",
       "phones" [ 0 : "B1", 1: "B2" ]
   }
]

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

(Note: I'm not looking for that exact format; I can parse any output, I just need to get all of the data from the client to the server with meaningful indexes and without conflicts.)

推荐答案

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

There appear to be some fundamental logic issues with the index 'normalization' side of this plugin when it comes to the nested inputs.

基本上有一个 nametemplate 和一个 idtemplate ，它们只是<$ c的元素名称$ c>％index％或％index_phones％我在哪里ndex应该是，然后是名称和 id 这些模板只应该是 ％index％或％index_phones％替换为实际的元素输入ID。

Essentially there is is a nametemplate and an idtemplate which are the element names only with %index% or %index_phones% where the index should be, and then the name and id which should be these templates only with the %index% or %index_phones% replaced with the actual element input ids.

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

What happens during the 'normalization' process is that a function runs over these templates (once per element per form), and depending on the form, replaces either %index% or %index_phones% with the relevant index, depending on which form is being processed.

输入嵌套时出现问题，因为函数首先替换（例如）％index％，假设 0 。然后使用此值更新生成的名称或 id ，例如 person_addresses_0_phones_％index_phones％_phone 。当它到达嵌套表单时，它再次执行相同操作，仅使用％index_phones％。结果现在是 person_addresses_％index％_phones_0_phone 因为它仍然使用未修改的模板属性，而不是已经半修改的名称。

The problem arises when the inputs are nested, as the function first replaces (for instance) %index% with let's say 0. It then updates the resulting name or id with this value, say person_addresses_0_phones_%index_phones%_phone. When it hits the nested form, it then does the same again, only with %index_phones%. The result is now person_addresses_%index%_phones_0_phone because it is still using the unmodified template attribute, rather than the already half-modified name.

为了正确解决这个问题，插件整个部分的逻辑真的需要重建，但我已经把一个快速补丁打成了一个应该充当临时修复。

To fix this properly, the logic around this whole section of the plugin really needs rebuilding, but I have slapped together a quick patch which should serve as a temporary fix.

在主插件文件中，将 normalizeFieldsForForm 函数更新为：

In the main plugin file, update the normalizeFieldsForForm function to be:

    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 行附近，添加行

And then update the addForm function. Around line 385 in an unmodified plugin file, add the line

    // Index format
    newForm.data('indexFormat', options.indexFormat);

行上方

above the line

    // Index
    newForm.data('formIndex', getIndex());

这应该作为修复，直到插件作者解决修复逻辑问题。这适用于插件版本 1.1.1

This should serve as a fix until the plugin author gets around to fixing the logic issues. This is for plugin version 1.1.1

这篇关于使用嵌套表单时，jQuery SheepIt演示索引是错误的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！