难以从表行中的一系列输入元素中获取值列表

时间:2014-01-16 13:22:21

标签: javascript asp.net-mvc jquery

我完全难过了。当然,在java脚本中,我就像那个小孩试图将一个方形钉子塞进一个圆孔中。

我的高级目标:管理员希望能够编辑某些文本框周围的文本,以及添加和删除“段落”的功能。记者和用户希望文本框中的值用于比较等(这是原始功能)。

我的解决方案:这个项目使用一个非常混乱的值 - 属性表(称为EAV?),现在它具有相关字段的字段并且是自引用的。我决定利用它来最小化对数据库的更改,因此管理员基本上创建一个字符串,使用“{}”表示文本框所属的位置,并将属性的名称分配给直接出现在段落下方的文本框。

我的问题:文本框生成正常,一旦管理员停止输入“{}”计数被检查客户端,并在下面的行中添加/删除正确数量的文本框。但是,当“更改”模式(从而保存新字符串)时,我还想保存他们选择的属性名称。我似乎无法从输入中获得实际值。下面的java脚本向elementList发送null。仔细检查表明var fieldNames得到两个“undefined”元素,所以我得到null是有意义的。它也很明显它击中了一些东西,因为数字与两个'nameField'行对齐。

DOM(Hemed down to essentials)

<tr data-editMode="TextMode" data-ordinal="0"> 
   ....
    <td>
        <a class="changeMode">
<tr class="nameField">
   <td colspan='4'>
   <input type="text" value="Testing">
<tr class="nameField">
  .... 

的Javascript

function getAssociatedTr(row) {
    var associatedRows = [];
    associatedRows.push(row);
    row = row.next('tr');
    var hasAnother = true;
    while (hasAnother == true) {
        if (row != null && row.hasClass("nameField")) {

            associatedRows.push(row);
            row = row.next('tr');
        } else {
            hasAnother = false;
        }
    }

    return associatedRows;
}


  $(".changeMode").live("click", function () {
            var options = $(this).data("options");
            var theRow = $(this).closest('tr');
            var rows = getAssociatedTr(theRow);
            var fieldNames = new Array();
            rows.splice(0, 1);
            for (var index = 0; index < rows.length; index++) {
                {
                    fieldNames.push(rows[index].next('.nameField').val());
                }
            }


            $(".modal-header", c.rowsModal).html("<h3>Changing edit mode" + options.table + "</h3>");
            c.rowsModal.modal("show");

            $.ajax({
                type: "POST",
                traditional: true,
                data: { "Name": options.table, "Ordinal": options.row, "EditMode": options.editMode, "ElementNames": fieldNames },
                url: "/contracts/changeeditmode/" + c.id.val(),
                success: function (data) {
                    theRow.replaceWith(data);
                    $.validator.unobtrusive.parse("#supplementForm");
                    c.rowsModal.modal("hide");

                    for (j = rows.length - 1 ; j >= 0; j--) {
                        rows[j].remove();
                    }
                }
            });

        });

服务器端

public ActionResult ChangeEditMode(long id, AddTrackedRowViewModel model, 
      string editMode, List<string> elementNames)
    {
    }

作为旁注,我对JavaScript有建设性的批评。

修改

我已将该行更新为

     fieldNames.push(rows[index].nextAll('input').first().val());

但仍未定义。

    fieldNames.push(rows[index].find("input[type=text]").val());

1 个答案:

答案 0 :(得分:2)

在这一行:

fieldNames.push(rows[index].next('.nameField').val());

你正在使用选择器“.nameField”,但这会得到一个“tr”元素,如果你想要你需要的文本框:

fieldNames.push(rows[index].next('.valid').val());

或使用其他选择器为您提供文本框。