Bonjour j'utilise jquery dans un projet single page mais le problème c'est que lorsque la page se charge elle n'excuse pas le code Java script et je ne comprends pas pourquoi?

Le javascript est tout simplement ignoré ce qui empêche mon script de fonctionne correctement.

J'ai intégré mon script dans la page loader et ça marche au 1er lancement mais pas au 2eme.

Merci de m'aider. 

Je pense qu'il va falloir un minimum de code pour pouvoir t'aider.

Ton script est-il bien chargé ? Pour ma part je n'hésite pas à demander en premier lieu un console.log() pour vérifier ça. Si le message de confirmation n'apparaît pas dans la console de développement, c'est probablement un problème d'adresse du script.

A vérifier également dans la console les éventuelles erreurs fatales qui te plantent le script pour de bon ( plus aucune instruction javascript ne sera exécutée ).

Bonjour, sans code tendu de voir ce qui ne vas pas et vu que tu utilises jquery soit tu n'as pas integre jquery a ta page avant d'utiliser du code jquery soit tu as mal mis le chemin vers ton fichier .js soit tu as une ligne qui fais tout planter comme l'a dit lucaswerquin.

Le js qui fonctionne la première fois et plus après me fait plutôt penser à la dernière option. Doit y avoir des infos dans la console. Le raccourci c'est F12, c'est ça ? Sinon moi je clique droit sur la page et je fais "inspecter", ça ouvre les outils de développement, et là il y a un onglet console.

Je passe aussi par le click droit je ne connais pas le raccourci de console mais bon on attend voir sa reponse

voici le menu

<ul>
   <li><a href="#prerequis" id="link_prerequis">Prerequis</a></li>
   <li><a href="#participants-cibles" id="link_participants-cibles">Participants cibles</a></li>
   <li><a href="#objectifs" id="link_objectifs">Objectifs</a></li>
   <li><a href="#points-cles" id="link_points-cles">Les points clés</a></li> </ul>

Donc au clic on fait un load de la page prerequis.js soit autre, etc. et 

<div class="section-header">
	<h1>Prérequis</h1>
</div>
<div class="section-content">
	<p>Les prérequis suivants seront affichés sur le page d'accueil du
		cours. Ces prérequis doivent respecter les spécifications suivanes:</p>

	<ul>
		<li>Etre explicite</li>
		<li>La longueur du texte doit être supérieure à 3 caractères</li>
	</ul>
	
	<div>
		<div>
			<b>Quels sont les prérequis de ce cours</b>
			<p>Dressez la liste des compétences, de l'expérience, des outils ou de l'équipement que les participants doivent posséder pour suivre votre cours. S'il n'y a pas de prérequis, profitez-en pour simplifier la tâche des débutants.</p>
			<form id="prerequis-form">
				<textarea id="prerequis" name="prerequis"><c:out value="${requestScope.formation.prerequis}" /></textarea>
				
				<button type="button" id="prerequis-save">Valider les prerequis</button>
			</form>
		</div>
	</div>

</div>

Le btn dans prerequis.js doit ensuite faire de l'ajax avec $.post du formalaire mais le probleme c'est que lorsqu'on click rien ne se passe comme si le clic etait tout simplement ignoré je ne sais pas pourquoi.

j'espere avoir été un peu clair

Voici le js

$("#link_prerequis").click(function(){
		$(".formation-infos-container").html("")
		$(".formation-infos-container").load("/inc/other/edit/prerequis.jsp");
		$(".edit-menu-container ul li a").css({color:"black"})
		$(this).css({color:"red"})
	});
	
	$("#link_participants-cibles").click(function(){
		$(".formation-infos-container").html("")
		$(".formation-infos-container").load("/inc/other/edit/participants-cibles.jsp");
		$(".edit-menu-container ul li a").css({color:"black"})
		$(this).css({color:"red"})
	});

-
Edité par Vickson5118 9 octobre 2021 à 20:12:33

je ne vois pas ou tu fais le $.post() dont tu parles, il faut mettre toutes les parties du code qui concerne ton soucis.

si j'ai bien compris tu veux juste faire un truc du style

$("#monboutton").click(function(){

$.post("destination.php",{...},function(data){...});

});

Sauf que toi tu veux faire un .load("file.js"); puis ensuite faire le $.post pour charger grace a ca le fichier js c'est ca ?

-
Edité par zvheer 9 octobre 2021 à 21:15:04

voici exactement ce que je veux faire.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>

    <a href="#clic" id="index-click">Cliquez-moi</a>

    <div id="root"></div>
    
    <script src="js/jquery.js"></script>
    <script src="js/index.js" type="text/javascript"></script>
</body>
</html>

include.html

