Menu
I try to understand why my jquery script doesn't work at all in my php included files. index.php:
<?PHP
session_start();
include_once("./tools/globalFunction.php");
?>
<!doctype html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Jojo Site</title>
</head>
<body>
<?PHP
include_once("application.php");
include_once("layout/menu.php");
include_once("layout/loginModal.php");
include_once("layout/container.php");
include_once("layout/footer.php");
?>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript" src="./editor/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./js/javaScriptGlobalFunction.js"></script>
</body>
</html>
menu.php:
<div class="collapse navbar-collapse justify-content-end" id="navbarNavConnexion">
<ul class="navbar-nav">
<li id="adminButton" class="nav-item">
<?php
if (!$_SESSION['admin']){?>
<button id="connexion" class="btn btn-dark" href="#" data-toggle="modal" data-target="#loginModal">Connexion</button> <?php ;}
else {?>
<button id="deconnexion" class="btn btn-dark" href="#" >Déconnexion</button> <?php ;}
?>
</li>
</ul>
</div>
javaScriptGlobalFunction.php:
$("#Connexion").click(function(){
alert('connexion')
});
$("#Deconnexion").click( function() {
alert('déconnexion')
});
With those code lines it doesn't work whereas if i put the jquery script include and my script at the end of the menu file like :
<div class="collapse navbar-collapse justify-content-end" id="navbarNavConnexion">
<ul class="navbar-nav">
<li id="adminButton" class="nav-item">
<?php
if (!$_SESSION['admin']){?>
<button id="connexion" class="btn btn-dark" href="#" data-toggle="modal" data-target="#loginModal">Connexion</button> <?php ;}
else {?>
<button class="btn btn-dark" href="#" id="deconnexion">Déconnexion</button> <?php ;}
?>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#deconnexion").click(function(){alert('deconnexion')});
</script>
It's run... Is there something i didn't seen well or i have to place jquery and script directly in each file?
538
It's probably not working because in javaScriptGlobalFunction.js you're trying to find elements by id with first letter in uppercase, while in html id is all lowercase.
In javaScriptGlobalFunction.js change
$("#Connexion").click(function(){
alert('connexion')
});
$("#Deconnexion").click( function() {
alert('déconnexion')
});
to
$("#connexion").click(function(){
alert('connexion');
});
$("#deconnexion").click(function() {
alert('déconnexion');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
