Doublon bibliothèque JQuery - dropdown menu boostrap ne fonctionne pas

**OZ1977** · 09/11/2019, 12h36

Bonjour,

je galère depuis 2 jours sur l'insertion de mes bibliothèque JS/JQuery
je développe une application Django en utilisant Bootstrap 4 pour la mise en form

j'ai plusieurs template dans lesquels je fais mes inserts de bibliothèque bootstrap et JS/JQuery et j'ai des conflits
j'ai testé dans tous les sens l'ordre d'insertion et il y a toujours une partie qui ne fonctionne pas

en résumé, j'ai les dropdown menu de ma navbar et un popup boostrap que je n'arrive pas à faire fonctionner en même temps
en se connectant à l'appli on arrive sur une page home de l'application : là les dropdown de la navbar fonctionnent
je click sur un lien de cette navbar pour accéder au module randomization et j'arrive sur une 2ème page 'index' avec un tableau : là encore les dropdown de la navbar fonctionnent
si je click sur un lien du tableau, j'arive sur une 3ème page 'randomization_edit' dans laquelle je renseigne les différents champs et je click sur randomize ce qui provoque l'ouverture d'une popup de confirmation (Yes/No)
si je click sur 'yes', çà enregistre en base et me redirige sur une 4ème page 'confirmation' résumant les informations saisies ; si je click sur 'no' on reste sur la page
sur cette 4ème page, les dropdown de la navbar fonctionnent de nouveau

le problème se situe donc sur cette 3ème page : les dropdown de la navbar ne fonctionnent pas

au début je pensais que cela venait de 2 bibliothèques JQuery différentes mais ce n'est visiblement pas le cas
j'ai lu que cela pouvait venir d'une insertion de JQuery en double mais là encore, si je regarde mon debugger chrome, dans Network je ne vois pas de doublon JQuery (en revanche j'ai d'autre doublon bootstrap JS...)

d'avance merci pour votre aide

base.html

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
{% load static %}
{% load widget_tweaks %}
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
 
 
{% block extrahead %}{% endblock %}
 
    <title>{% block title %}Mereva{% endblock %}</title>
 
  </head>
  <body>
    {% include 'layouts/_nav.html' %}     
    {% block content %}{% endblock %}
    {% include 'layouts/_footer.html' %}
    <!--09/11/2019 : config qui fonctionne-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!--09/11/2019 : config qui fonctionne-->
 
{% block extrabody %}{% endblock %}
 
  </body>
</html>

index.html

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
{% load static %}
{% load widget_tweaks %}
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
 
 
{% block extrahead %}{% endblock %}
 
    <title>{% block title %}Mereva{% endblock %}</title>
 
  </head>
  <body>
    {% include 'layouts/_nav.html' %}     
    {% block content %}{% endblock %}
    {% include 'layouts/_footer.html' %}
    <!--09/11/2019 : config qui fonctionne-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!--09/11/2019 : config qui fonctionne-->
 
{% block extrabody %}{% endblock %}
 
  </body>
</html>

randomization_edit.html

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
93
94
95
96
97
{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block extrahead %}
 
<!--09/11/2019 : config qui fonctionne-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
<!--09/11/2019 : config qui fonctionne-->
 
	<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){
                                                $(this).modal('close')
                                        });
                        });
                });
        </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>
	    </form>
 
		<!-- Modal -->
		<div class="modal fade" id="randomizationconfirm" 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>
 
{% block extrabody %}
 
 
 
{% endblock %}
 
 
{% endblock %}

**Toufik83** · 09/11/2019, 13h10

Salut,

Déjà ici tu attaches un événement click aux boutons à chaque submit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$("#form").submit(function(event) {
    ....
    $("#button_yes").click(function(event){
		self.submit();
   });
 
    $("#button_no").click(function(event){
		$(this).modal('close')
    });
    ....
});

Puisque les boutons sont insérés au DOM après que la page est chargée, Il faut donc passer par délégation pour les attacher à un événement click et ça doit être mis en dehors de submit :

Code :

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

1
2
3
4
5
 
$("#form").submit(function(){...});
$("body")
.on('click','#button_yes',function(event){...})
.on('click','#button_no',function(event){...});

Pour mieux t'aider, il faut nous montrer le code html généré (CTRL+U) de la page en question ainsi que son script js accompagnant, parce que le code html que tu as posté en dessus ne sert pas vraiment à grand chose pour comprendre le souci.

**OZ1977** · 09/11/2019, 13h29

