我想重用包含ajax表單的Kendo窗口

我有一個包含ajax表單的Kendo UI窗口。我遇到的問題是，在POST成功之後，我關閉了窗口，然後重新打開窗口重用它，但下次提交表單時它會POST兩次，依此類推。如果我第三次提交它將POST三次等。我想重用包含ajax表單的Kendo窗口

我已經嘗試使用destroy（）函數，完全從DOM中刪除窗口，然後通過jQuery重建它，但效果相同。我還嘗試在加載標記代碼之前清空窗口的內容。

我一直在閱讀來自Telerik的documentation，他們建議將UpdateTargetId放在表單外，我也嘗試過，效果相同。我知道有一些遺漏，我不能指出它。

我應該如何繼續使用Kendo窗口作爲可重複使用的窗口（不會發布與我使用窗口相同的數字）？

我在窗口內AJAX形式：

//abbreviated 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script> 
//abbreviated 
<div id="paymentFormId"> 
    @using (Ajax.BeginForm("action", "controller", new { id = id }, new AjaxOptions 
     { 
      HttpMethod = "POST", 
      UpdateTargetId = "paymentFormId", 
      InsertionMode = InsertionMode.Replace, 
      LoadingElementId = "loader" 
     }, new { id = "payment-form" })) 
    { 
     @Html.Partial("PaymentForm", new PaymentForm()) 
    } 
</div> 
//abbreviated

我PaymentForm標記：

//abbreviated 
//bunch of text fields to submit 
//abbreviated 
<button type="submit" class="k-button">Submit</button> 
<button onclick="closeWindow()" class="k-button">Close</button>

我的窗口聲明：

個

@(Html.Kendo().Window() 
    .Name("Window") 
    .Title("My Win") 
    .Content("Loading info...") 
    .Modal(true) 
    .Draggable() 
    .Visible(false) 
    .HtmlAttributes(new { style = "padding: 10px 15px; max-width: 400px;" }) 
    .AutoFocus(true) 
    .Position(p => p.Top(100).Left(400)) 
    .Events(e => e.Close("onWindowClose")) 
)

一些腳本：

//This script is the one that triggers the window to open 
function openWindow(id) { 
    var window = $("#Window").data("kendoWindow"); 
    window.refresh({ 
     url: "/controller/action", 
     data: { 
      id: id 
     }, 
     error: function (xhr, textStatus, exceptionThrown) { 
      window.close(); 
      alert($.parseJSON(xhr.responseText)); 
     } 
    }); 
    window.open(); 
} 

//This is the registered close event 
function onWindowClose(e) { 
    var id = $("#ID").val(); 
    if (id != null) { 
     $.ajax("/controller/action", { 
      type: "POST", 
      dataType: "json", 
      data: { 
       id: id 
      }, 
      success: function (data) { 
       //TODO: derp 
      }, 
      error: function (xhr, textStatus, exceptionThrown) { 
       alert($.parseJSON(xhr.responseText)); 
      } 
     }); 
    } 
    //var myWin = new $("#Window").data("kendoWindow"); 
    //myWin.destroy(); 
    $(this.element).empty(); 
    $(this.element).html("Loading content..."); 
}

來源

2014-11-03 gardarvalur

我發現了這個問題。我從窗口中刪除不顯眼的腳本包含到masterpage標題，因此腳本只包含一次。我沒有注意到每次使用窗口時都包含腳本。從窗口中排除它後，一切正常。 – gardarvalur 2014-11-05 09:49:44

我有重用包含表單元素，又包含一些文本輸入框和一個文件輸入框劍道窗口。爲了避免重新提交文件輸入，我重置了關閉窗口的窗口。我不得不這樣做掉主線程從borking了POST記住這是發生致電類似

closeAddAttachmentWindow: function() { 
     var window = $("#addAttachmentWindow").data("kendoWindow"); 
     window.close(); 

     setTimeout(function() { 
      $("#formUpload").trigger('reset'); 
     }, 200); 
    },

您是否嘗試過類似的東西在你的OnWindowClose（E）的功能？

來源

2014-11-03 16:16:39

謝謝你的回答@RobinGiltner。我嘗試了你的答案，但仍然無法工作。觸發器是用於form-id的嗎？在我的情況下，它會像這樣$（「＃payment-form」）。trigger（'reset'）; – gardarvalur 2014-11-03 16:30:32

是的，那是我用過的。哦，也許有人會有更好的主意。 – 2014-11-03 17:34:00

你好@RobinGlitner，我發現問題，我會在我的帖子中解釋。不過，我會爲你的答案，因爲重置表單是一個很好的理念:) – gardarvalur 2014-11-05 09:48:05

我想重用包含ajax表單的Kendo窗口

回答

相關問題