<h1>Include</h1>

    <button id="btn-click">Cliquez moi</button>

index.js

$(document).ready(function(){
    
    $("#index-click").click(function(event){
        $("#root").load("include.html");
    })

    $("#btn-click").click(function(){
        alert("hello");
    })

})

Le probleme c'est que lorsqu'on clique sur sur le btn de la page include apres le load le script ne marche pas et je comprends pas pourquoi

Le probleme que je rencontre c'est que lorsque je clic sur lien de la page index et que la page include est inclut lorsque je clic sur le btn de la page include la boite de dialogue alert ne s'affiche pas

-
Edité par Vickson5118 9 octobre 2021 à 21:43:17

Bonsoir,  Comme ceci :

            $(document).ready(function () {

                $("#index-click").click(function (event) {
                    $("#root").load("include.html", function () {
                        $("#btn-click").click(function () {
                            console.log('click');
                            alert("hello");
                        });
                    });
                });
            });

Voir la doc : https://api.jquery.com/load/

Regarde dans ta console ce qui se passe au click de ton boutton

oubli pas les ; apres les balises jquery

$("#root").load("include.html");

peut etre qu'une erreur de syntaxe comme ca fait buger.

et au lieu de faire en plusieurs parties utilise la fonction retour de .load pour faire ton event.

update abc a ecris avant moi c'est de sa dont je voulais parler regarde son message

.load("tatati",function(){ici l .click});

-
Edité par zvheer 9 octobre 2021 à 22:18:35

Merci c'est probleme est regler. Mon 2eme probleme est que j'utilise la biblotheque tinyMce mais lorsque je fais le load le textarea doit se transformer en un editeur mais je ne sais pas pourquoi mais le script tiny ne fonctionne pas.

voici la page index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script type="text/javascript" src='https://cdn.tiny.cloud/1/l73er7djbvbpa298c8l2qj392fkmpvcj9f9987c3kgsb53xf/tinymce/5/tinymce.min.js' referrerpolicy="origin"></script>
</head>
<body>

    <a href="#clic" id="index-click">Cliquez-moi</a>

    <div id="root"></div>
    
    <script src="js/jquery.js"></script>
    <script src="js/index.js" type="text/javascript"></script>
    <script type="text/javascript">
        tinymce.init({
		selector: '#prerequis',
		language: "fr_FR",
		plugins: 'save lists',
		menubar: false,
		toolbar: 'save | undo redo | bold italic underline | bullist',
		save_onsavecallback: function() {
			$.post("/update-formation-description", { prerequis: tinyMCE.get('prerequis').getContent() })
		}
	});
    </script>
</body>
</html>

 et voici la page include.html

La page index.js

$(document).ready(function(){
    
    $("#index-click").click(function(event){

        $("#root").load("../other/include.html",function(){
            $("#btn-click").click(function(){
                alert("hello");
            })
        });

        
    })

    

})

Le script tiny est dans un fichier et sur la page index.html mais j'ai l'impression que le textarea ignore ce script

-
Edité par Vickson5118 10 octobre 2021 à 2:51:54

Bonsoir,

>> lorsque je fais le load le textarea doit se transformer en un editeur mais je ne sais pas pourquoi mais le script tiny ne fonctionne pas.

Vous n'avez pas compris mon exemple!! Vous n'avez pas lu le lien de la doc que j'ai donné. C'est dans la fonction de callback que doit ce trouver l'initiation de tinyMce, pas dans un script à part.

Vous êtes obligé d'attendre le chargement de la page include.html pour lancer l'initiation de tiny, si vous le faite avant ben.... le JS s’exécute bien mais sur rien puisque le textarea n'est pas encore dans le DOM. 

---

Comme vous précisez la problématique que vous rencontrez merci d'indiquer un titre descriptif à votre problématique.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Mon js ne fonctionne pas)

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

AbcAbc6 a écrit:

Bonsoir,

>> lorsque je fais le load le textarea doit se transformer en un editeur mais je ne sais pas pourquoi mais le script tiny ne fonctionne pas.

Vous n'avez pas compris mon exemple!! Vous n'avez pas lu le lien de la doc que j'ai donné. C'est dans la fonction de callback que doit ce trouver l'initiation de tinyMce, pas dans un script à part.

Vous êtes obligé d'attendre le chargement de la page include.html pour lancer l'initiation de tiny, si vous le faite avant ben.... le JS s’exécute bien mais sur rien puisque le textarea n'est pas encore dans le DOM. 

J'avais deja essayé cette maniere de faire mais ca ne fonctonne pas. La 1ere fois le script se charge mais au 2eme clic cela ne fonctionne plus.

PS : Désolé pour le titre.

-
Edité par Vickson5118 10 octobre 2021 à 11:26:55