无法使用 jquery 在基诺面板栏中获取正确的值

Question

一般信息

我构建了一个填充有数据的 kendo 面板栏，它有一个选项，使用户能够编辑展开面板时显示的预填充数据。面板栏嵌套在列表视图中，面板展开时显示的 HTML 来自 Kendo 模板。

当前问题

当面板展开并且用户选择编辑内容并添加时，他们按批准按钮添加，但我收到的文本不正确。我只得到应该位于第一个面板中的信息。无论我选择编辑和添加哪个面板，我都只推送位于第一个面板中的数据。

Html

<div class="padding" style="display:none;" id="ApprovalFormWindow">
    <div class="container">
        <!--<div id="descriptionColumn" style="display:none"><b id="description">Title</b><b id="date">Modified Date</b></div>-->
        <div id="descriptionColumn" style="display:none">
            <div style="width: 95%; display: table;">
                <div style="display: table-row">
                    <div style="width: 40px; display: table-cell; vertical-align:top;"><b>Title</b></div>
                </div>
            </div>
        </div>
        <ul id="listView" style="display:none"></ul>
        <div id="pager" style="display:none"></div>
    </div>
</div>

<script type="text/x-kendo-tmpl" id="ApprovalContentTemplate">
<li>
    <table style="width: 95%;">
        <tr>
            <td class="selectedValue" style="width:40%; vertical-align:top;">#:Description#</td>
        </tr>
    </table>
    <div id="topTabPanel" style="margin-top: -4px; padding-top: 5px; padding-bottom: 5px; border: 1px solid lightgray !important">
        <label style="margin-left : 5px;" for="EditCheckBox">
            Edit<input class="editBox" type="checkbox" id="EditCheckBox" value="true" style="margin-left: 5px;">
        </label>
            <button type="button" class="PreviewItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Preview</button>
            <button type="button" class="ApproveItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Approve</button>           
    </div>
    <div id ="PanelSelected" class="row demo-section k-content" style="border-top: 4px solid dodgerblue; border-bottom: 4px solid dodgerblue;">
        <div class="col-xs-11" style="margin-top: 5px;">
            <form class="form-inline">
                <div class="form-group">
                    <label for="Title" class="required">Title</label>
                    <div><textarea class="k-textbox ApproversPanel" id="Title" name="Title" style="width: 220px;" readonly>#:Name#</textarea></div>
                </div>
                <div class="form-group">
                    <label for="KeyWords" class="required">KeyWords</label>
                    <div><textarea class="k-textbox ApproversPanel" id="KeyWords" name="KeyWords" style="width: 220px;" readonly>#:KeyWords#</textarea></div>
                </div>
                <div class="form-group">
                    <label for="jandra" class="required">Description</label>
                    <div><textarea class="k-textbox ApproversPanel" id="jandra" name="jandra" style="width: 220px;" readonly>#:jandra#</textarea></div>
                </div>
                <div class="form-group">
                    <label for="Summary" class="required">Summary</label>
                    <div><textarea class="k-textbox ApproversPanel" id="Summary" name="Summary" style="height: 100px; width: 220px;" readonly>#:Summary#</textarea></div>
                </div>
            </form>
        </div>
    </div>
</li>

Javascript

serverResponse = [
{
    Name: "Test1",
    KeyWords: "KeyWord1",
    jandra: "Country",
    Summary: "Test Item 1",
},
 {
     Name: "Test2",
     KeyWords: "KeyWord2",
     jandra: "Rap",
     Summary: "Test Item 2",
 },
  {
      Name: "Test3",
      KeyWords: "KeyWord3",
      jandra: "Pop",
      Summary: "Test Item 3",
  },
   {
       Name: "Test4",
       KeyWords: "KeyWord4",
       jandra: "Rock",
       Summary: "Test Item 4",
   },
    {
        Name: "Test5",
        KeyWords: "KeyWord5",
        jandra: "Blues",
        Summary: "Test Item 5",
    },

];

var selectedContent;

