0

我正在使用 Kendo UI Grid 内联编辑功能。对于重复等不同的条件。我正在显示错误消息。如何使错误消息淡出？jQuery fadeOut() 方法不起作用。

<pre><code>
<script type="text/kendo-template" id="message">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
        <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n">
    </div>
</script>
<script type="text/javascript">
    var validationMessageTmpl = kendo.template($("#message").html());
    function error(args) {
        if (args.errors) {
            var grid = $("#DocumentGrid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind if error occurs                             
                for (var error in args.errors) {
                    showMessage(grid.editable.element, error, args.errors[error].errors);
                    $("#GridError").fadeOut(1000);
                }
            });
        }
    }
    function showMessage(container, name, errors) {
        //add the validation message to the form
        $("#GridError").replaceWith($(validationMessageTmpl({ field: name, message: errors[0] })));        
    }
</script>
<div id="GridError"></div>
<div style="width:600px; float:left; margin-top:0px; margin-top:35px;">
<%: Html.Kendo().Grid<DocumentModel>().HtmlAttributes(new { @class = "grid" })
    .Name("DocumentGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.DocumentId).Hidden(true);
        columns.Bound(p => p.DocumentName).Title("Document Name");
        columns.Command(command =>
        {
            command.Edit();
        })
        .Width(50)
        .HtmlAttributes(new { @Style = "white-space: nowrap; overflow: hidden;" });
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .ToolBar(toolbar => toolbar.Create().Text("Add Document"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Sort(sort =>
        {
            sort.Add(m => m.DocumentName);
        })
        .Events(events => events.Error("error"))
        .Model(model => model.Id(c => c.DocumentId))
        .Create(update => update.Action("DocumentGrid_Create", "Admin"))
        .Read(read => read.Action("DocumentGrid_Read", "Admin"))
        .Update(update => update.Action("DocumentGrid_Update", "Admin"))
        )
%>
</div>

</code></pre>
4

1 回答 1

0

From your code it seems that the issue is with the replaceWith() method. Let me break it down for you.

  1. At page load you add the following division to your DOM <div id="GridError"></div>
  2. When an error occurs, function error(args) {} is called.
  3. In this function you have a for loop that further calls function showMessage() with 3 arguments.
  4. In this function you use jQuery's method replaceWith() on DOM element with id GridError. What happens here is that you send the params to template and receive html markup in return.
  5. The replaceWith() will now replace <div id="GridError"></div> in DOM with the new markup returned from template (division with id="GridError" is no longer there).

Your markup:

<div id="GridError"></div>

Is replaced by:

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="field" data-valmsg-for="field" id="field_validationMessage">
    <span class="k-icon k-warning"> </span>Message<div class="k-callout k-callout-n">
</div>

So when you call jQuery's method:

$("#GridError").fadeOut(1000);

It does not work because GridError is not there.

Fixes

There are many ways to fix this, and depends on your implementation. I am mentioning here the most basic and simple fix.

Replace:

$("#GridError").replaceWith($(validationMessageTmpl({ field: name, message: errors[0] })));

With:

$("#GridError").html($(validationMessageTmpl({ field: name, message: errors[0] })));
于 2013-05-16T12:29:46.810 回答