merci de prendre le temps de m'aider
ci-dessous le code la page générée sur laquelle les dropdown ne fonctionnent pas

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/static/css/styles.css">
 
 
<!--09/11/2019 : config qui fonctionne-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
<!--09/11/2019 : config qui fonctionne-->
 
	<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){
                                                $(this).modal('close')
                                        });
                        });
                });
        </script>
 
 
    <title>Randomization | Intense TBM</title>
 
  </head>
  <body>
 
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
  <div class="container">
    <a class="navbar-brand" href="/">Intense TBM</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li>
 
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
        </li>
 
          <li class="nav-item">
            <a class="nav-link" href="#">eCRF</a>
          </li>
          <!--<li class="nav-item">
            <a class="nav-link" href="#">Tableau de bord</a>
          </li>-->
          <!--<li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dashoboard</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Patient</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Calendar</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Study follwo-up</a>
            </div>
          </li>-->
          <!--<li class="nav-item">
            <a class="nav-link" href="/monitor/">Monitorage</a>
          </li>-->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Monitoring</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="/monitor/">Data</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Forms</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Discrepencies</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Dashboard</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/randomization/">Randomization</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Export</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Adverse events</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pharmacy</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
 
 
 
      </ul>
 
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Slater
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="/registration/password_change/">Modifier mot de passe</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="/registration/logout/">Deconnexion</a>
            </div>
          </li>
        </ul>
 
    </div>
  </div>
</nav>     
 
 
 
<div class='container'>
 
	<h1>Randomization form</h1>
	<br>
	<div class="row">
		<div class="col-sm">
			<strong>Patient code: </strong>CIV-CE-002
		</div>
		<div class="col-sm">
			<strong>Age: </strong>34
		</div>
		<div class="col-sm">
			<strong>Sex: </strong>
 
				Female
 
		</div>
 
	<br><br>
 
	</div>
	    <form id="form" method="POST" class="post-form">
	    	<input type="hidden" name="csrfmiddlewaretoken" value="hiqJaiOHc2OfeWeoANx2Cuif23wuAeyccrJ89lxK8TL6QaTHmz81c1nhC8d3VYIq">
 
 
<input type="hidden" name="ran_num" value="CIV-CE-002" id="id_ran_num"> <div id="div_id_ran_dat" class="form-group"> <label for="id_ran_dat" class="col-form-label  requiredField">
                Today's date<span class="asteriskField">*</span> </label> <div class=""> <input type="date" name="ran_dat" value="09/11/2019" placeholder="Date" class="dateinput form-control" required id="id_ran_dat"> </div> </div> <div id="div_id_ran_inv" class="form-group"> <label for="id_ran_inv" class="col-form-label  requiredField">
                Investigator<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="ran_inv" class="textinput textInput form-control" required id="id_ran_inv"> </div> </div> <div id="div_id_ran_pro" class="form-group"> <label for="id_ran_pro" class="col-form-label  requiredField">
                Type<span class="asteriskField">*</span> </label> <div class=""> <select name="ran_pro" class="select form-control" required id="id_ran_pro"> <option value="" selected></option> <option value="1">On-line</option> <option value="2">Telephon</option>
 
</select> </div> </div> <div id="div_id_ran_pro_per" class="form-group"> <label for="id_ran_pro_per" class="col-form-label  requiredField">
                if telephone, name of the person reached on the phone<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="ran_pro_per" class="textinput textInput form-control" required id="id_ran_pro_per"> </div> </div> <div id="div_id_ran_crf_inc" class="form-group"> <label for="id_ran_crf_inc" class="col-form-label  requiredField">
                Was the CRF inclusion 1 TB diganosis fulfilled?<span class="asteriskField">*</span> </label> <div class=""> <select name="ran_crf_inc" class="select form-control" required id="id_ran_crf_inc"> <option value="" selected></option> <option value="1">Yes</option> <option value="0">No</option>
 
</select> </div> </div> <div id="div_id_ran_tbc" class="form-group"> <label for="id_ran_tbc" class="col-form-label  requiredField">
                Is TB diagnosis possible, probable or definite?<span class="asteriskField">*</span> </label> <div class=""> <select name="ran_tbc" class="select form-control" required id="id_ran_tbc"> <option value="" selected></option> <option value="1">Possible</option> <option value="2">Probable</option> <option value="3">Definite</option>
 
</select> </div> </div> <div id="div_id_ran_crf_eli" class="form-group"> <label for="id_ran_crf_eli" class="col-form-label  requiredField">
                Was the CRF Inclusion 2 Eligibility fulffiled?<span class="asteriskField">*</span> </label> <div class=""> <select name="ran_crf_eli" class="select form-control" required id="id_ran_crf_eli"> <option value="" selected></option> <option value="1">Yes</option> <option value="0">No</option>
 
