Comment faire fonctionner du code javascript sur une page, lorsque celle-ci, fait appel à une autre page ?

Version imprimable

05/06/2015, 12h36
geeka

Comment faire fonctionner du code javascript sur une page, lorsque celle-ci, fait appel à une autre page ?

Bonjour,

PS : le code JS fonctionne dans les 2 pages, mais séparément
05/06/2015, 12h45
SpaceFrog

je ne ne comprends pas le lien entre tes deux pages ... mère fille ? iframe ..; aute ?
05/06/2015, 14h19
geeka

Merci pour votre réponse.
Le lien entre les pages c'est cette ligne de la page 1 :

Code:

<h4 style="cursor:pointer" onclick="ajaxrequest('page_2', 'message')"><u>Rechercher</u></h4>
05/06/2015, 14h25
Bovino

Il va falloir commencer par expliquer clairement ton problème, parce que là, ça relève plus de la télépathie qu'autre chose pour comprendre ce que tu veux faire.
Ensuite, il faudra montrer un peu plus de code qu'un simple appel de fonction...
05/06/2015, 15h43
javatwister

bonjour à tous

Eh bien je crois comprendre que la fonction ajaxrequest() doit se trouver quelque part dans le code de la page 1;

Citation:

le code JS fonctionne dans les 2 pages, mais séparément

Là je sèche;

La fonction Javascript permet de faire apparaître/disparaître le champ 'sépulture' d'après la valeur du champ 'état' : si la valeur du champ etat="2" alors le champ 'sépulture apparaît', sinon il n'apparaît pas.
Voici des fragments de code des pages :
Code de la page 1 :

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
 
<script>
$(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
/*-------*/
</script>
<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>
						<!--  Traitement -->
					<h4 style="cursor:pointer" onclick="ajaxrequest('lecture_categorisation.php', 'message')"><u>Rechercher</u></h4>
 
					<div id="message"></div>
					<!--Fin -->
					</div>
				</fieldset>	
</form></div></body>

Page 2 :

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
<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>

05/06/2015, 16h01
javatwister

Où est le problème?
05/06/2015, 16h17
geeka

@ javatwister:
Oui, la fonction ajaxrequest se trouve dans la page 1.
Le problème c'est que le champ 'sépulture' apparaît toujours, peu importe la valeur de etat (normalement il ne doit apparaître que si etat=2).
05/06/2015, 16h46
javatwister

on ne sait toujours pas ce que renvoie ta requête ajax! est-ce bien l'état en question? et demandes-tu la mise à jour du champ? Où? Quand? Comment?

Déjà que je ne comprend pas le onchange sur un élément qui se trouve dans une page distante...

Code de la fonction ajaxrequest :
LA fonction ajax gère le bouton Rechercher

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
    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 = 'id_struct='+id_struct;
 
	  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;
        }
      }
    }

Alors lorsque je fais appel à ajax, je charge la page 2 qui contient plusieurs champs dont le champ etat et sépultures (qui sont des listes), ajax permet donc d'afficher ces champs.
Qu'entendez-vous par mise à jour du champ ?

05/06/2015, 17h13
javatwister

Citation:

Envoyé par geeka

e charge la page 2 qui contient plusieurs champs dont le champ etat et sépultures (qui sont des listes), ajax permet donc d'afficher ces champs.

Où affiches-tu ces champs??? Je n'ai vu aucune sépulture dans la page 1 (je ne pensais pas que j'écrirais ça un jour)
05/06/2015, 20h07
geeka

J'affiche ces champs sur la page 1. La page 2 n'est jamais affichée, elle est juste chargée.
05/06/2015, 22h33
javatwister

"chargée" est un abus de langage mais bon, c'est le début de la sagesse;

Mais où affiches-tu, dans ta page 1, "ces champs" dont tu parles? c'est invisible, dans ton code;
06/06/2015, 20h40
geeka
Citation:

Mais où affiches-tu, dans ta page 1, "ces champs" dont tu parles? c'est invisible, dans ton code;

J'affiche ces champs à l'intérieur de la div :
Code:

1 2 3 4 //Code de la Page 1 <div id="message"> //Mes champs chargés de la page 2 </div>
grâce à la fonction

Code:

ajaxrequest('lecture_categorisation.php','message');

donc il charge les champs de la page 2 nommée lecture_structure.php. (Ces champs ne sont pas écrit dans la page 1)
07/06/2015, 00h39
javatwister

ton hide / show est illusoire: on dirait que tu veux afficher / cacher des données d'une page distante en espérant que le résultat apparaîtra sur ta page courante...
07/06/2015, 23h08
geeka

Quelle solution vous me proposez, ?
Que j'appelle le code Javascript de la page courante ou distante ne change rien, le contrôle ne marche pas. Selon moi, j'ai besoin de 2 pages, car je dois récupérer la valeur du champ à rechercher avec la méthode POST. Si c'était sur une seule page, le contrôle marche. Mais là, j'ai besoin de deux pages :(
08/06/2015, 08h10
javatwister

bon,

1) comment est gérée la variable id_struct dans la page php?

2) vérifie que "etat" change bien selon la valeur de idstruct;

3) que veux-tu afficher dans ton champ message? un simple indice? la valeur d'un select?... parce que là, vus les echo imprécis, tu va récupérer tout et n'importe quoi avec responsetext;

Code:

1
2
3
var arr = document.getElementById(tagID).getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)