Jquery UIダイアログフォームIEでのサブミットバグ

Question

私は、ダウンロードボタンとアップロードボタンを使ってMVCにページを構築しています。ユーザーがアップロードをクリックすると、JQuery UIダイアログを使用して警告メッセージを表示するポップアップを表示しています。このポップアップで「OK」ボタンをクリックすると、Jqueryを使用してフォームを送信します。これはFirefoxで正常に動作しますが、フォームはIEで送信されません。

ビュー

<form id="form1" enctype="multipart/form-data" method="post"> 
    <div style="clear:both; margin-top:10px">  
     <fieldset> 
      <legend>Legend</legend> 

      <div style="float:right"> 
       <input type="file" name="file" id="file" style="display:none" onchange="SetFakeText();"/> 
       <input id="txtFakeText" readonly="readonly" onclick="HandleFileButtonClick();" style="width:280px"/> 

       <input type="button" id="cmdFakeButton" value="Browse" onclick="HandleFileButtonClick();"/>     
       <input type="button" id="ReUploadButton" value="Upload"/> 
      </div> 

      <input type="submit" name="submitButton" value="Download" /> 

     </fieldset> 
    </div> 

    <div id="dialog"> 
     <label style="font-weight:bolder; color:red;">Warning!</label> 
     <br /> 
     <label>Uploading will overwrite old data</label> 
     <br /> 
     <img id="loading" src="<%= ResolveUrl("~/Images/LoadingSpinner.gif")%>" alt="" style="display:none; margin-left:120px;"/> 
    </div> 
</form> 

スクリプト

<script type="text/javascript"> 
    function HandleFileButtonClick() { 
     document.getElementById('file').click(); 
    }; 

    function SetFakeText() { 
     document.getElementById('txtFakeText').value = document.getElementById('file').value; 
    }; 

    $('#ReUploadButton').click(function() { 
     $('#dialog').dialog('open'); 
    }); 

    $(function(){      
    $('#dialog').dialog({ 
    autoOpen: false, 
    width: 300, 
    position: 'center', 
    title: 'Uploading', 
    modal: true, 
    buttons: { 
     'Ok': 
     function() { 
      document.getElementById('loading').style.display = 'block'; 
     $('#form1').submit(); 
       }, 
     'Cancel': 
     function() { 
     $(this).dialog("close"); 
     } 
    } 
    });    
});  
</script> 

私の周り読んだことがあるとの共通の修正は動作しませんでした。誰にもヒントはありますか？

編集：私は、ダイアログの「OK」ボタンを3回クリックした場合

はまた、それは、コントローラのアクションをトリガーするが、ファイルには渡しません。

は、 '実際の' 入力を可視化した後

を解決しました。実際の入力ブラウズボタンを使用すると、フォームを送信できます。しかし、偽の参照ボタンを使用して： -

function HandleFileButtonClick() { 
     document.getElementById('csvFile').click(); 
    }; 

この問題が発生します。別の方法で入力フィールドのスタイルを設定します。

Answer 1

form要素にダイアログを追加すると問題は解決しますか？これは.NETがある場合、私は、要素がformタグ内にない場合に、いくつかの奇抜なことを行う.NET見てきました

$(function(){      
    $('#dialog').dialog({ 
     autoOpen: false, 
     width: 300, 
     position: 'center', 
     title: 'Uploading', 
     modal: true, 
     buttons: { 
     'Ok': 
     function() { 
      document.getElementById('loading').style.display = 'block'; 
     $('#form1').submit(); 
       }, 
     'Cancel': 
     function() { 
     $(this).dialog("close"); 
     } 
     }, 
     open: function(){ 
     $('.ui-dialog').appendTo('form'); 
     } 
    }); 

（デフォルトではjQueryのは、bodyタグにダイアログを追加）

編集： $（this）の代わりに.ui-dialogをターゲティングしてみてください

Answer 2

空の場合でもアクションをフォームに追加する必要がありますか？

なく、あなたのコード内で何か他のものは、私が問題

see my fiddle