à l'aide de jquery ui boîte de dialogue modale à soumettre un formulaire de

J'ai de la difficulté à l'aide de JQuery UI boîte de Dialogue Modale lors de la soumission d'un formulaire. Le but est que vous cliquez sur le bouton envoyer, le modal des pop-ups et en fonction de votre sélection à partir de la modale de la forme présente ou pas. Au lieu de cela modale s'ouvre et envoie automatiquement

Frontale:

<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>

Ce que j'ai essayé pour le 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");
}

Je comprends comment B (en particulier le checkSubmit) échoue, tout ce qu'il est en train de faire est d'ouvrir le dialogue, mais pour l'Une j'ai pensé qu'il serait de travailler, étant donné que je vais avoir des boutons valeurs de retour, mais il s'agit essentiellement de boîte de dialogue d'ouverture.

OriginalL'auteur peroija | 2012-06-18

  1. 3

    Utiliser un bouton "Soumettre" pour ouvrir la boîte de dialogue:

    <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>

    Utiliser le Submit bouton dans la boîte de dialogue pour déclencher l'événement click pour votre <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;
    });
});​
    le "Retour" fonctionne sans accroc mais de frapper Présenter dans la boîte de dialogue ne fait rien, mais fermer la boîte de dialogue, la page n'a pas soumettre
    Le checkSubmit fonction doit définir le ret variable à retourner. Mise à jour de la réponse à la refléter.
    il a essayé avec vos modifications et essayé quelque chose d'autre, pas de haricots. firebug révèle que la case à soumettre revient pas défini, pas de vrai ou de faux.
    Désolé, doit avoir réalisé la boîte de dialogue bouton de fonction ont été asynchrone. Mise à jour de réponse. Travail violon ici: jsfiddle.net/rWjXU (violon est la preuve-de-concept comme le violon ne prend pas en charge asp.net 🙂 )
    maintenant que nous avons obtenu quelque part. juste quelques corrections à votre code pour les futurs utilisateurs. pour $('button#saveForLater').click(function(e) déposer les deux dernières lignes (e.preventDefault(); et return false;) et de modifier le 'button#' à 'input#'. merci pour l'ensemble de l'aide

    OriginalL'auteur pete