Doublon bibliothèque JQuery - dropdown menu boostrap ne fonctionne pas
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:
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:
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:
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">×</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 %} |
erreur portée variable...
en fait je faisais une erreur en déclarant ma variable (self que j'ai renommé en popup) dans le 'submit'
Code:
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> |