</select> </div> </div> <div id="div_id_ran_cri" class="form-group"> <label for="id_ran_cri" class="col-form-label  requiredField">
                Is the conclusion All criteria fulfilled for randomisation<span class="asteriskField">*</span> </label> <div class=""> <select name="ran_cri" class="select form-control" required id="id_ran_cri"> <option value="" selected></option> <option value="1">Yes</option> <option value="0">No</option>
 
</select> </div> </div> <div id="div_id_ran_sta" class="form-group"> <label for="id_ran_sta" class="col-form-label  requiredField">
                British Medical Council Staging (worst stage reported between first symptoms and now)<span class="asteriskField">*</span> </label> <div class=""> <select name="ran_sta" class="select form-control" required id="id_ran_sta"> <option value="" selected></option> <option value="1">Mild</option> <option value="2">Severe</option>
 
</select> </div> </div> <div id="div_id_ran_vih" class="form-group"> <label for="id_ran_vih" class="col-form-label  requiredField">
                HIV/AIDS status<span class="asteriskField">*</span> </label> <div class=""> <select name="ran_vih" class="select form-control" required id="id_ran_vih"> <option value="" selected></option> <option value="0">Negative</option> <option value="1">Positive</option>
 
</select> </div> </div>
 
	        <button id="randomize" type="submit" class="btn btn-primary">Randomize</button>
	    </form>
 
		<!-- Modal -->
		<div class="modal fade" id="randomizationconfirm" 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>
 
 
 
 
 
 
 
 
 
    <footer class="footer">
    <div class="container" style="text-align: center;">
    	<span class="text-muted">© 2019 Copyright :
    <a href="http://mereva.isped.u-bordeaux2.fr" target="_blank"> Mereva</a></span>
    </div>
</footer>
    <!--09/11/2019 : config qui fonctionne-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!--09/11/2019 : config qui fonctionne-->
 
  </body>
</html>

**Toufik83** · 09/11/2019, 13h59

Tu charges jQuery et bootstrap 2 fois, les lignes 11 et 12 puis 222 et 224.

Supprimes les importations du début, et déplace le script de submit après la ligne 225, parce qu'il a besoin de jQuery pour fonctionner.

**OZ1977** · 10/11/2019, 18h06

j'ai modifié mon fichier randomization_edit.html (code ci-dessous)
je n'ai plus de doublons (cf code source généré)

en revanche, la fenêtre modal ne s'affiche plus et lorsque je click 2 fois sur le bouton 'randomize', cela valide la randomisation et me renvoie vers le formulaire de confirmation donc ce n'est pas le comportement attendu...

randomization_edit.html :

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
{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block extrahead %}{% 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>
	    </form>
 
		<!-- Modal -->
		<div class="modal fade" id="randomizationconfirm" 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 %}
 
{% block extrabody %}
<script>
        $(document).ready(function() {
 
                $("#form").submit(function(event) {
                        var self = $(this);
                        event.preventDefault();
                        jQuery.noConflict(); 
                        $('#randomizationconfirm').modal('show')
 
                });
 
 
        $("body")
        .on('click','#button_yes',function(event){
                self.submit();
        })
        .on('click','#button_no',function(event){
                $(this).modal('close')
        });
 
        });
 
</script>
{% endblock %}

code généré :

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
{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block extrahead %}{% 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>
	    </form>
 
		<!-- Modal -->
		<div class="modal fade" id="randomizationconfirm" 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 %}
 
{% block extrabody %}
<script>
        $(document).ready(function() {
 
                $("#form").submit(function(event) {
                        var self = $(this);
                        event.preventDefault();
                        jQuery.noConflict(); 
                        $('#randomizationconfirm').modal('show')
 
                });
 
 
        $("body")
        .on('click','#button_yes',function(event){
                self.submit();
        })
        .on('click','#button_no',function(event){
                $(this).modal('close')
        });
 
        });
 
</script>
{% endblock %}

**OZ1977** · 11/11/2019, 16h58

en fait je faisais une erreur en déclarant ma variable (self que j'ai renommé en popup) dans le 'submit'

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
20
21
22
23
24
25
26
27
<script>
	var popup;
 
	$(document).ready(function() {
 
		var prevent = false;
 
		$("#form").submit(function(event) {
			if(!prevent){
				event.preventDefault();
			}
			popup = $(this);
			$('#randomizationconfirm').modal('show')
 
		});
 
		$("body")
		.on('click','#button_yes',function(event){
			prevent = true;
			popup.submit();
		})
		.on('click','#button_no',function(event){
			$(this).modal('close')
		});
	});
 
</script>

Doublon bibliothèque JQuery - dropdown menu boostrap ne fonctionne pas

jQuery

Discussions similaires

Partager

Partager