Envoyer des données sans rafraichir la page

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

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, 22h51

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

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

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, 10h44

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, 11h01

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, 19h44

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+

Envoyer des données sans rafraichir la page

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager