Réalisation application ajax

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 5 Mars 2013.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Salut,

    Je voudrais réaliser une application sur mon site qui fait appel (je pense :? ) à de l'ajax.

    Lorsque je suis sur la page descriptive de mes produits, je voudrais qu'en cliquant sur des options ça me mette à jour mon prix sans recharger toute la page, est-ce que l'on fait bien cela avec de l'ajax ?

    Si oui, j'aimerai créer un tableau html de 3 ou 4 lignes, dans chaque cellule de chaque ligne correspondrait une option sur laquelle l'internaute pourrait cliquer afin de mettre à jour le prix qui est en dessous (sans recharger toute la page). Avec si possible, cerise sur le gateau :D , un joli loader qui s'affiche (en grisant légèrement la page) pendant que le prix se met à jour.

    Quelqu'un aurait-il un bout de code, un exemple ou un lien qui pourrait m'aider à réaliser cela ?

    Merci pour votre aide.

    Bruno
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 207
    J'aime reçus:
    365
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Spout m'a confirmé que c'était de l'ajax.

    Spout as-tu une idée du coût pour faire réaliser l'application ajax dont je t'ai envoyé le lien en MP ?

    Je me pose pas mal de questions concernant l'ajax :

    - l'ajax fait plus "moderne", il est aussi plus pratique, pas besoin de recharger la page.

    - l'ajax fait beaucoup appel à du javascript et je suis nul en javascript :? . Si je fais réaliser cette application ajax par un prestataire, ne vais-je pas être dépend de lui pour des futures mises à jour ou modifications ? J'aime bien maitriser la technique de programmation que je met sur mes sites, comme cela en terme de maintenance je peux le faire moi même.

    - en ajax on ne recharge pas la page, donc en terme de nombre de pages référencées il y en aura forcément moins que si l'on passait les paramètres dans l'url. Ca peut-être intéressant d'avoir plusieurs url référencées pour un même produit mais avec des options différentes.

    Quel choix dois-faire ? Me lancer dans une technique que je ne maitrise pas ou bien rester sur une technique php que je maitrise bien mais un peu plus ringarde avec rechargement des pages et passage de paramètres dans l'url ?

    Que me conseillez-vous ?
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 207
    J'aime reçus:
    365
    Ça dépend du CMS/script utilisé, et du cahier des charges complet.

    Si tu sais déjà programmer en PHP, l'AJAX ça n'a rien de chintok quand on utilise une lib style jQuery.
    Fais des tests avec un bête form, mets des listeners sur les inputs, envoi les values serializées à ton PHP via AJAX.

    J'ai fais un exemple tout con pr exposer le principe:
    -http://spout.be/tmp/ajax-example/
    -http://spout.be/tmp/ajax-example/index.phps

    Dans ton cas ce sera pas une variable en _GET qui chargera la page, mais les values du form.
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Merci Spout.

    Je programme en php et j'ai quelques notions rudimentaires de javascript.

    J'aimerai vraiment pouvoir réaliser moi même cette apli en ajax mais je ne vois pas pour l'instant comment y arriver :(

    La seul petite appli qui fonctionne avec ajax sur mon site consiste à charger les données d'une liste déroulante lorsqu'on sélectionne une valeur d'une autre liste déroulante :)

    Je ne sais pas ce que c'est qu'un listener :(

    Comment font-ils pour rendre cliquable une cellule d'un tableau html (comme dans l'exemple que je t'ai envoyé en MP) ? Et comment récupérer cette valeur pour la transmettre à mon php via ajax ? Le serializeArray va pouvoir récupérer les valeurs du form mais pas la valeur d'une cellule d'un tableau html :(
     
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    J'essaie de faire fonctionner un script avec de l'ajax afin de comprendre comment marche une requête ajax avec Mysql mais ça fonctionne pas :(

    Voilà le script en question -http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php dans la partie javascript on trouve des "ajaxRequest...." mais dans cet autre exemple -http://www.w3schools.com/php/php_ajax_database.asp il n'y a pas de "ajaxRequest...." mais que des "xmlhttp....", quelle est la différence entre ces 2 type de requêtes et laquelle il faut utiliser pour faire de l'ajax ?
     
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Bon je suis arrivé à faire fonctionner ce script -http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php en corrigeant certaines erreurs, ce code ci-dessous fonctionne :D :

    Code:
    <html>
    <body>
    <script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function ajaxFunction(){
    if(window.XMLHttpRequest)
    {
      // For modern browsers
      xmlhttp=new XMLHttpRequest();
    }
    else
    {
      // For IE6 and IE5 browsers
      xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    
      // Create a function that will receive data sent from the server
      xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4){
          document.getElementById('reponse').innerHTML = xmlhttp.responseText;
        }
      }
      var age = document.getElementById('age').value;
      var wpm = document.getElementById('wpm').value;
      var sex = document.getElementById('sex').value;
      var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
      xmlhttp.open("GET", "ajax-example.php" + queryString, true);
      xmlhttp.send(null);
    }
    //-->
    </script>
    <form name='myForm'>
    Max Age: <input type='text' id='age' /> <br />
    Max WPM: <input type='text' id='wpm' />
    <br />
    Sex: <select id='sex'>
    <option value="m">m</option>
    <option value="f">f</option>
    </select>
    <br>
    <input type='button' onclick='ajaxFunction()' value='Query MySQL' />
    </form>
    <div id="reponse"></div>
    </body>
    </html>
    
     
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Bon ben voilà j'ai fait ma petite appli ajax et ça fonctionne :D

    J'ai un formulaire avec 4 select, l'idée c'est que lorsque l'internaute sélectionne une autre donnée dans un select ça mette à jour mon prix en dessous dans la div "reponse" via ajax.

    Je souhaiterai pouvoir serialiser les données de mon formulaire mais je n'y arrive pas, j'utilise jquery pour ma requête ajax, voici le code javascript :

    Code:
    <script>
    <!--
    $.ajax({
        url: "prix-requete.php",
        data: "id1="+$("#id1").val()+"&id2="+$("#id2").val()+"&id3="+$("#id3").val()+"&id4="+$("#id4").val(),
        success: function( data ) {
        $( "#reponse" ).html( data );
        }
    });
    //-->
    </script>
    
    J'ai essayé cette solution mais ça ne marche pas non plus :

    Code:
    var myData = $('#myForm').serializeArray();
    $.ajax({
        url: "prix-requete.php",
        data: $.param(myData) // "inp1=val1&inp2=val2"
        success: function( data ) {
        $( "#reponse" ).html( data );
        }
    });
    
    Quelqu'un a-t-il une idée ?

    Deuxième question : Spout disait "mets des listeners sur les inputs" comment faire cela concrètement ?
     
  9. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Ok je vois que je suis entrain d'écrire un long monologue :D ... toc toc... y a quelqu'un... ils sont tous au ski :mrgreen:

    Je retente une petite question, lorsque je fais une requête en ajax de ce style (j'utilise jquery) :

    Code:
    $.ajax({
        url: "../scripts/mon_script_ajax.php",
        data: "id1="+$("#id1").val()+"&id2="+$("#id2").val(),
        error: function(jqXHR, textStatus, errorThrown) {
        $('#reponse').html('').html('<div class="error">Erreur !</div>');
        },
        success: function( data ) {
        $( "#reponse" ).html( data );
        }
    });
    
    Je récupère sur ma page les infos (c'est un prix dans mon cas) dans une div ayant un id qui se nomme "reponse", je souhaite pouvoir afficher cette div "reponse" 2 fois sur ma page mais j'ai essayé ça ne fonctionne pas, la 2ième div est vide. Comment faut-il faire pour afficher à 2 endroits différents le même résultat de ma requête ajax ?
     
Chargement...
Similar Threads - Réalisation application ajax Forum Date
Activer commentaires pour réalisations Demandes d'avis et de conseils sur vos sites 1 Janvier 2017
Campagne adwords : réalisation de plusieurs objectifs par un même prospect AdWords 27 Janvier 2015
Réalisation d'un blog Demandes d'avis et de conseils sur vos sites 4 Novembre 2012
Aide pour réalisation d'un robots.txt restrictif Débuter en référencement 24 Octobre 2011
Recherche conseils et partenariat pour la réalisation d'un site de PA Développement d'un site Web ou d'une appli mobile 6 Septembre 2011
Conversion su réalisation d'un évènement Ajax Google Analytics 14 Septembre 2010
Conseil pour réalisation de sites Demandes d'avis et de conseils sur vos sites 11 Septembre 2009
Combien coute la réalisation d'un site Développement d'un site Web ou d'une appli mobile 10 Juillet 2009
Sur quel site demander une réalisation de script ? Développement d'un site Web ou d'une appli mobile 4 Septembre 2008
Les conditions de réalisation d'un concours ? Le café de WebRankInfo 17 Juin 2008
Projet: réalisation d'un système d'alerte Développement d'un site Web ou d'une appli mobile 8 Juin 2008
Réalisation de la newsletter Développement d'un site Web ou d'une appli mobile 30 Mars 2008
Réalisation de graphismes Développement d'un site Web ou d'une appli mobile 2 Février 2008
Besoin d'aide en css pour la réalisation d'un tableau... Développement d'un site Web ou d'une appli mobile 28 Juillet 2007
Combien ca coute la realisation d'un site professionnel ? Administration d'un site Web 11 Mars 2007
Realisation d'un blog journal et mise a jour Débuter en référencement 12 Décembre 2006
Réalisation d'un chat Développement d'un site Web ou d'une appli mobile 13 Octobre 2006
Réalisation et taux de conversion des bannières publicitaire Administration d'un site Web 21 Septembre 2006
évaluation realisation site Développement d'un site Web ou d'une appli mobile 27 Juillet 2006
réalisation d'un intranet Développement d'un site Web ou d'une appli mobile 18 Mai 2006