Comment appliquer du JS après un appel à AjaxRequest ?

Fermé
ajaxrequest_VS_JS - 5 juin 2015 à 09:51
 ajaxrequest_VS_JS - 5 juin 2015 à 13:45
Bonjour,
Je souhaite cacher le champ nommé "sépulture", et ne l'afficher que si le champ "Etat = "2".
J'ai une fonction qui marche bien pour cela, SAUF que j'ai eu besoin de modifier mon code, et d'utiliser 2 pages, l'une pour rechercher, et l'autre pour afficher les champs. Du coup, ça ne marche plus.
La 1ère page appelle la 2ème à l'aide de la fonction ajaxrequest. Dans tout mon code où j'ai ajaxrequest, le javascript ne fonctionne pas. Comment charger le JS dans ce cas ?

Merci

5 réponses

jordane45 Messages postés 38197 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 675
5 juin 2015 à 10:08
Bonjour,

1 - As tu regardé avec les outils de debogage de ton navigateur internet (je te conseille d'utiliser le plugin FIREBUG pour FIREFOX) si il n'y aurait pas des erreurs de script indiquées dans la console ?

2 - Sans voir ton code.. il sera assez difficile de voir ce qui bloque ... ta question ne me semblant très clair ...


PS : **** Attention ****
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

.
1
ajaxrequest_VS_JS
5 juin 2015 à 10:35
Merci pour votre réponse.
Firebug ne détecte pas d'erreurs.
Voici le code des deux pages :
Page 1 :
$(window).load(function () {
     $(document).ready(function () {
	$('#sepulture_section').hide();
					
	$('#etat').on('change', function() {
		if($(this).val() === '2') {
			$('#sepulture_section').show();
		} else {
			$('#sepulture_section').hide();
		}
	});
});
 });
// Ici le code de la fonction ajaxRequest

<!------------------------Appel à la page 2-------------------->
<h4 style="cursor:pointer" onclick="ajaxrequest('lecture_categorisation.php', 'message')"><u>Rechercher</u></h4>


Page 2 :
<section class="col col-6">
	<label class="select">
		<select id="etat" name="etat">
			<OPTION VALUE="">Etat*</OPTION>';
			while ($donnees3 = $reponse3->fetch(PDO::FETCH_ASSOC))
				{if ($donnees3["id_etat"]==$etat)
					echo '<OPTION VALUE="'.$donnees3["id_etat"].'" selected="selected">'.$donnees3["etat"].'</OPTION>';
				else
					echo '<OPTION VALUE="'.$donnees3["id_etat"].'">'.$donnees3["etat"].'</OPTION>';
				} 
echo		'</select>
		<i></i>
	</label>
</section>
<section id="sepulture_section" class="col col-6">
	<label class="select">
		<select id="sepulture" name="sepulture">
			<OPTION VALUE="">Sépulture*</OPTION>';
				while ($donnees4 = $reponse4->fetch(PDO::FETCH_ASSOC))
				{if ($donnees4["id_sepulture"]==$sepulture)
					echo '<OPTION VALUE="'.$donnees4["id_sepulture"].'" selected="selected">'.$donnees4["sepulture"].'</OPTION>';
				else
					echo '<OPTION VALUE="'.$donnees4["id_sepulture"].'">'.$donnees4["sepulture"].'</OPTION>';
echo		'</select>
		<i></i>
</label>
</section>
0
ajaxrequest_VS_JS
5 juin 2015 à 10:45
J'ai utilisé jQuery aussi, sans ça, ça ne va pas marcher!
0
ajaxrequest_VS_JS
5 juin 2015 à 11:10
Voilà le résultat, si j'écrivais tout sur la même page :
http://codepen.io/anon/pen/oXWvvb
0
jordane45 Messages postés 38197 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 675
5 juin 2015 à 11:23
Premier truc qui me gene .. c'est que tu fais appels dans ton script de ta page 1 à l'élément $('#etat') ...... alors que celui-ci n'existe pas ... (sauf dans la page 2... qui ne sera chargée qu'après le click sur ton -Appel à la page 2 ....
Normal que ça ne marche pas !

A la limite... il faut déplacer ton code
  $(document).ready(function () {
	$('#sepulture_section').hide();
					
	$('#etat').on('change', function() {
		if($(this).val() === '2') {
			$('#sepulture_section').show();
		} else {
			$('#sepulture_section').hide();
		}
	});
});

Dans ta page 2 directement !
0
ajaxrequest_VS_JS
5 juin 2015 à 11:35
J'ai essayé de le mettre à la page 2 mais ça mais ça ne change rien.
0
ajaxrequest_VS_JS
5 juin 2015 à 12:03
Peut-être parce que mes champs sont en PHP
0
ajaxrequest_VS_JS
5 juin 2015 à 12:11
J'ai mis les champs en HTML, et le code javascript sur la même page ainsi que le lien jquery. Le résultat est le même, la fonction JS ne s'applique pas :(
0
jordane45 Messages postés 38197 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 675
5 juin 2015 à 13:01
Faudrait que je teste chez moi pour voir ce qui ne fonctionne pas.
Colle nous le code complet de ta page 1 dans le fofo stp.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
ajaxrequest_VS_JS
5 juin 2015 à 13:45
Code page 1 :
<?php
/*Connexion BDD*/
include("connexion.php");  
include("menu.php");
//date en France
date_default_timezone_set('Europe/Paris');
?>
<!DOCTYPE html> 
<html>
	<head>
		<title>Capitalisation RLF</title>
		<!-- Fonction JQUERY Auto-complete -->		
			<script type="text/javascript" src="js/jquery.min (2).js"></script>
			<script type="text/javascript" src="js/script (2).js"></script>
		<!-- FIN JQUERY Auto complete-->  
		
		<script type='text/javascript'>//<![CDATA[
            $(window).load(function () {
                $(document).ready(function () {
					$('#statut').hide();
					$('#sepulture_section').hide();
					
					$('#contexte').on('change', function() {
						if($(this).val() === 'WWII') {
							$('#statut').show();
						} else {
							$('#statut').hide();
					}
					});
					
					$('#etat').on('change', function() {
						if($(this).val() === '2') {
							$('#sepulture_section').show();
						} else {
							$('#sepulture_section').hide();
					}
					});
				
				});
            });//]]>  
		</script> 
		
<!-- Gérer le bouton Rechercher -->
<!-- 1. Fonction dans Header-->		
	<script type="text/javascript">
    function get_XmlHttp() {
      var xmlHttp = null;

      if(window.XMLHttpRequest) {        // Firefox, IE7+, Opera, Safari, ...
        xmlHttp = new XMLHttpRequest();
      }
      else if(window.ActiveXObject) {    // Internet Explorer 5 or 6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      return xmlHttp;
    }

    function ajaxrequest(php_file, tagID) {
      var request =  get_XmlHttp();
      var id_struct = document.getElementById('id_struct').value;

      // var  the_data = 'depot_mail='+document.getElementById('depot_mail').value; valeur de test initiale
      // la ligne du dessous est mon exemple de champs
      // var the_data = 'thematique='+thematique+'&id_struct='+id_struct+'&desc_contact='+desc_contact+'&nom_struct='+nom_struct+'&nom_service='+nom_service+'&adres_struct='+adres_struct+'&code_postal='+code_postal+'&ville='+ville+'&pays='+pays+'&tel_struct='+tel_struct+'&fax_struct='+fax_struct+'&mail_struct='+mail_struct+'&page_web='+page_web;
	var the_data = 'id_struct='+id_struct;
	//var  the_data = 'id_struct='+document.getElementById('id_struct').innerHTML;
	  request.open("POST", php_file, true);            

      request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      request.send(the_data);

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          document.getElementById(tagID).innerHTML = request.responseText;
        }
      }
    }
    </script>
<!--Fin fonction header-->	
		
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-forms.css">
		<link rel="stylesheet" href="css/sky-forms-red.css">
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-forms-ie8.css">
		<![endif]-->
		
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script src="js/jquery.maskedinput.min.js"></script>
		<script src="js/jquery.modal.js"></script>
		<!--[if lt IE 10]>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->		
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<script src="js/sky-forms-ie8.js"></script>
		<![endif]-->
		
		
		
	</head>
	
	<body class="bg-red">
		<div class="body">		
			<form action="" id="sky-form2" class="sky-form" method="post" onsubmit="return muModal(this)">
				<header>Catégorisation</header>

				<fieldset>
					<div class="row">	
					<!--Nom contact -->
						<section>
							<label class="input">
								<input type="text" name="id_struct" id="id_struct" placeholder="Nom du contact" onkeyup="autocomplet()">
								<ul id="country_list_id"></ul>
							</label>
							<i></i>
						
						</section>
						<!-- 3. Traitement -->
							<h4 style="cursor:pointer" onclick="ajaxrequest('lecture_categorisation.php', 'message')"><u>Rechercher</u></h4>
					
					<div id="message"></div>
					<!--Fin -->
					</div>
				</fieldset>	
					
			
				
				<footer>
					<button type="submit" class="button" name="valider">Insérer</button>
					<!--<a href="#sky-form" class="button button-secondary modal-opener">Contrôler</a>-->
					<button type="submit" class="button" name="modifier">Modifier</button>
					<button type="submit" class="button" name="supprimer">Supprimer</button>
				</footer>
			</form>			
		</div>	
<?php
// Bouton VALIDER
if (isset($_POST['valider']))
	{ 			
			$nom_contact=$_POST['id_struct'];
    		$reponse = $bdd->query("SELECT * FROM structure WHERE nom_contact='$nom_contact'");
			$donnees = $reponse->fetch(PDO::FETCH_ASSOC);	
			$id_struct=$donnees['id_struct'];
			while ($donnees = $reponse->fetch(PDO::FETCH_ASSOC))
				 if ($donnees["id_struct"]==$id_struct)	
			$id_struct=$donnees['id_struct'];	
			$sql = "SELECT count(*) FROM categorisation WHERE id_struct='$id_struct'";
			$result = $bdd->query($sql);
			$row = $result->fetch(PDO::FETCH_NUM);
			if($row[0]!=0) //J'ai trouvé un champ
			{	//echo "champ trouvé catégorisation déjà insérée, vous ne pouvez plus insérer!";
?>		<script langage="javascript">
			alert("La catégorisation existe deja !!");
			document.location.href="ajouter_categorisation.php"; 
		</script>
<?php
} 

else
	{		//echo"champ non trouvé, catégorisation non insérée, donc insertion possible";
				$nationalite=(isset($_POST['nationalite']) && !empty($_POST['nationalite']))?($_POST['nationalite']):'NULL';  
				$statut_conflit=(isset($_POST['statut_conflit']) && !empty($_POST['statut_conflit']))? "'".$_POST['statut_conflit']."'":'NULL'; 
				$etat=(isset($_POST['etat']) && !empty($_POST['etat']))? "'".$_POST['etat']."'":'NULL';								
				//$sepulture=$_POST['id_sepulture'];													
				$sexe=(isset($_POST['sexe']) && !empty($_POST['sexe']))? "'".$_POST['sexe']."'":'NULL';								
				$age=(isset($_POST['age']) && !empty($_POST['age']))? "'".$_POST['age']."'":'NULL';
				$particularite=(isset($_POST['particularite']) && !empty($_POST['particularite']))? "'".$_POST['particularite']."'":'NULL';
				$confession=(isset($_POST['confession']) && !empty($_POST['confession']))? "'".$_POST['confession']."'":'NULL';
				$institution=(isset($_POST['institution']) && !empty($_POST['institution']))? "'".$_POST['institution']."'":'NULL';
				$administrative=(isset($_POST['administrative']) && !empty($_POST['administrative']))? "'".$_POST['administrative']."'":'NULL';
				$aide_sociale=(isset($_POST['aide_sociale']) && !empty($_POST['aide_sociale']))? "'".$_POST['aide_sociale']."'":'NULL';
				$date_ajout = date('Y-m-d H:i:s'); 
	

$bdd->exec("INSERT INTO categorisation VALUES (null,$id_struct,$nationalite,$statut_conflit,$etat,4,$sexe,$age,$particularite,$confession,$institution,$administrative,$aide_sociale,'$date_ajout',NULL)") or print_r($bdd->errorInfo());	
?>		<script langage="javascript">
			alert("La catégorisation a bien ete inseree");
			document.location.href="ajouter_categorisation.php"; 
		</script>
<?php

}}

// Bouton MODIFIER
if (isset($_POST['modifier']))
	{ 
			$nom_contact=$_POST['id_struct'];
				//echo $nom_contact;

    		$reponse = $bdd->query("SELECT * FROM structure WHERE nom_contact='$nom_contact'");
			$donnees = $reponse->fetch(PDO::FETCH_ASSOC);	
			$id_struct=$donnees['id_struct'];
			while ($donnees = $reponse->fetch(PDO::FETCH_ASSOC))
				 if ($donnees["id_struct"]==$id_struct)	
			$id_struct=$donnees['id_struct'];	

			$sql = "SELECT count(*) FROM categorisation WHERE id_struct='$id_struct'";
			$result = $bdd->query($sql);
			$row = $result->fetch(PDO::FETCH_NUM);
			if($row[0]!=0)
				{	//echo "champ trouvé MODIFICATION DE categorisation possible!";


				$nationalite=(!empty($_POST['nationalite']))?($_POST['nationalite']):'NULL';  
				$statut_conflit=(!empty($_POST['statut_conflit']))? $_POST['statut_conflit']:'NULL'; 
				$etat=(!empty($_POST['etat']))? $_POST['etat']:'NULL';								
				//$sepulture=$_POST['id_sepulture'];													
				$sexe=(!empty($_POST['sexe']))? $_POST['sexe']:'NULL';								
				$age=( !empty($_POST['age']))? $_POST['age']:'NULL';
				$particularite=(!empty($_POST['particularite']))? $_POST['particularite']:'NULL';
				$confession=(!empty($_POST['confession']))? $_POST['confession']:'NULL';
				$institution=(!empty($_POST['institution']))? $_POST['institution']:'NULL';
				$administrative=(!empty($_POST['administrative']))? $_POST['administrative']:'NULL';
				$aide_sociale=(!empty($_POST['aide_sociale']))? $_POST['aide_sociale']:'NULL';
				$date_maj = date('Y-m-d H:i:s'); 
				
$bdd->exec("UPDATE categorisation SET id_nationalite=$nationalite, id_statut_conflit=$statut_conflit, id_etat=$etat, id_sexe=$sexe, id_age=$age, id_particularite=$particularite, id_confession=$confession, id_institution=$institution, id_administrative=$administrative, id_aide_sociale=$aide_sociale,date_maj='$date_maj' WHERE id_struct=$id_struct") or print_r($bdd->errorInfo());	

?>
<script langage="javascript">
			alert("La catégorisation a bien \351t\351 modifi\351e");
			document.location.href="ajouter_categorisation.php"; 
		</script>
<?php
				}	
else {
		//echo "Rien trouvé MODIFICATION DE categorisation impossible!";}
		?>
		<script langage="javascript">
			alert("La catégorisation n'existe pas. Veuillez inserer une categorisation avant de modifier");
			document.location.href="ajouter_categorisation.php"; 
		</script>
<?php
}	
	}
// Bouton SUPPRIMER
if (isset($_POST['supprimer']))
	{ 
			$nom_contact=$_POST['id_struct'];
    		$reponse = $bdd->query("SELECT * FROM structure WHERE nom_contact='$nom_contact'");
			$donnees = $reponse->fetch(PDO::FETCH_ASSOC);	
			$id_struct=$donnees['id_struct'];
			while ($donnees = $reponse->fetch(PDO::FETCH_ASSOC))
				 if ($donnees["id_struct"]==$id_struct)	
			$id_struct=$donnees['id_struct'];	
			$sql = "SELECT count(*) FROM categorisation WHERE id_struct='$id_struct'";
			$result = $bdd->query($sql);
			$row = $result->fetch(PDO::FETCH_NUM);
			if($row[0]!=0)
				{	//echo "champ trouvé SUPPRESSION DE categorisation possible!";		
				$bdd->exec("DELETE FROM categorisation WHERE id_struct='$id_struct'");
	
?>
		<script langage="javascript">
			alert("La catégorisation a bien \351t\351 supprim\351e");
			document.location.href="ajouter_categorisation.php"; 
		</script>
<?php
} 		
else {
		
	?>
		<script langage="javascript">
			alert("Suppression impossible. Cette structure n'a pas été catégorisée !");
			document.location.href="ajouter_categorisation.php"; 
		</script>
<?php
} 		
	}
?>
		</form>
	</body>
</html>

0