Réalisation application ajax

[poupilou]

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

 

[spout]

Backbone.js, AngularJS, KnockoutJS, etc, ... :
http://addyosmani.github.com/todomvc/

 

[poupilou]

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 ?

 

[spout]

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 ?

Ç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.

 

[poupilou]

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

 

[poupilou]

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 ?

 

[poupilou]

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 :

<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>

 

[poupilou]

Bon ben voilà j'ai fait ma petite appli ajax et ça fonctionne

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 :

<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 :

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 ?

 

[poupilou]

Ok je vois que je suis entrain d'écrire un long monologue ... 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) :

$.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 ?