爲什麼我不能從jQuery UI對話框中觸發提交按鈕？

編輯：爲什麼我不能從jQuery UI對話框中觸發提交按鈕？

有人建議直接在窗體上調用提交。這不是我想要實現的。我希望能夠在輸入類型='submit'時調用click（）事件，並讓它像通常那樣提交表單。 jQuery UI對話框似乎干擾了這種正常行爲。請檢查我創建的jsFiddle鏈接，因爲問題可以在那裏重新創建。

（首先，我已經看到StackOverflow上這個問題，但答案並不在我的情況下工作：jQuery UI Dialog with ASP.NET button postback）

所需的行爲：

在我的網頁我有兩個一個隱藏字段和一個提交按鈕（通過CSS隱藏）。

我想要做的就是使用JavaScript以編程方式單擊此按鈕，從而導致表單被提交。最重要的是....我想從一個jQuery UI對話框中觸發所有這些。基本上，用戶將在jQuery UI對話框中進行選擇，這將導致整個頁面被提交併重新加載。

問題陳述

觸發一個按鈕，點擊這樣正常工作正常提交表單。但是，如果在jQuery UI對話框中觸發操作，則會失敗。

正如你可以在我的jsFiddle代碼中看到的，我在提交按鈕上調用jQuery的click（）函數....但實際上並沒有提交表單！該按鈕確實被JavaScript點擊了，但「表單提交行爲」本身不會發生。該頁面未發佈。

我相信jQuery UI對話框以某種方式干擾按鈕的表單提交行爲，我嘗試以編程方式單擊。

我想以編程方式觸發按鈕點擊的原因：

我不能有位於內對話框中的按鈕來提交按鈕本身。就我而言，我創建了一個可重用的JavaScript控件，它包裝了一個jQuery UI對話框。這個JS控件允許用戶選擇一個員工。但是，當員工被選中時，期望的行爲是並不總是：表單提交。（有時候我可能要在頁面上顯示的挑選員工，而不是執行提交呢。）

其他細節：

這個問題不是特定於ASP.NET，但這裏有一些額外的細節以幫助解釋爲什麼我嘗試所有這些。我正在使用.NET 4.5編寫ASP.NET Web窗體應用程序。我已經開始爲我的頁面使用越來越多的JavaScript，但是在這個特定的頁面上我想觸發一個實際的回發到服務器，這樣我就可以處理ASP.NET頁面生命週期中的按鈕單擊事件並填充GridView。這就是爲什麼我希望能夠使用JavaScript來點擊一個asp：按鈕，這反過來會導致表單提交。

最重要的是......試一試--->參見下面的jsfiddle鏈接.....

同樣，這個問題是不是特定於ASP.NET。我已經能夠使用普通的HTML和jQuery UI在JsFiddle上重新創建相同的問題。這裏是的jsfiddle鏈接：

http://jsfiddle.net/fENyZ/18/

正如你可以在代碼中看到，我已經嘗試使用移動jQuery UI的對話框通過jQuery DOM操作表單內的「修復」。這似乎沒有解決問題。

謝謝！我感謝任何幫助！

HTML

<html> 
<head></head> 
<body> 

    <form action="http://www.google.com/index.html" method="post"> 

     <input type="button" value="Open jQuery dialog" id="btnOpenDialog" /> 
     <br /><br /><br /> 

     The button below submits the form correctly if you click it.<br /> 
     However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted. 
     </b><br /> 

     <input type="submit" value="Submit Form" id="btnSubmitForm" /> 
     <input type="hidden" id="hdnEmployeeChosen" value="" />    
    </form>  


    <div id="divPopup" class="dialogClass" style="display: none;"> 
     Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not... 
     <br /><br /> 

     <div class="divOptions"> 
      <input type="button" value="Pick" class="pickButton" employeeName="Weird Al" /> 
      Weird Al Yankovic 
     </div> 
     <div class="divOptions">    
      <input type="button" value="Pick" class="pickButton" employeeName="Dracula" /> 
      Count Dracula 
     </div> 
     <div class="divOptions">   
      <input type="button" value="Pick" class="pickButton" employeeName="David" /> 
      David Copperfield 
     </div>   
    </div> 

</body>

的JavaScript

$(document).ready(function() 
{ 
    var jqueryDialog = $('#divPopup') 
       .dialog({ 
        autoOpen: false, 
        modal: true, 
        title: 'My Dialog', 
        width: 300, 
        height: 300, 
        draggable: false, 
        resizable: false 
       }); 

    // This "fix" does not appear to help matters.......... 
    jqueryDialog.parent().appendTo($("form:first")); 

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

    $('.pickButton').click(function() { 

     // Put picked value into hidden field 
     var pickedEmployee = $(this).attr('employeeName'); 
     $('#hdnEmployeeChosen').val(pickedEmployee); 

     // Try to cause a submit (ASP.NET postback in my case)   
     // THIS PART DOES NOT WORK................. 
     $('#btnSubmitForm').click(); 

     //alert($('#hdnEmployeeChosen').val()); 
    });  

});

