[AJAX] Tutoriel slide Jquery

Bonjour, je suis à la recherche d'un tutoriel en AJAX/Jquery qui permet de donner un style de slide entre deux pages, que la première page glisse vers la deuxième, je précise que je connais légèrement le Javascript, pour ça que je cherche un tutoriel.

Merci de votre aide

Salut,
jQuery ne fait pas ça. Par contre, c'est un effet Webkit (Safari/iPhone), et à mon avis c'est là que tu en as entendu parler. Donc donne-nous plus de détails : pour quel genre d'utilisateurs tu développes ton site ?

J'ai trouvé ce tutoriel qui fait ce que je souhaite.

Je suis en train de faire un projet en local où en première page on a un formulaire, on clique sur un bouton pour soumettre, on glisse vers la deuxième page qui fait le traitement.

Ah d'accord, il y a eu malentendu sur le terme de « pages ».

Quiqu'il en soit, le premier résultat de « slideshow jquery » sur Google : http://www.snoupix.com/slideshow-jqu...torial_28.html

Bonne lecture ;)

Je viens de le faire et ça fonctionne, seulement, comme j'ai réalisé un formulaire et que donc d'un slide à l'autre, je récupère les données avec du Javascript pour les ré afficher sur un autre slide.

J'ai bien récupérer mes données mais je bloque sur comment je pourrais les ré afficher avec du PHP parce que je dois faire du traitement sur certaines données?

Bonsoir,
alors tu as le choix entre :
– un envoi classique du formulaire, avec un bouton de type submit en HTML, ou en appellant la méthode submit() en JavaScript ;
– une requête Ajax, qui envoie des infos en arrière-plan.

D'une manière ou d'une autre, il faut que tu fasses une requête vers ton serveur pour que celui-ci récupère les données.

Comme je ne sais pas précisément où tu bloques, je ne peux pas t'en dire plus pour l'instant.

;)

Je bloque au moment où l'utilisateur remplit ses données et clique sur le bouton de validation, je récupère les données en Javascript mais il faudrait que je les transmettes à mon deuxième slide pour faire des traitements.

Je ne connais pas la méthode la plus simple pour faire ça sachant que c'est la première fois que j'utilise Ajax et que je suis moyen en Javascript.

J'ai regardé ce tutoriel mais j'ai le problème que ça me renvoi tout le code de ma page au lieu de seulement les données de mon formulaire (nom et prénom pour le moment).