$("#listView").kendoListView({
dataSource: serverResponse,
autoBind: false,
pageable: true,
template: kendo.template($("#ApprovalContentTemplate").html()),
dataBound: function () {
    $("#listView").kendoPanelBar({
        // Made it single, however multiple would be nice
        expandMode: "single",
        select: function (e) {
            var retrievedContent = serverResponse._data;

            for (var x = 0; x < retrievedContent.length; x++) {
                if (e.item.dataset.uid === retrievedContent[x].uid) {
                    selectedContent = retrievedContent[x];
                }
            }
        },

    });

    $(".editBox").each(function (e) {
        $(this).click(function (d) {
            if ($(this).is(":checked")) {
                $(".ApproversPanel").attr("readonly", false);
            }
            else {
                $(".ApproversPanel").attr("readonly", true);
                $("#ListItemTitle").val(selectedContent.Name);
                $("#ListItemKeyWords").val(selectedContent.KeyWords);
                $("#ListItemDescription").val(selectedContent.Description);
                $("#ListItemSummary").val(selectedContent.ContentSummary);
                var testThis = 0;
            }
        });
    });

    $(".PreviewItem").each(function (e) {
        $(this).click(function (d) {
            // Logic not built 
        });
    });

    $(".ApproveItem").each(function (e) {
        $(this).click(function (d) {
            var value = $("#PanelSelected").find(".ApproversPanel").children();
            /*
             * when a person push this to the datasource it will always push
             * the first object in the array no mattyer what panel they selected to edit 
             *   Name: "Test1",
             *   KeyWords: "KeyWord1",
             *   jandra: "Country",
             *   Summary: "Test Item 1",
             */

            GetCurrentValue();
        });
    });

    function GetCurrentValue() {
        $(".ApproversPanel").each(function (e) {
            var title = $("#Title").val();
            var KeyWords = $("#KeyWords").val();
            var Description = $("#jandra").val();
            var ContentSummary = $("Summary").val();

            /*
           *   This gives me the same results.  not matter what panel I selected to edit and 
           *   add I always get the first object.
           *   Name: "Test1",
           *   KeyWords: "KeyWord1",
           *   jandra: "Country",
           *   Summary: "Test Item 1",
           */

        });
    };
},

});

Answer 1

好吧...您有 5 个面板，每个面板包含一组文本框，它们都具有相同的 ID 和名称。 id 必须是唯一的。您在 GetCurrentValue() 中的 jquery 选择器将始终 return 第一个和第一个，因为 jquery 假定一个唯一的 id 并停止（它不知道您想要第 4 个输入具有相同的 ID）。您必须以某种方式使每个面板独一无二，并使用适当的选择器。

例如，您可以将“批准”按钮点击更改为

$(".ApproveItem").each(function (e) {
    $(this).click(function (d) {
      var panel = $($(this).closest("li"));
      var data = {
        Name: panel.find("#Title").val(),
        KeyWords: panel.find("#KeyWords").val(),
        jandra: panel.find("#jandra").val(),
        Summary: panel.find("#Summary").val()
      }
      console.log(data);

        //var value = $("#PanelSelected").find(".ApproversPanel").children();
        /*
         * when a person push this to the datasource it will always push
         * the first object in the array no mattyer what panel they selected to edit 
         *   Name: "Test1",
         *   KeyWords: "KeyWord1",
         *   jandra: "Country",
         *   Summary: "Test Item 1",
         */

        //GetCurrentValue();
    });
});

这会获取与所点击按钮关联的面板的引用（使用最近），然后使用它来优化数据选择器以找到正确面板的子项。

http://dojo.telerik.com/@Stephen/avitO

我肯定有更好的方法可以使用 Kendo 的 MVVM（与此处的技术相似但不相同：）或 adding/removing 类到所选面板以用于构建更具体的选择器。

无法使用 jquery 在基诺面板栏中获取正确的值

Unable to get the proper value inside a Keno Panel Bar using jquery

jquery

kendo-ui

kendo-panelbar