CSS

form { 
margin: 5px; 
    border: 1px solid black; 
    background-color: #EEE; 
    padding: 15px 5px; 
} 

.dialogClass { 
border: 1px solid black; 
padding: 5px; 
margin: 5px; 
    background-color: LightBlue; 
    font-size: 14px; 
} 

.pickButton { 
    margin-right: 5px; 
} 

.divOptions { 
    margin-bottom: 3px; 
}

來源

2012-10-18 ClearCloud8

I'dont請參閱氯代碼提交按鈕的ICK事件..

而不是

$('#btnSubmitForm').click();

嘗試

$('form').submit();

或提交表單中的提交按鈕的單擊事件處理程序。

來源

2012-10-18 23:08:48

感謝您的回覆。如果你能看到我的評論user1757786的答案。我需要讓按鈕本身觸發表單提交。我知道我可以在表單上處理並手動提交，但這並不理想。我的問題的關鍵是要找出如何使提交按鈕本身的工作。此外，沒有任何代碼需要提交按鈕...其類型='提交'，所以它會導致表單提交。嘗試在jsFiddle中手動點擊它並看到它提交。 – ClearCloud8

提交按鈕是被點擊。我將下面的代碼添加到腳本中...

$("#btnSubmitForm").on("click", function() { 
    console.log("submit!"); 
});

並且顯示按鈕被單擊。

正如舒尚特說，使用形式的submit()方法，或者如果你想觸發asp.net回發，然後看看__doPostBack()

How to use __doPostBack()

來源

2012-10-18 23:10:23 Archer

感謝您的回覆。正如我所提到的，我知道這個按鈕確實是「被點擊」的......但問題在於該按鈕沒有執行它通常會執行的表單提交操作。這很奇怪，因爲只有一半的預期行爲正在發生。在你上面的例子中，當單擊按鈕....時，console.log發生......表單提交不會發生。如果你進入jsFiddle，只需手動點擊我放在那裏的提交按鈕，你會發現它確實提交正常。（Sushanth的解決方案沒有解決我構成的問題...你可以在那裏看到我的評論。） – ClearCloud8

昨天，我嘗試使用__doPostBack（）觸發表單提交以及...但似乎並沒有工作。這就是爲什麼我通過jsFiddle僅使用HTML和jQuery UI重新創建問題的原因。這樣人們可以看到它與ASP.NET沒有特別的關係。這是一個普遍的問題。我認爲如果可以找到這個通用問題的解決方案，那麼我就能夠將這個問題應用於我的具體情況（在這種情況下，ASP.NET）。 – ClearCloud8

這可能是一個錯誤，取決於你的版本jQuery的

look at this article about the same problem

在所有情況下

，只要你想提交表單，最短的方法是使用.submit()方法。

來源

2012-10-18 23:16:52 MatRt

感謝您的回覆。我認爲這是一個jQuery錯誤。我檢查了你發佈的鏈接，他使用了有bug的jQuery 1.4。我正在使用jQuery 1.8（你可以在我的jsFiddle示例鏈接中查看這個），他聲稱這個bug已經修復。 – ClearCloud8

指定一個id屬性到您的窗體：

<form id="myForm" action="http://www.google.com/index.html" method="post">

然後提交表單：