Voici mon code, je pense que ça sera plus explicite:

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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test slide Jquery</title>
<link rel="stylesheet" href="style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function()
{
	  var nom;
	  var prenom;
	  var currentPosition = 0;
	  var slideWidth = 560;
	  var slides = $('.slide');
	  var numberOfSlides = slides.length;
 
	  // Supprime la scrollbar en JS
	  $('#slidesContainer').css('overflow', 'hidden');
 
	  slides
	  .wrapAll('<div id="slideInner"></div>')
	  // on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
	  .css({
	    'float' : 'left',
	    'width' : slideWidth
	  });
 
	  // La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
	  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
	  // Insert les flèches de gauche et de droite
	  $('#slide')
	    .prepend('<span class="control" id="leftControl">Move left</span>')
	    .append('<span class="control" id="rightControl">Move right</span>');
 
	  // Cache la flèche de gauche au début
	  manageControls(currentPosition);
 
	  // crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
	  $('.control')
	    .bind('click', function()
	    	{
	    		// Determine une nouvelle position
	    		if( ($(this).attr('id')=='rightControl') && (currentPosition == 0) )
	    		{
					currentPosition++;
					nom = document.getElementById("nom").value;
					prenom = document.getElementById("prenom").value;
					go();
 
 
 
					// alert(nom + prenom);
	    		}else if($(this).attr('id')=='rightControl')
	    		{
					currentPosition++;
	    		}else
	    		{
					currentPosition--;
	    		}  
 
	    //Cache ou montre les flèches
	    manageControls(currentPosition);
	    // Move slideInner using margin-left
	    $('#slideInner').animate(
	    	    {
	      			'marginLeft' : slideWidth*(-currentPosition)
	    		});
	    	});
 
	  // manageControls: Cache ou montre les flèches de contrôles en fonction du slide
	  function manageControls(position)
	  {
	    // Si on est dans le premier slide
	    if(position==0)
		{ 
			// On cache le bouton de gauche
			$('#leftControl').hide() 
		}
	    else
		{ 
			// On montre le bouton gauche
			$('#leftControl').show() 
		}
	    // Si on est dans le dernier slide
	    if(position==numberOfSlides-1)
		{ 
			// On cache le bouton de droite
		    $('#rightControl').hide() 
		}
	    else
		{ 
			// On montre le bouton de droite
			$('#rightControl').show() 
		}
	 }
 
	  function go()
	  {
			var xhr = getXhr()
			// On défini ce qu'on va faire quand on aura la réponse
			xhr.onreadystatechange = function()
			{
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
				if(xhr.readyState == 4 && xhr.status == 200)
				{
					alert(xhr.responseText);
				}
			}
			xhr.open("GET","test2.php",true);
			xhr.send(null);
		}
 
	  function getXhr()
	  {
	  	var xhr = null; 
		if(window.XMLHttpRequest) // Firefox et autres
			xhr = new XMLHttpRequest(); 
		else if(window.ActiveXObject)
		{ // Internet Explorer 
			try 
			{
      			xhr = new ActiveXObject("Msxml2.XMLHTTP");
  			} catch (e) 
  			{
      			xhr = new ActiveXObject("Microsoft.XMLHTTP");
  			}
		}else 
		{ // XMLHttpRequest non supporté par le navigateur 
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		} 
        return xhr
	  }
 
 
});
 
 
</script>
 
<html>
<body>
 
<div id="slideshow">
 
  <div id="slidesContainer">
 
    <div class="slide" id="slide">
    		<FORM>
    			<table  class="tableau">
        			<tr>
        				<th>Nom : </th>
        				<td colspan="3"><input type="text" id="nom"/></td>
        			</tr>
        			<tr>
        				<th>Prénom : </th>
        				<td colspan="3"><input type="text" id="prenom"/></td>
        			</tr>
        			<tr>
        				<th>Naissance : </th>
        				<td><SELECT id="jour">
        						<?php $i = 1;
                                                                  while($i <= 31)
                                                                  {
                                                                        echo "<OPTION VALUE='" . $i . "'>" . $i . "</OPTION>";
                                                                        $i++;
                                                                  }
                                                        ?>
        					</SELECT></td>
        				<td><SELECT id="mois">
        						<?php 
                                                                $mois = array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
                                                                $a = 0;
                                                                while($a <= 11 )
                                                                {
                                                                        echo "<OPTION VALUE='" . $a . "'>" . $mois[$a] . "</OPTION>";
                                                                        $a++;
                                                                }
                                                        ?>	
        					</SELECT></td>
        				<td><SELECT id="annee">
        						<?php 
                                                                $e = 1950;
                                                                while($e <= 2010)
                                                                {
                                                                        echo "<OPTION VALUE='" . $e . "'>" . $e . "</OPTION>";
                                                                        $e++;
                                                                }
                                                        ?>
        					</SELECT></td>
        			</tr>
        	</FORM>
        </table> 
    </div>
 
    <div class="slide">
      Slide 2<br/>
      <?php 
      
      
      $nom = $_GET["nom"];
      $name = $nom;
      echo "Nom : " . $name;
      ?>
    </div>
 
</body>
</html>

La ligne de code "alert(xhr.responseText);" me renvoi:

Code:

1
2
3
4
5
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....

En me baladant sur internet, je me suis rendu compte que certains sites proposaient ce que je souhaite réaliser (je précise que mon projet est en local et que c'est pour un cours (je suis étudiant)), voici un des sites.