Envoyer des données sans rafraichir la page

**splif** · 01/09/2013, 21h42

Bonsoir à tous,
je viens vers vous en espérant trouver de l'aide pour ma réalisation ...

Voila je désire insérer des données externes dans des inputs sur une page principale par l’intermédiaire d'une page externe ( iframe dans une modale )

j'y arrive mais le soucis c'est que ça me relance la page et me fait sauter les données déjà saisies

Petit exemple ici : http://www.letoutweb.com/page_test/index.php

Le but étant de saisir les éléments 1 et 2 sur la page principale et par la suite de rajouter les éléments 3 et 4 à partir de la modale
l’idéal serait de ne pas rafraichir la page page principale ... mais comment faire .......

Avez vous une idée ou une piste pour que je puisse conserver les données déjà saisies

Page index.php

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<html>
 
<head>
  <title></title>
 
 
 
  <link rel="stylesheet" href="css/jquery.superbox.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/custom_superbox.css" type="text/css" media="all" />
  <script type="text/javascript" src="js/jquery-min_box.js"></script>
  <script type="text/javascript" src="js/jquery.superbox-min.js"></script>
 
 
 
  <script type="text/javascript">
		$(function(){
			$.superbox.settings = {
				closeTxt: "Fermer",
				loadTxt: "Chargement...",
				nextTxt: "Suivant",
				prevTxt: "Précédent"
			};
			$.superbox();
		});
	</script>
 
</head>
 
<body>
 
<?php
 
$element_3 = $_POST['element_3_ext'] ;
$element_4 = $_POST['element_4_ext'] ;
 
 
echo'

<br><br>

<form method=post action="#">

Elément 1 <input type="text" name="element_1" value="">
<br>
Elément 2 <input type="text" name="element_2" value="">
<br>
Elément 3 <input type="text" name="element_3" readonly="readonly" value="'.$element_3.'">
<br><br>
Elément 4 <textarea name="element_4" rows="1" cols="30" readonly="readonly">'.$element_4.'</textarea>
<br><br><br>
<a href="page_rajout.php" rel="superbox[iframe][800x800]">Ajouter les éléments 3 et 4 </a>





<br><br>
<input type="submit" value="Valider le formulaire" >
</form>
';
 
 
 
 
?>
 
</body>
 
</html>

Page de rajout ( iframe ) page_rajout.php

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
43
44
45
46
47
48
49
50
51
52
53
 
<html>
 
<head>
  <title></title>
</head>
 
<body>
 
<?php
echo'
<br><br>

<form method=post action="index.php" Target="_parent">

Elément 3 : &nbsp;&nbsp;
<select name="element_3_ext" >
      <option value=""></option>
   <optgroup label="Gamme GBI">
      <option>GBI 2vtx</option>
      <option>GBI 3vtx</option>
      <option>GBI 4vtx</option>
   </optgroup>
   <optgroup label="Gamme GY">
      <option>GY 2vtx</option>
      <option>GY 3vtx</option>
      <option>GY 4vtx</option>
   </optgroup>

</select>

<br><br>

Elémént 4 <textarea name="element_4_ext" rows="1" cols="30" ></textarea>


<br><br>

<input type="submit" value="Valider le formulaire" >


</form>



';
 
 
?>
 
</body>
 
</html>

**imikado** · 01/09/2013, 21h51

Deux solutions:
1. via une iframe
2. via de l'Ajax

**splif** · 02/09/2013, 09h09

salut et merci d'avoir répondu.
via une iframe ? c'est à dire je comprends pas trop la

Et pour ajax je me doute que ça serait l’idéal mais je ne sais pas comment m'y prendre

**imikado** · 02/09/2013, 09h44

Ajoutez une iframe d1px sur 1px avec comme id "background" par exemple, ensuite sur votre formulaire, ajoutez target=background

Ainsi le formulaire sera envoyé dans la iframe

**splif** · 02/09/2013, 10h01

aie je suis un peu stupide voir carrément

Je ne capte pas le principe ... comment dois-je procéder suivant mon exemple
( ça m'aidera mieux à comprendre )

**xxkirastarothxx** · 02/09/2013, 18h44

D'après moi le truc de l'iframe c'est un peu degeulasse quand même ^^
Le must pour ça c'est l'ajax.

Le plus simple, c'est de commencer par include la librairie jquery (qui remplace les deux pages d'un script Ajax classique par une simple fonction

):

Code html :

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

(remplace 1.10.2 par 1.9.2 si tu as besoin du support pour IE 6/7/8)

Ensuite, dans un script toujours:

Code javascript :

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

1
2
3
4
5
6
7
8
<script>
    $.ajax({
        url: "http://tonsite.com/?variable1=test&variable2=test2",
        success: function(reply){
            alert(reply);
        }
    })
</script>

Plus d'info sur cette fonction ici: http://api.jquery.com/jQuery.ajax/

l'avantage c'est que tu peux faire déclancher ton apelle ajax grâce à un evenement, par exemple, au clic sur un lien de class "ajax":

Code javascript :

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

