3

フォームを送信するときに、JQuery UI モーダル ダイアログを使用するのに問題があります。意図は、送信ボタンを押すことです。モーダルがポップアップし、モーダルからの選択に応じて、フォームが送信されるか送信されません。代わりに、モーダルがポップアップして自動的に送信されます

フロントエンド：

<div id="dialog" title="Basic dialog">
    <p>Please double check to be sure all data is entered correctly.</p>
</div>
<div class="buttons">
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click"
        ValidationGroup="GroupSave" />
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="return checkSubmit()" OnClick="btnSubmit_Click" />
</div>

jquery/jsで試したこと

A.)

function checkSubmit() {
$("#dialog").dialog({ modal: true,
    buttons: { "Submit": function () { $(this).dialog("close"); return true; },
        "Go Back": function () { $(this).dialog("close"); return false; }
    }
});
}

B.)

$(document).ready(function () {
$("#dialog").dialog({ autoOpen: false,
    modal: true,
    buttons: { "Submit": function () { $(this).dialog("close"); return true; },
        "Go Back": function () { $(this).dialog("close"); return false; } 
    }
});
});

function checkSubmit() {
 $("#dialog").dialog("open");
}

B (具体的にはcheckSubmit) がどのように失敗するかを理解しています。それはダイアログを開くことだけですが、AI にとっては、ボタンが値を返すことを考えるとうまくいくと思いましたが、それも基本的にダイアログを開くだけです。

4

1 に答える 1

3

「送信」というラベルの付いたボタンを使用して、ダイアログを開きます。

<div id="dialog" title="Basic dialog">
    <p>Please double check to be sure all data is entered correctly.</p>
</div>
<div class="buttons">
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click" ValidationGroup="GroupSave" />
    <input type="button" id="preSubmit" value="Submit" />
    <asp:Button ID="btnSubmit" class="ui-helper-hidden" Text="Submit" runat="server" OnClick="btnSubmit_Click" />
</div>

ダイアログのボタンを使用してSubmit、 のクリック イベントをトリガーします<asp:Button>。

function submitForm() {
    $('input#<%=btnSubmit.ClientID %>').click();
}
function checkSubmit() {
    $("#dialog").dialog({
        "modal": true,
        "buttons": {
            "Submit": function() {
                submitForm();
            },
            "Go Back": function() {
                $(this).dialog("close");
            }
        }
    });
}
$(document).ready(function() {
    $('button#preSubmit').click(function(e) {
        checkSubmit();
        e.preventDefault();
        return false;
    });
    $('button#saveForLater').click(function(e) {
        $("#dialog").dialog('close');
        e.preventDefault();
        return false;
    });
});​
于 2012-06-18T19:08:38.680 に答える