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

あなたのコードから、問題は replaceWith() メソッドにあるようです。分解してみましょう。

  1. ページの読み込み時に、次の部門を DOM に追加します<div id="GridError"></div>
  2. エラーが発生するfunction error(args) {}と呼び出されます。
  3. function showMessage()この関数には、さらに3 つの引数で呼び出す for ループがあります。
  4. この関数ではreplaceWith()、id を持つ DOM 要素でjQuery のメソッドを使用しますGridError。ここで何が起こるかというと、params をテンプレートに送信し、代わりに html マークアップを受け取ります。
  5. replaceWith()テンプレートから返された新しいマークアップで DOM を置き換えるようになりました<div id="GridError"></div>(id="GridError" による分割はなくなりました)。

あなたのマークアップ:

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

次のものに置き換えられます。

<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>

したがって、jQuery のメソッドを呼び出すと、次のようになります。

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

ないので動作しませんGridError。

修正

これを修正するには多くの方法があり、実装によって異なります。ここでは、最も基本的で単純な修正について言及しています。

交換：

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

と：

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