javascript - 剑道元素失去功能和风格

Question

我在使用某些剑道对象时遇到问题，特别是按钮、下拉列表和文本框。我的情况是这样的:我有一个部分 View ，加载零件列表和项目列表。列表中的每个项目都包含一个链接，该链接可打开剑道窗口，该窗口加载有关零件或项目的信息的部分 View 。所有部件共享一个窗口，但信息根据部件更新，所有项目共享一个窗口，其中所有信息根据项目更新。该窗口在包含零件列表的局部 View 上实例化，但在单击零件/项目之前不可见。然后数据从单独的部分 View 加载到窗口上，然后窗口打开。每个窗口都包含剑道按钮、剑道文本框和剑道下拉列表。

首次加载时，项目和部分链接都可以正常工作。它们将继续工作，直到用户打开其他类型的链接(部分或项目)。然后两个窗口都停止运行。窗口打开，但所有剑道元素都失去了功能。例如，下拉列表变成文本框，按钮呈现扁平的蓝色外观，并且工作表失去了 CSS 的样式。我在这个项目中成功地使用了剑道对象很多次，所以我知道它与这个 View 有关。我检查了窗口的名称和 ID 以及窗口中的所有对象，没有一个是共享的。我还更改了部分 View 中的 javascript 函数的名称(我知道这是不好的做法，但我从未找到正确的方法)，使其彼此不同。问题依然存在。

我没有足够的声誉来发布图片，而且大多数图像托管网站在工作中都被屏蔽，所以我无法发布任何视觉帮助。

下面是其中一个窗口的代码。

 <div style="width:100%;text-align:center;">
    <div style="display:inline-block; vertical-align:central">
        <table>
            <tr>
                <td>
                    @Html.Kendo.Button.Name("test1").Content("Add    Costs").Events(Sub(events) events.Click("enterActualInfo"))
                </td>

                <td>
                    @Html.Kendo.Button.Name("test2").Content("View Change History").Events(Sub(events) events.Click("showProjectHistory"))
                </td>

                <td>
                    @Html.Kendo.Button.Name("test3").Content("GPC/Target").Events(Sub(events) events.Click("addGPC"))
                </td>
            </tr>                
        </table>
    </div>
</div>

这是打开窗口的代码

    function sendProjInfo(projNum) {

    var projectWindow = $("#custProjWindow").data("kendoWindow")
    $.ajax({
        type: "GET",
        url: "@Url.Action("getCustProjInfo", "Home")",
        data: { custProjNumber: projNum },
        datatype: "html",
        success: function (result) {
            projectWindow.content(result).open()

        }
    })
}

//when a part number is clicked, open a new window that has thats part information
function sendPartInfo(partNumber) {

    var partWindow = $("#partWindow").data("kendoWindow")
   $.ajax({
        type:"GET",
        url: "@Url.Action("getPartInfo", "Home")",
        data: {partNumber: partNumber},
        datatype: "html",
        success: function (result) {
            partWindow.content(result).open();
        }
    })

}

这是窗口的实例化。

@Html.Kendo.Window.Name("custProjWindow").Title("Edit Customer Project").Draggable.Resizable.Actions(Sub(actions) actions.Minimize.Maximize.Close()).Visible(False)

@Html.Kendo.Window.Name("partWindow").Title("Edit Part").Draggable.Resizable.Actions(Sub(actions) actions.Minimize.Maximize.Close()).Visible(False)

非常感谢任何建议。如果有助于解决问题，我很乐意发布更多信息。提前致谢。

-埃里克

Answer 1

嗯，很容易确定原因:双重 id。当您打开第一个时，没有问题，因为按钮是 #test1、#test2 和 #test3，但是当您加载另一个时，这些 id 会重复到同一页面中

您应该更改部分 View ，以便按钮的名称是动态且唯一的:

来自:

@Html.Kendo.Button.Name("test1").Content("Add    Costs").Events(Sub(events) events.Click("enterActualInfo"))

致:

@Html.Kendo.Button.Name("test1_" + ViewBag.someId).Content("Add    Costs").Events(Sub(events) events.Click("enterActualInfo"))

在你的 Controller 中，你有一个返回你的partialView的操作，对吧？在那里，您必须传递唯一的 ID，以区分每个部分与其他部分。

public PartialViewResult _YourPartialView()
{
    ViewBag.someId = variableName; // this should be something like a model Id or something.
    return PartialView();
}

当您单击加载部分 View 的链接时，您可以在 Controller 中使用变量或通过 JavaScript 发送某些内容。