affichage modal bootstrap conditionnellement sur le formulaire de soumission

J'ai été à essayer de comprendre ce depuis deux jours, mais j'ai vraiment besoin d'aide sur ce problème.

J'ai un formulaire html qui a un bouton de soumission avec un conditionnel js confirmation de pop-up qui travaille, mais je veux changer le conditionnel js confirmation de pop-up avec un modal bootstrap pour s'adapter avec le reste de mon projet.

Lorsque le formulaire est soumis et la valeur html liste de sélection sur la forme a changé, alors la condition js fenêtre pop up de confirmation s'affiche. L'utilisateur doit cliquer sur le bouton OK sur la js confirmation de pop-up pour la soumission de formulaire de procéder.

Ou bien si le code html de la liste select a pas changé la js confirmation de pop-up s'affiche pas et le formulaire se soumettre.

Voici mon travail le code du formulaire:

<form id="language_view_form" class="form-horizontal" action="{% url language_view %}" method="post">

Ici est mon travail le code du bouton à l'intérieur de la forme:

<input id="submit_button" onclick="if(confirmChangeLanguage())showProgressAnimation();else return false;" type="submit" value="Update" />

Ici est le code js:

function confirmChangeLanguage() {
    if ($('#id_language_code').val() != '{{ user.get_profile.language_preference }}') {
        return confirm("Are you sure you want to change the language?");
    } else {
        return true;
    }
}

Le code ci-dessus fonctionne, mais je suis en train de remplacer le js fenêtre pop up de confirmation de code avec un modal bootstrap pour s'adapter avec le reste de mon projet et j'ai rencontré quelques problèmes qui a vraiment confus pour moi.

Ici est le bootstrap modal code qui affiche la modale de confirmation:

$('a[update-confirm]').click(function(ev) {
    var href = $(this).attr('href');
    if (!$('#updateConfirmModal').length) {
        $('body').append('<div id="updateConfirmModal" class="modal modal-confirm-max-width modal-vertical-centered" role="dialog" aria-labelledby="updateConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button><h4 class="modal-title" id="updateConfirmLabel">{% trans "Confirm Language Change" %}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>&nbsp;&nbsp;<a class="btn-u btn-u-blue" id="updateConfirmOK" onclick="showProgressAnimation();">{% trans "Update Langauge View" %}</a></div></div>');
    }
    $('#updateConfirmModal').find('.modal-body').text($(this).attr('update-confirm'));

    $('#updateConfirmOK').attr('href', href);

    $('#updateConfirmModal').modal({show:true});

    return false;
});

Voici le code du bouton pour envoyer le formulaire, mais pas modale est affichée:

<input update-confirm="Are you sure you want to change the language of the website?" class="btn btn-danger" type="submit" value="Submit but NO modal" />

Voici le code du bouton qui affiche le modal, mais ne pas soumettre le formulaire:

<a class="btn btn-warning" href="#" update-confirm="Are you sure you want to change the language of the website?">Modal but NO submit</a>

De toute évidence je suis pas certains de comprendre exactement ce qui se passe ici. L'utilisation d'un < input pour la soumission d'un formulaire sur une < a lien hypertexte a me confondre.

Comment puis-je ajouter dans l'instruction conditionnelle if pour le code modal ET envoyer le formulaire lorsque l'utilisateur clique sur le bouton modal bouton?

pouvez-vous s'il vous plaît ajouter un échantillon sur jsfiddle.net
votre problème vient du fait que bootstrap modal est asynchrone, alors que javascript est confirm() ne l'est pas. Les réponses ci-dessous proposent un moyen de surmonter ce problème. Fondamentalement, vous devez annuler le soumettre immédiatement, et utiliser le formulaire.submit() sur le rappel de bootstrap modal. Je suggère la lecture de la façon dont les rappels de travail sur le javascript recurial.com/programming/...
J'ai tenté d'écrire un rappel pour résoudre cela, mais je ne suis pas d'obtenir le résultat. Si certains peuvent me montrer comment exécuter la fonction de rappel, cela permettrait de gagner des points bonus.

OriginalL'auteur user1261774 | 2014-07-18