1
2
3
4
5
<script>
  $("body").on("click", "a.ajax", function(){
    $.ajax(....);
  });
</script>

Les selecteur jQuery fonctionne comme les selecteur css (.class, #id, node...)

A+

**imikado** · 02/09/2013, 20h46

J'ai ajouté le target sur le formulaire et une iframe avec un id à "background"

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<html>
 
<head>
  <title></title>
 
 
 
  <link rel="stylesheet" href="css/jquery.superbox.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/custom_superbox.css" type="text/css" media="all" />
  <script type="text/javascript" src="js/jquery-min_box.js"></script>
  <script type="text/javascript" src="js/jquery.superbox-min.js"></script>
 
 
 
  <script type="text/javascript">
		$(function(){
			$.superbox.settings = {
				closeTxt: "Fermer",
				loadTxt: "Chargement...",
				nextTxt: "Suivant",
				prevTxt: "Précédent"
			};
			$.superbox();
		});
	</script>
 
</head>
 
<body>
 
<?php
 
$element_3 = $_POST['element_3_ext'] ;
$element_4 = $_POST['element_4_ext'] ;
 
 
echo'
 
<br><br>
 
<form method=post action="#" target="background">
 
Elément 1 <input type="text" name="element_1" value="">
<br>
Elément 2 <input type="text" name="element_2" value="">
<br>
Elément 3 <input type="text" name="element_3" readonly="readonly" value="'.$element_3.'">
<br><br>
Elément 4 <textarea name="element_4" rows="1" cols="30" readonly="readonly">'.$element_4.'</textarea>
<br><br><br>
<a href="page_rajout.php" rel="superbox[iframe][800x800]">Ajouter les éléments 3 et 4 </a>
 
 
 
 
 
<br><br>
<input type="submit" value="Valider le formulaire" >
</form>

<iframe id="background" name="background"></iframe>
';
 
 
 
 
?>
 
</body>
 
</html>

note: il sera plus simple pour vous de le faire via une iframe que via de l'ajax, surtout pour debugguer: il vous suffira simplement d'agrandir la taille de l'iframe

Après c'est comme vous voulez, c'est vous qui codez

**splif** · 02/09/2013, 21h12

Bonsoir,
et avant tout merci a vous deux.
J'ai testé votre iframe imikado et hélas c'est pas ce que je veux je tiens a conserver le principe de la modale de plus je ne comprends pas l’intérêt de l'iframe car au final elle reprend le formulaire de base et ne garde rien des 1eres saisies ....
l'ajax me semble plus propre et plus approprié me reste plus qu'a trouver des exemples et me lancer .... deja que j'ai du mal avec php et javascript ... en voila un de plus qui s’additionne

**imikado** · 02/09/2013, 21h17

Comme dirait Chevalier/Laspalès "C'est vous qui voyez"

**splif** · 02/09/2013, 21h20

il y a n'a qui ont essayé et ils ont eu des problèmes

... et c'est mon cas je patauge

**xxkirastarothxx** · 03/09/2013, 10h07

Normalement avec ce que je t'ai passé il y a de quoi faire ça facilement hein ^^

Mais bon allez, je suis dans un bon jour, je te donne un exemple plus précis par rapport a ce que tu veux faire.

Premièrement, ta page de base:

Code html :

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
<html>
    <head>
        <!-- 1] Inclusion de jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
        <!-- 2] Script ajax: chargement des elements supplémentaire au clic sur le lien -->
        <script>
            $(document).ready(function(){
                $("a.loadElement").on("click", function(){
                    $.ajax({
                        url: "http://tonsite.com/page2.php",
                        success: function(reply){
                            $('form').append(reply);
                        }
                    });
                });
            });
        </script>
    </head>
 
    <body>
        <!-- 3] Le formulaire -->
        <form>
            Elément 1 <input type="text" name="element_1" value="">
            <br>
            Elément 2 <input type="text" name="element_2" value="">
            <br>
        </form>
 
        <!-- 4] Le lien d ajout -->
        <br><br><br>
        <a class='loadElement' href="">Ajouter les éléments 3 et 4 </a>
    </body>
</html>

Et ta deuxième page:

Code html :

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

1
2
3
4
5
<!-- http://tonsite.com/page2.php -->
Elément 3 <input type="text" name="element_3" value="">
<br>
Elément 4 <input type="text" name="element_4" value="">
<br>

Normalement ça devrait le faire

Je finirai par dire que jQuery, si tu ne connais pas bien encore, c'est en quelque sorte un Javascript++ qui offre de nombreuses fonctions qui simplifient la vie des développeurs JS.

Par exemple, pour sélectionner un élément html, fini les "document.getElementById('truc')" et bienvenue "$('#truc')", une simplification monstrueuse de l'Ajax, des effets de styles et d'animation par pelle (fondu, slide etc) et encore plein de trucs cool ^^

Mon avis c'est que c'est un outils formidable qui vaut largement le coup qu'on se penche dessus, et dont je ne pourrais plus me passer maintenant

Envoyer des données sans rafraichir la page

Langage PHP

Discussions similaires

Partager

Partager