JQuery UI對話html（）和fadein崩潰

Question

我使用對話框jquery UI，並且當用戶提交正確的輸入時，我應用html（）和fadein（）。當DOM讀取這一行時，它會崩潰（我嘗試調試器，它在這一行中崩潰），我不知道爲什麼，因爲在它之前像魅力一樣工作。控制檯不會拋出我任何錯誤或警告（我使用Chrome最新版本）：

 <div id="message" class="row-fluid hidden"></div> 

    <div id="page" class="row-fluid"><div class="page-header"><div id="dialog" style="display: none;" title="Task detail"> 

    <div class="modal-body"> 
     <div class="row-fluid" style="padding-bottom: 0px;"> 
<form class="form-horizontal" id="myform" novalidate=""> 
         <div class="control-group"> 
          <label class="control-label" for="email">Email address</label> 
          <div class="controls"> 
           <input type="email" class="form-control" name="email" id="email" required="" aria-invalid="true"> 
          </div> 
         </div> 
         <div class="control-group error"> 
          <label class="control-label" for="emailAgain">Email again</label> 
          <div class="controls"> 
           <input type="email" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" class="form-control" id="emailAgain" name="emailAgain" aria-invalid="false"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <label class="control-label" for="terms-and-conditions">Legal</label> 
          <div class="controls"> 
           <label class="checkbox"> 
            <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required="" data-validation-required-message="You must agree to the terms and conditions" aria-invalid="true"> 
            I agree to the <a href="#">terms and conditions</a> 
           </label> 
          </div> 
         </div> 
         <div class="control-group"> 
          <label class="control-label">Quality Control</label> 
          <div class="controls"> 
           <label class="checkbox"> 
            <input type="checkbox" name="qualityControl[]" value="fast" data-validation-minchecked-minchecked="2" data-validation-minchecked-message="Choose two" data-validation-maxchecked-maxchecked="2" data-validation-maxchecked-message="You can't have it all ways" aria-invalid="true"> 
            Fast 
           </label> 
           <label class="checkbox"> 
            <input type="checkbox" name="qualityControl[]" value="cheap" aria-invalid="false"> 
            Cheap 
           </label> 
           <label class="checkbox"> 
            <input type="checkbox" name="qualityControl[]" value="good" aria-invalid="false"> 
            Good 
           </label> 
          </div> 
         </div> 
         <div class="modal-footer"> 
    <button id="btnSave" type="submit" class="btn btn-success modalbtn">Guardar cambios</button> 
    <button id="btnClose" type="button" class="btn btn-default modalbtn cancel" data-dismiss="modal">Cerrar</button> 
</div> 
        </form> 

    </div> 
    </div> </div> 

JQuery的結構：

$('input,textarea').jqBootstrapValidation(
    { 

    submitError: function ($form, event, errors) { 
     $('#btnSave')[0].disabled = false; 
     $("#myform").effect("shake"); 
    } 
    } 
); 
$('input,textarea').jqBootstrapValidation(
    { 
    submitSuccess: function ($form, event, errors) { 
     $('#btnSave')[0].disabled = false; 

     $("#myform").hide().html("<span class='modalok glyphicon glyphicon-ok'></span><p class='modalsuccessp'>¡Muchas gracias!</p>").fadeIn('slow'); 
    setTimeout(function(){ 
      $('#dialog').dialog('close') 
     }, 2000) 

    } 
    } 
); 

對話框

("#myform").hide().html("<span class='modalok glyphicon glyphicon-ok'></span><p class='modalsuccessp'>¡Muchas gracias!</p>").fadeIn('slow'); 
    setTimeout(function(){ 
      $('#dialog').dialog('close') 
     }, 2000) 

HTML結構驗證的作品，它是動搖時，它不正確，但當我點擊保存更改和所有它是正確的（submitSuccess函數），它崩潰並關閉對話框...）

Answer 1

我不知道從您的HTML代碼，你是否要顯示或對話成功後淡出了。但是我從你的代碼中創建了一個可以正常工作的小提琴。成功驗證後，它會消失在muchas gracias！信息。我更新瞭如下的js代碼：

$(document).ready(function(){ 

    $('input,textarea').jqBootstrapValidation(
    { 

    submitError: function ($form, event, errors) { 
     $('#btnSave')[0].disabled = false; 
     $("#myform").effect("shake"); 
    }, 
     submitSuccess: function ($form, event,errors) { 
     $('#btnSave')[0].disabled = false; 
     event.preventDefault(); 
     $("#myform").hide().html("<span class='modalok glyphicon glyphicon-ok'></span><p class='modalsuccessp'>¡Muchas gracias!</p>").fadeIn('slow'); 
    setTimeout(function(){ 
      $('#dialog').dialog('close') 
     }, 2000) 

    } 
    } 
); 

}); 

檢查小提琴，使用它的代碼，並讓我知道它是否停止崩潰。

http://jsfiddle.net/ZKN4b/

Answer 2

我不知道是什麼問題，但你可以試試這個

$("#myform").hide().html("<span class='modalok glyphicon glyphicon-ok'></span><p class='modalsuccessp'>¡Muchas gracias!</p>").fadeIn('slow', function() { 
    setTimeout(function() { 
     $('#dialog').dialog('close') 
    }, 2000) 
});