$('.pickButton').click(function (e) { 
    e.preventDefault(); 
    $('#myForm').submit(); 
    // more code 
}

來源

2012-10-18 23:23:08

在我提到的**附加細節**部分下，我嘗試使用ASP.NET的頁面生命週期和後端的按鈕單擊事件來處理提交操作。我使用ASP.NET的事實在重新創建此問題時並不重要。但是，它確實解釋了我爲什麼要實際使用提交按鈕來導致回發。對錶單元素本身執行提交不足以觸發代碼隱藏上的按鈕單擊事件。這就是我試圖將我的問題集中在一起的原因：如何使用提交按鈕本身來完成這一切。 – ClearCloud8

如果有人還在尋找一個答案，這裏的東西，爲我工作。 setTimeout（「$（'＃」+ id +「'）.click（）;」，0）;

id是e.currentTarget.id其中事件是點擊提交按鈕。將該ID傳遞給必須觸發單擊事件的方法。

.trigger（「click」）does not trigger postback，but the above code does。

來源

2013-03-29 02:17:46 webDeveloper

我試過你的想法，但沒有改進。 http://jsfiddle.net/fENyZ/27/ – ClearCloud8

因爲它複製多個oject。所以你可以使用：$('[id="btnCreate"]').last().trigger('submit');

last method get last element。

更新$('#btnSubmitForm').click();

嘗試這樣的：$('[id="btnSubmitForm"]').last().trigger('click');

$('[id="btnSubmitForm"]')得到所有相同的ID爲btnSubmitForm。

例如：

$("#dialog").dialog({ 
      autoOpen: false, 
      //maxWidth: 600, 
      //maxHeight: 500, 
      minWidth: 580, 
      width: 580, 
      height: 500, 
      title: "titleDemo", 
      show: { 
       effect: "blind", 
       duration: 1000 
      }, 
      hide: { 
       effect: "explode", 
       duration: 1000 
      }, 
      modal: true, 
      buttons: { 
       "Create": { 
        text: "OK", 
        id: "btnCreates", 
        click: function (event) { 
         $('[id="btnCreate"]').last().trigger('submit'); 
        } 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     });

來源

2013-12-05 08:42:30 Arnold

我試過你使用last（）的想法，但它沒有改善這種情況。看到我更新的jsFiddle ... http://jsfiddle.net/fENyZ/28/ – ClearCloud8

你看這裏：http：//jsfiddle.net/arnoldZhang/kp3EY/ – Arnold

好吧，我嘗試了jsFiddle ...我看到警報去......但在最後一次提示「提交」時......它實際上並沒有提交表格。這是問題的根源。 – ClearCloud8

的問題是通過使用id元素作爲選擇器...當jQuery用戶界面對話框被調用時，它複製在所需塊劃分成產生容器內，此裝置引起像#form_name現在的具體標識符會重複混淆jquery選擇器...

我的解決方案是切換到類標識符，然後使用更具體的路徑來選擇按鈕ex：$（jQuery_dialog_box。class name ）.submit（）（或點擊（））

來源

2013-12-09 23:46:54 Dragonman117

我不認爲問題在於選擇器。我正確選擇提交按鈕並正確地導致點擊事件觸發它。正如其他人所提到的，您可以通過在按鈕的單擊事件上放置console.log來看到這一點。問題是，當按鈕以編程方式點擊.....（它是）....它無法提交整個表單，就像你用鼠標手動點擊它一樣。 – ClearCloud8

默認情況下，Jquery UI對話框阻止任何按鈕提交（至少基於我迄今的經驗）。據說，我發現如果你通過Visual Studio將任何按鈕上的「提交行爲」更改爲「False」，它就會起作用。我知道這與它應該是完全相反的，但是如果你這樣做，那麼JQuery UI對話框中的按鈕將回發並工作。

幾個小時後，我發現JQUI對話框中的任何字段在ASP.net中都無法識別，除非您在Jquery UI對話框對象上調用destroy方法。

我真的很喜歡這個控制，直到我開始深入研究與真實應用程序和基本彈出窗口以外的其他細節，我不確定這個控件是否已經完全準備好了。

來源

2013-12-11 00:25:49 Rob

剛剛有一個類似的問題，我可以通過正確的提交按鈕執行，但表單只是沒有提交。在逐步完成jQuery對話框代碼並沒有發現它如何防止事件傳播之後，我只是決定做出明顯的提示並隱藏對話框。適用於您的提琴太：http://jsfiddle.net/Q4GgZ/1/

jqueryDialog.dialog('close'); // <- THIS WORKS 
$('#btnSubmitForm').click();

來源

2014-01-14 20:40:25 LouD

根據模態對話框的jquery-ui文檔：_「如果設置爲true，則對話框將具有模態行爲;頁面上的其他項目將被禁用，即不能與之交互模式對話框在對話框下創建疊加層，但是高於其他頁面元素。「_ - 文檔不說的是」禁用「實際上的含義。這意味着覆蓋層下面的任何東西都會在對話框打開時禁用事件。 setTimeout是解決此問題的另一個解決方法是因爲對話框在執行時關閉，並且在此時不再禁用事件。 –

不確定它們是什麼意思。在jQuery之前，我實現了自己的模式，通過覆蓋屏蔽所有的點擊事件，並將「禁用」屬性應用於輸入/選擇/按鈕/等，以防止跳轉。表單元素本身不支持disabled屬性，所以我仍然好奇他們使用的是什麼機制。仍然沒有機會做更多的研究。 – LouD

大聲提到的，解決方法是「點擊」您的按鈕之前，關閉對話框。至於爲什麼這個修復了一切，你需要深入研究JQuery UI的源代碼。在1.8.9版本有這個代碼模式疊加：

events: c.map("focus,mousedown,mouseup,keydown,keypress,click".split(","), function (a) { 
    return a + ".dialog-overlay" 
}).join(" "), 

... 

c(document).bind(c.ui.dialog.overlay.events, function (d) { 
    if (c(d.target).zIndex() < c.ui.dialog.overlay.maxZ) return false 
})

它返回false（基本上preventDefault()）對所有的元素輸入事件爲「下」。它不僅僅是一個巨大的div，它可以防止用戶通過「超越」他們點擊事物。它也會手動阻止所有輸入事件，無論用戶還是您的JS生成它們。

關閉你的模式對話框會破壞疊加層，它允許你的JS點擊事件完全傳播，提交表單。

來源

2014-07-14 20:00:48 Joe

我到達這裏的時候遇到了一個非常類似的問題，但是因爲這個問題，我失去了一些時間，所以將它發佈給未來的讀者。

有一些問題與此代碼：

如果對話框是模式的，似乎你不能觸發對話以外的其他元素的事件。如果您使用選項模態對話框：false，觸發器將正常工作。我希望對話是模態的，所以這個解決方案不是一種選擇。
由於對話框是模態對話框，所以必須將該按鈕放在對話框中。您可以隱藏它並通過分類按鈕觸發。我修改了javacript部分，並嘗試了小提琴，併爲您的情況工作。

HTML

<form action="http://www.google.com/index.html" method="post"> 

    <input type="button" value="Open jQuery dialog" id="btnOpenDialog" /> 
    <br /><br /><br /> 

    The button below submits the form correctly if you click it.<br /> 
    However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted. 
    </b><br /> 


    <input type="hidden" id="hdnEmployeeChosen" value="" />    

    <div id="divPopup" class="dialogClass" style="display: none;"> 
    Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not... 
    <br /><br /> 

    <div class="divOptions"> 
     <input type="button" value="Pick" class="pickButton" employeeName="Weird Al" /> 
     Weird Al Yankovic 
    </div> 
    <div class="divOptions">    
     <input type="button" value="Pick" class="pickButton" employeeName="Dracula" /> 
     Count Dracula 
    </div> 
    <div class="divOptions">   
     <input type="button" value="Pick" class="pickButton" employeeName="David" /> 
     David Copperfield 
    </div>  

     <input type="submit" value="Submit Form" id="btnSubmitForm" style="display:none"/> 
</div> 

</form>  




</body>

JAVASCRIPT

$(document).ready(function() 
{ 
var jqueryDialog = $('#divPopup') 
      .dialog({ 
       autoOpen: false, 
       modal: true, 
       title: 'My Dialog', 
       width: 300, 
       height: 300, 
       draggable: false, 
       resizable: false 
      }); 

// This "fix" does not appear to help matters.......... 
jqueryDialog.parent().appendTo($("form:first")); 

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

$('.pickButton').click(function() { 

    // Put picked value into hidden field 
    var pickedEmployee = $(this).attr('employeeName'); 
    $('#hdnEmployeeChosen').val(pickedEmployee); 

    console.log("click button dialog"); 
    // Try to cause a submit (ASP.NET postback in my case)   
    // THIS PART DOES NOT WORK................. 
    $('#btnSubmitForm')[0].click(); 

    console.log("after click");   
    //alert($('#hdnEmployeeChosen').val()); 
});  

});

你可以看到小提琴here

來源

2015-02-05 17:11:07 bandro

我有同樣的問題，下面的一組建議工作我。

追加對話框的形式$(this).parent().appendTo("form:first");
對話框的open選項中追加對話框的形式

幸得Homam和他comment另一個question。

請參見下面的JavaScript

var jqueryDialog = $('#divPopup') 
     .dialog({ 
      autoOpen: false, 
      modal: true, 
      title: 'My Dialog', 
      width: 300, 
      height: 300, 
      draggable: false, 
      resizable: false, 
      open: function() { 
       $(this).parent().appendTo('form:first'); 
      } 
     });

來源

2015-02-10 17:18:54 fujiiface

簡單的解決這個問題是設置後打開的對話框提交事件。在提交事件觸發前，沒有必要關閉對話框。

當在.open（）方法中覆蓋對話框時，所有事件都被禁用。因此，在打開對話框後設置所需的事件。

$('#btnOpenDialog').click(function() { jqueryDialog.dialog('open'); // now setup events $('#btnSubmitForm').on('click', function() { // process submit event }); });

來源

2016-08-26 16:33:18 suspectus

爲什麼我不能從jQuery UI對話框中觸發提交按鈕？

回答

相關問題