IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Tutoriel slide Jquery


Sujet :

AJAX

  1. #1
    Rédacteur

    Homme Profil pro
    Technical Lead Salesforce
    Inscrit en
    Février 2009
    Messages
    563
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Technical Lead Salesforce

    Informations forums :
    Inscription : Février 2009
    Messages : 563
    Par défaut [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
    - Mes articles
    - Consultant technique Salesforce
    - Salesforce Certified Administrator
    - Salesforce Certified Platform App Builder
    - Salesforce Certified Developper I
    - Salesforce Certified Sales Cloud
    - Salesforce Certified Service Cloud

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    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 ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Rédacteur

    Homme Profil pro
    Technical Lead Salesforce
    Inscrit en
    Février 2009
    Messages
    563
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Technical Lead Salesforce

    Informations forums :
    Inscription : Février 2009
    Messages : 563
    Par défaut
    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.
    - Mes articles
    - Consultant technique Salesforce
    - Salesforce Certified Administrator
    - Salesforce Certified Platform App Builder
    - Salesforce Certified Developper I
    - Salesforce Certified Sales Cloud
    - Salesforce Certified Service Cloud

  4. #4
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    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
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Rédacteur

    Homme Profil pro
    Technical Lead Salesforce
    Inscrit en
    Février 2009
    Messages
    563
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Technical Lead Salesforce

    Informations forums :
    Inscription : Février 2009
    Messages : 563
    Par défaut
    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?
    - Mes articles
    - Consultant technique Salesforce
    - Salesforce Certified Administrator
    - Salesforce Certified Platform App Builder
    - Salesforce Certified Developper I
    - Salesforce Certified Sales Cloud
    - Salesforce Certified Service Cloud

  6. #6
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    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.

    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  7. #7
    Rédacteur

    Homme Profil pro
    Technical Lead Salesforce
    Inscrit en
    Février 2009
    Messages
    563
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Technical Lead Salesforce

    Informations forums :
    Inscription : Février 2009
    Messages : 563
    Par défaut
    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.
    - Mes articles
    - Consultant technique Salesforce
    - Salesforce Certified Administrator
    - Salesforce Certified Platform App Builder
    - Salesforce Certified Developper I
    - Salesforce Certified Sales Cloud
    - Salesforce Certified Service Cloud

  8. #8
    Rédacteur

    Homme Profil pro
    Technical Lead Salesforce
    Inscrit en
    Février 2009
    Messages
    563
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Technical Lead Salesforce

    Informations forums :
    Inscription : Février 2009
    Messages : 563
    Par défaut
    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 : 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    - Mes articles
    - Consultant technique Salesforce
    - Salesforce Certified Administrator
    - Salesforce Certified Platform App Builder
    - Salesforce Certified Developper I
    - Salesforce Certified Sales Cloud
    - Salesforce Certified Service Cloud

Discussions similaires

  1. Asp.net AJAX: tutoriel en Francais
    Par emma3345 dans le forum ASP.NET
    Réponses: 3
    Dernier message: 27/03/2013, 14h22
  2. [JQuery] AJAX, ASP et Jquery
    Par dedein84 dans le forum jQuery
    Réponses: 4
    Dernier message: 27/11/2009, 17h05
  3. Réponses: 1
    Dernier message: 10/09/2008, 22h54
  4. [AJAX] Tutoriel, Autocompletion et event onkeypress
    Par Kael dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 21/06/2007, 11h21
  5. [AJAX]Tutoriel autocompletion > problème accents
    Par worldwide dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 11/07/2006, 13h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo