Discussion :

[OZ1977]

Bonjour,

Je travaille actuellement sur une appli Django et je souhaite utiliser les fenêtres modal Boostrap 4

J'ai un formulaire avec un bouton 'randomize' et les données ne sont envoyées que si elle sont valides
Je souhaite que lorsque le formulaire est valide (et uniquement à ce moment là) une fenêtre modal (avec 2 boutons Yes/NO) s'ouvre
Si l'utilisateur click sur No, je bloque l'envoie des données (event.preventDefault() je pense) sinon les données sont envoyées

j'ai lu la doc boostrap et il y a 2 façons d'ouvrir la modal :
1. sur click button ayant les attributs data-toggle="modal" et data-target="#exampleModalCenter"
2. avec JS $('#exampleModalCenter').modal('show')

la 1ère solution fonctionne mais pas la 2ème (Object doesn't support property or method 'modal')
or, je pense qu'il faut j'utilise la 2ème méthode car c'est comme çà que je vais pouvoir contrôler l'ouverture de la modal une fois que le formulaire sera valide, enfin je pense...

j'ai donc 3 questions :
1. est-ce que 'ma stratégie' est la bonne ou y-a-t-il une meilleure façon de faire ?
2. pourquoi la méthode modal n'est pas reconnue ?
3. comment je peux récupérer l'info dans JS m'indiquant que le 'formulaire est valide' avant qu'il ne soit envoyé ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block extrahead %}
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
 
	<script>
                $(document).ready(function() {
 
                        $("#form").submit(function() {
                                $('#exampleModalCenter').modal('show')
 
                                        // $("#button_yes").click(function(event){
                                        //
                                        // });
 
                                        // $("#button_no").click(function(event){
                                        //      event.preventDefault()
                                        // });
                        });
                });
        </script>
 
{% endblock %}
{% block title %}Randomization | Intense TBM{% endblock %}
{% block content %}
 
 
<div class='container'>
 
	<h1>Randomization form</h1>
	<br>
	<div class="row">
		<div class="col-sm">
			<strong>Patient code: </strong>{{ preincluded.pat_num }}
		</div>
		<div class="col-sm">
			<strong>Age: </strong>{{ preincluded.age }}
		</div>
		<div class="col-sm">
			<strong>Sex: </strong>
			{% if preincluded.pat_sex == 1 %}
				Male
			{% else %}
				Female
			{% endif %}
 
		</div>
 
	<br><br>
 
	</div>
	    <form id= "form" method="POST" class="post-form">
	    	{% csrf_token %}
	        {{ form |crispy }}
	        <button id="randomize" type="submit" class="btn btn-primary">Randomize</button>
	        <!-- Button trigger modal -->
<!-- 			<button id="randomize" type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
			  Randomize
			</button> -->
	    </form>
 
		<!-- Modal -->
		<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
		  <div class="modal-dialog modal-dialog-centered" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLongTitle">Intense TBM Randomization</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        Do you confirm randomization of this patient?
		      </div>
		      <div class="modal-footer">
		        <button id="button_no" type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
		        <button id="button_yes" type="button" class="btn btn-primary">Yes</button>
		      </div>
		    </div>
		  </div>
		</div>
 
</div>
 
<br><br><br><br>
{% endblock %}

[OZ1977]

J'ai trouvé une solution à mon problème en utilisant jQuery.noConflict();

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
	<script>
		$(document).ready(function() {
 
			$("#form").submit(function(event) {
				var self = $(this);
				event.preventDefault();
				jQuery.noConflict(); 
				$('#randomizationconfirm').modal('show')
						$("#button_yes").click(function(event){
						self.submit();
					});
 
					$("#button_no").click(function(event){
 
					});
			});
		});
	</script>