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

**geeka** · 05/06/2015, 12h36

Bonjour,

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

**SpaceFrog** · 05/06/2015, 12h45

je ne ne comprends pas le lien entre tes deux pages ... mère fille ? iframe ..; aute ?

**geeka** · 05/06/2015, 14h19

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h4 style="cursor:pointer" onclick="ajaxrequest('page_2', 'message')"><u>Rechercher</u></h4>

**Bovino** · 05/06/2015, 14h25

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

**javatwister** · 05/06/2015, 15h43

bonjour à tous

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

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

Là je sèche;

**geeka** · 05/06/2015, 15h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**javatwister** · 05/06/2015, 16h01

Où est le problème?

**geeka** · 05/06/2015, 16h17

@ 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).

**javatwister** · 05/06/2015, 16h46

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

**geeka** · 05/06/2015, 17h04

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**javatwister** · 05/06/2015, 17h13

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)

**geeka** · 05/06/2015, 20h07

J'affiche ces champs sur la page 1. La page 2 n'est jamais affichée, elle est juste chargée.

**javatwister** · 05/06/2015, 22h33

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

**geeka** · 06/06/2015, 20h40

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**javatwister** · 07/06/2015, 00h39

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

**geeka** · 07/06/2015, 23h08

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

**javatwister** · 08/06/2015, 08h10

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;

**Matthieu2000** · 15/06/2015, 15h48

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

JavaScript

Discussions similaires

Partager

Partager