IEquery UI對話窗體提交錯誤在IE

我正在MVC中建立一個頁面，有一個下載按鈕和一個上傳按鈕。當用戶點擊上傳時，我使用JQuery UI對話框來顯示一個彈出窗口來顯示警告消息。當點擊這個彈出框中的「確定」按鈕時，我使用Jquery提交表單。這在Firefox中正常工作，但表單不會在IE中提交。IEquery UI對話窗體提交錯誤在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>

我看了四周，共同修復沒有工作。有沒有人有任何提示？

編輯：

另外，如果我點擊對話框3倍的「確定」按鈕，它觸發控制器動作，但在文件中沒有通過。

解決

使得 '真實' 輸入可見後。使用真實的輸入瀏覽按鈕將允許表單提交。但使用假的瀏覽按鈕，其中調用： -

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

導致此問題。我將使用不同的方法來設置我的輸入字段的樣式。

來源

2011-06-20 Joe

任何調試信息？在IE中調用函數？加載div是否出現？ – Dave

對話框彈出正常，並出現加載div。我的控制器操作有一個斷點，但代碼沒有達到它。 – Joe

什麼是$（「＃form1」）。size（）在IE中？ – Dave

如果將對話框追加到form元素，它是否解決了您的問題？（默認情況下，jQuery的追加對話框body標籤）

$(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'); 
     } 
    });

如果這是.NET，我已經看到了.NET做一些古怪的事情，當元素不是form標籤內

編輯：嘗試定位.ui-dialog而不是$（this）

來源

2011-06-20 15:16:09 Mutt

感謝您的回答，這似乎將我的對話框中的元素從對話框彈出窗口拖到下面的窗體中。該表單仍不會提交。對話框div在表單內部，所以我不認爲這是問題。不過謝謝。 – Joe

@Joe jQuery用來創建對話框的HTML將在表單中，但實際創建的對話框將被附加到body標籤。使用螢火蟲或Chrome工具來看看這個。無論如何，我更新了我的答案，嘗試針對'.ui-dialog'元素而不是$（this） – Mutt

您的權利，我沒有意識到它是在主體的末尾添加的。我添加了你的新代碼，但表單仍然沒有提交。沒有腳本錯誤，所有的東西都被調用，但是控制器的動作沒有被觸發。 – Joe

也許您應該向表單添加動作，即使它是空的動作？

不知道是否有可能是在你的代碼別的東西造成的問題，因爲我不能複製問題

see my fiddle

來源

2011-06-20 16:16:35 mcgrailm

感謝您的建議，我試着添加一個動作，但表單仍然沒有提交。我開始剝離我的頁面，發現造型造成的假輸入導致了問題。當我確切地知道它是什麼時，我會發布答案。 – Joe

IEquery UI對話窗體提交錯誤在IE

回答

相關問題