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> <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?
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
Vous devez vous connecter pour publier un commentaire.
Tout d'abord, ne jamais ajouter des événements dans le balisage, en particulier lors de l'utilisation de jquery
la solution serait simple, il vous suffit d'ajouter votre événement sur soumettre le formulaire (utilisez le bouton, pour la présentation) et ajoutez simplement cliquez sur l'action à l'nommés okbutton
JS
HTML
DÉMO
il ne devrait pas ? sur quelle condition ? lieu
if (condition) {return true;}
au début de l'gestionnaire; (ou après preventDefault(); si vous avez besoin de ne pas soumettre)OriginalL'auteur zb'
vous pouvez utiliser ce normal modal html modèle de bootstrap
avis que, maintenant, vous pouvez définir un
data-condition
nom de la fonction qui doit retournertrue
oufalse
pour montrer lamodal
vous pouvez définir votre
title
etmessage
corps de l'modal par le biais de l'élément de bouton tropdata-message
etdata-title
modal de la bascule devient maintenant
data-toggle="modal-confirm"
et ce js fait le tour
j'ai fait un petit exemple sur jsfiddle
http://jsfiddle.net/ZwAsL/2/
OriginalL'auteur ins0
VIOLON
OriginalL'auteur Lucky Soni
Changer votre bouton de formulaire pour ressembler à ce
Apporter des modifications à votre
confirmChangeLanguage();
fonction javascript comme ceciMaintenant Changer OK balise d'ancrage en Modal
Maintenant l'Appel de la fonction javascript sur le onclick de la balise d'ancrage
Votre modal HTML ressemblera
aller pour le navigateur google chrome -> cliquez sur inspecter l'élément -> aller à la console -> et actualisez votre page de formulaire -> vérification de tout message d'erreur s'affiche dans le navigateur de la console dans la ligne ROUGE de soumettre le formulaire
OriginalL'auteur Oomph Fortuity
J'ai un exemple de travail avec la fonctionnalité strict minimum (et pas la plus jolie), mais il fait ce que vous demandez. http://jsfiddle.net/zMr56/13/
OriginalL'auteur Rawlins
Vous êtes en supposant que l'entrée d'attendre le modal à la fin (par l'utilisateur en cliquant sur un des boutons), mais il ne peut pas savoir le faire, c'est un HTML de base, le contrôle et le modal est créé par Bootstrap, un framework Javascript.
Tout d'abord, vous visez les mauvais élément lors de l'utilisation de <input>, avec le résultat que le <input> ne pas montrer le modal, mais au lieu de cela soumet. C'est parce que vous êtes à la spécification de la requête suivante dans votre "cliquez sur" gestionnaire d'événement:
Votre bouton, cependant, est un <input> n'est pas un <a>. Pour correspondre à la fois (et tous les éléments de la "mise à jour-confirmer" attribut), vous pouvez faire une requête avec
À la place de match que les deux éléments (a, input), l'utilisation
Comme <a>: <a> ne pas soumettre le formulaire est parce que des liens hypertexte ne pas soumettre les formulaires. Vous pouvez cependant envoyer le formulaire dans le gestionnaire de clic d'un lien hypertexte à l'aide
...à partir de votre "$('a[mise à jour-confirm]').cliquez sur()" gestionnaire.
Le <input> tag que vous avez spécifié est un bouton de soumission (type="submit"), qui a pour builtin d'action de la soumission du formulaire. Cependant vous n'êtes pas déclencher un événement lors de la soumission du formulaire, de sorte qu'il ne fait que présenter.
Faire le modal en fait voir la confirmation et soumettre
De gérer à la fois, il suffit de soumettre le formulaire dynamiquement.
Remplacer:
Avec:
Et simplement utiliser le <a> approche que vous avez déjà pour le balisage.
OriginalL'auteur William Lahti
Veuillez consulter le JSFiddle:
http://jsfiddle.net/VfkJ6/3/
Votre code HTML sera:
Et votre JS sera:
Je pense que ça va être explicites. Veuillez demander des éclaircissements si nécessaire.
J'ai utilisé Bootstrap et jQuery.
OriginalL'auteur artfuldev