Question

我有一个div元素，我用它作为弹出窗口，不会自行更新。我将使用下面的图片来解释：

Popup problem

当我点击网格中的每一行时，右侧会更新以显示详细信息，其中一部分是可能很长的注释字段。按钮View Note会触发一个内部带有全文的弹出窗口。在这里，我之前选择了Donor 2000000，它显示了正确的音符。但是，当我选择另一个捐赠者（突出显示为2000002）时，弹出窗口中的信息会保留第一个选定捐赠者的信息。所以，基本上它只设置一次然后不更新。

主视图的（部分）代码是：

  <div class="col-md-4 col-md-push-8">
        <h4>
            Donor Details
        </h4>
        <div id="donor-details">
            <p class="muted">
                Select donor to display detailed infomation
            </p>
        </div>
    </div>
    <div class="col-md-8 col-md-pull-4">
        @Html.Action("DonorSummaryGrid") @* configure grid in a partial view *@
    </div>
</div>

<script>
    $(function () {
        pageGrids.donorSummaryGrid.onRowSelect(function (e) {
            $.post("/Donor/GetDonorDetails?donorId=" + e.row.DonorId, function (data) {
                if (data.Status <= 0) {
                    alert(data.Message);
                    return;
                }
                $("#donor-details").html(data.Content);
            });
        });
    });
</script>

部分视图的代码 - 包含详细信息 - 是：

@if (!String.IsNullOrWhiteSpace(Model.CurrentNoteText)) {

    <div id="note-dialog" title="Note for Donor @Model.DonorId">
        <p>@Html.DisplayTextFor(model => model.CurrentNoteText)</p>
    </div>
    <br />
}
@Scripts.Render("~/Scripts/NoteDialogue.js")

当我调试时，Model.CurrentNoteText和@ Model.DonorId的值确实反映了正确的数据。

NoteDialogue.js是：

$(function() {
    $("#note-dialog").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "blind",
            duration: 200
        }
    });

    $("#opener").click(function() {
        $("#note-dialog").dialog("open");
    });
});

我希望这很清楚：）

哦，除了更新弹出窗口中的信息外，浏览器中没有显示错误，并且按预期方式执行外翻功能。

我试过了

<script>
    $("#note-dialog").html("@Model.CurrentNoteText");
</script>

没有成功。

Answer 1

最后到达那里：）

查看生成的源代码，我注意到了

的代码

    <div id="note-dialog" title="Note for Donor @Model.DonorId">
        <p>@Html.DisplayTextFor(model => model.CurrentNoteText)</p>
    </div>
    <br />

正在底部生成，包含网格和细节的所有其他div之外。看起来像这样：

<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" role="dialog" aria-describedby="note-dialog" aria-labelledby="ui-id-1"....>

当我单击带有注释的每一行时，正在生成一个额外的div，其中aria-labelledby属性递增，例如＆＃34; ui-id-2＆＃34;，＆＃34; ui-id-3＆＃34; ...

第一个生成的div被选中进行对话。

解决方案是删除行点击事件中的div。现在的代码是：

$(function() {
    pageGrids.donorSummaryGrid.onRowSelect(function (e) {

        $("#note-dialog").remove(); 

        $.post("/Donor/GetDonorDetails?donorId=" + e.row.DonorId, function(data) {
            if (data.Status <= 0) {
                alert(data.Message);
                return;
            }
            $("#donor-details").html(data.Content);
        });
    });
});

<div>的内容未更新

1 个答案: