Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» JavaScript, DOM et API Web HTML5
» Qu'es-ce que c'est ? :O
Auteur
InfoGeo
#
Citer
111 Posts
 Salut !

Alors voila je voudrais réaliser un site super dynamique, enfin en fait non je "dois" réaliser un site dynamique (travail ^^) sauf que bon je suis en alternance et j y connais pas grand chose pour le moment.
Je peux m'inspirer d'un site qui existe déjà (intranet ohwell ...)

En fait le site dont je vous parle permet d'afficher des statistiques ... et il affiche ca sur un graph et lorsqu'on clique sur par exemple worlwide, les graph sont pour le monde, ensuite si on clique sur France, on obtient les meme graphes sans recharger la page mais avec des valeurs différentes (valeurs de la France), vous pouvez voir mieux ici ce dont je parle:
previews/43057-exemple.JPG

(toutes les valeurs et meme la valeur du graphe change instantanément quand on clique sur ce qu il y a a droite dans navigate )

Donc voila tout ca c etait pour donner le contexte je pense que c'est plus simple avec un contexte

En affichant la page source de cette page, que je vais pas mettre en entier ici hein, ne voulant pas que des personnes s'arrachent les cheveux ravi
Je pense que ce que je cherche c'est les lignes de ce type:

<input type="radio" onclick="javascript:updatefilter(this)" id="set_channeltype_nx1" name="channeltype" value="nx1"/>Nexitira<br/>
 <input type="checkbox" checked="" onclick="javascript:updatefilter(this)" id="set_nolab" name="nolab" value="a"/>Exclude Lab/demo <br/>


Sauf que sincèrement je comprend pas trop ce que c'est ... je pense que ca permet justement de "filtrer" c'est a dire de remplacer les anciennes valeurs par les nouvelles sans faire un refresh mais comment ca marche ? eek

J'espere que vous pourrez m'aider car maintenant que je connais la base pour aller chercher ds variable en ajax (voir autre sujet ^^) je voudrais savoir comment filtrer ces variables grâce à des clicks ^^
^
Gothor
#
Citer
325 Posts
 Le mieux est toujours pour toi d'aller voir directement le code de cette fameuse fonction "updateFilter()"

Pour modifier le contenu d'un élément, il te suffit de modifier sa propriété innerHTML.

<div id="content"></div>


var content = document.getElementById('content');
content.innerHTML = "Nouveau contenu";
content.innerHTML += "<br />Contenu additionnel"
content.innerHTML = ""; // Clear sur ton élément

Gothor
^
InfoGeo
#
Citer
111 Posts
 Ha ok je croyais que c'était un truc par defaut moi ^^

donc je l ai recherché et:


function updatefilter(obj){

      filterID = obj.name ; 
      filterString = masterFilterString ; 
      
      arrOptions = filterString.split("&") ; 
      found=0 ; 
      i=0;
      if (arrOptions.length>1) { 
        while ((i < arrOptions.length )&& (found==0))  {
          arrSubOptions = arrOptions.split("=") ; 
          if (arrSubOptions[0] == filterID){
              found=1 ; 
              i=i-1 ; 
          }
          i = i+1 ; 
        }
      } else (
        i=i+1
      )
      
      if (filterID.search("_")>0) {
        tmpArrayBis = settingsjson.chart ;
      } else tmpArrayBis = settingsjson.params ;
      
      // check the field value in the settings and update it if necessary
      var idxof = tmpArrayBis.detectIndex(function(node, idx) {
                    return node.name == filterID;
      });
      
      switch(obj.type) 
       { 
       case "checkbox":  
        if (obj.checked) { 

          
          if (idxof>=0)   { 
            tmpArrayBis idxof .checked = "yes"  ;  
            if (( tmpArrayBis idxof .dbfilter)  == "yes") arrOptions[i]=filterID+"=yes";
          } else  arrOptions[i]=filterID+"=yes";   
      
        }
        else {
          //alert ("box is  NOT checked and Idx="+ idxof + "filterID=" + filterID + " I="+i);
        
          if (idxof>=0)  {
             tmpArrayBis idxof .checked = "no"  ; 
             if (( tmpArrayBis idxof .dbfilter)  == "yes") arrOptions[i]=filterID+"=no";
             } else  arrOptions[i]=filterID+"=no"; 
        }
        
       break;
       
      case "radio":  
        if (obj.checked) arrOptions[i]=filterID+"="+obj.value ;
        tmpArrayBis idxof .value =obj.value ;
      
       break;
      } 
   
      /*
        if (document.getElementById(filterID).checked) {
            arrOptions[i]=filterID+"=yes" ;
        }
        else arrOptions[i]=filterID+"=no" ;
      */
      //}
    
      filterString = ""; 
      for(var i = 0;i < arrOptions.length-1;i++) {
      filterString +=arrOptions[i]+"&" ;
      }
      filterString+=trim(arrOptions[arrOptions.length-1]) ; 
    
      //alert (filterString);
      document.getElementById("filterurl").innerHTML = filterString ;
      masterFilterString = filterString ; 
      //DisplayJsonTable ( settingsjson.chart); 
      
}


ca reste plutot complexe O_O[/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par InfoGeo (02 Feb 2012 - 13:25)
^
Laurie-Anne
#
Citer
Modérateur
6001 Posts
 Bonjour,

Ce type de fonctionnement se réalise avec une utilisation spécifique du JavaScript : l'AJAX.

La selection de filtre par l'utilisateur lance une action JS qui ca consulter un language serveur (généralement PHP) pour demander les nouvelles données puis les afficher.
Modifié par Laurie-Anne (02 Feb 2012 - 13:26)
Non !
http://laurie-anne.bourdain.name 
^
InfoGeo
#
Citer
111 Posts
 Merci pour ta réponse laurie-Anne mais je le sais déjà, j'ai d ailleur poster un autre poste avec un petit exemple pour comprendre les bases de l ajax
^
InfoGeo
#
Citer
111 Posts
 Et gothor merci ca peut etre interessant ce que t as mis mais hum comment je fais pour faire en sorte que ca chnage quand je click sur un bouton ... donc c'est de ce style la:
<a href="#" onclick=""


mais je met quoi dans onclick ?
parce que moi en gros je voudrais ca:

var content = document.getElementById('content');
content.innerHTML = "Nouveau contenu";


Mais bon je peux pas le mettre direct
^
Gothor
#
Citer
325 Posts
 Je n'ai pas lu le gros pavé que tu as posté =° (Enfin, si, vite fait... Il décompose une chaîne peut-être globale, vérifie que l'id de l'objet que tu as envoyé est bien dedans et agit en conséquence...)

Bien tu appelles une fonction qui va le faire pour toi :o

<a href="#" onclick="mafonction()">Cliquez moi !</a>
function mafonction() {
    var content = document.getElementById('content');
    content.innerHTML = "Nouveau contenu";
}

Gothor
^
InfoGeo
#
Citer
111 Posts
 Ok mec merci d'avoir pris du temps pour m aider =)
^
Laurie-Anne
#
Citer
Modérateur
6001 Posts
InfoGeo a écrit :
Merci pour ta réponse laurie-Anne mais je le sais déjà, j'ai d ailleur poster un autre poste avec un petit exemple pour comprendre les bases de l ajax
Il faudrait peut-être donc penser à modifier le titre de ton message ?

Car la réponse à ton titre est celle que je t'ai donné.
Non !
http://laurie-anne.bourdain.name 
^
InfoGeo
#
Citer
111 Posts
 Donc:

<input type="radio" onclick="javascript:updatefilter(this)" id="set_channeltype_nx1" name="channeltype" value="nx1"/>Nexitira<br/>

 <input type="checkbox" checked="" onclick="javascript:updatefilter(this)" id="set_nolab" name="nolab" value="a"/>Exclude Lab/demo <br/>


C'est de l'ajax ?
^
Laurie-Anne
#
Citer
Modérateur
6001 Posts
 C'est du javascript qui appelle une fonction exécutée sans rechargement...

Donc oui, c'est de l'ajax
Non !
http://laurie-anne.bourdain.name 
^
fvsch
#
Citer
20100 Posts
 Bonjour,

Ça va être chaud d'arriver à ce genre de résultat avec des connaissances en JavaScript encore balbutiantes (sauf erreur de ma part). Quelques repères de ce que ce genre d'interactivité implique (je n'ai pas saisi exactement ce que tu as besoin de faire alors je tape un peu large):

1. Récupérer des contenus ou des données pas déjà présents dans la page ou dans les scripts chargés avec la page: il faut effectivement faire une requête HTTP asynchrone avec XHR (technique communément appelée «Ajax»). De bonnes notions de JavaScript et de HTTP sont recommandées. Bien sûr ça demande aussi un développement côté serveur si la requête HTTP va interroger un script qui doit par exemple interroger une base de données.

2. Utiliser des données soit déjà présentes dans la page (élément dans le DOM mais masqué visuellement, valeurs d'attributs HTML présents dans le DOM tels que des data-attributes, variable JavaScript associées à des chaines de caractères ou tableaux ou objets), soit récupérés en XHR: ça va demander d'utiliser JavaScript pour manipuler le DOM de la page. Une bonne connaissance de l'API DOM est recommandée. On peut éventuellement utiliser une librairie JS qui fournit des fonctions utilitaires pour manipuler le DOM.

3. Générer côté client des graphiques de visualisation de données, que ce soit avec un composant Flash (proposant une API JavaScript) ou en SVG (pas mal de liens intéressants vers des librairies qui vont bien): il faut un minimum d'aisance en JavaScript, choisir un bon outil (librairie de création de graphiques), et bien potasser la documentation et l'API de l'outil retenu.

Voilà pour des repères.

Ça demande des compétences au minimum d'intégrateur web, et si les besoins sont complexes ça peut même faire appel à une spécialité développeur JavaScript front-end. À noter qu'intégrateur web et développeur JS front-end sont deux métiers à part entière (avec des points communs), donc si tes besoins sont élevés j'espère que tu en alternance justement pour te former à ce type de spécialité. (Autrement, il faudra faire appel à un spécialiste au sein de la boite ou en externe.)

InfoGeo a écrit :
Donc: <input onclick="javascript:updatefilter(this)" /> c'est de l'ajax ?

Non, c'est un élément HTML auquel on attribue un gestionnaire d'évènement via l'attribut onclick. Au clic, on va appeler la fonction updatefilter en lui passant comme paramètre une référence à l'élément du DOM qui a été cliqué (ici le bouton radio). Ça ne nous dit pas ce que fait cette fonction updatefilter, si elle fait des requêtes XHR ou pas, si elle tue des bébés phoques ou force des enfants innocents à subir, à leurs petits corps purs défendants, des choses traumatisantes telles qu'assister à un co-plateau Casimir/Chantal Goya.

Mais je vois que tu as aussi posté la fonction en question. Alors j'ai pas tout épluché, mais à vue de nez non, pas de requête Ajax.
http://fvsch.com 
^
InfoGeo
#
Citer
111 Posts
 Merci fvsch, c'est encore frais pour moi donc j'ai pas tout compris par contre pour ma question "donc ........ c'est de l'ajax?" c'était une question rhétorique pour Laurie-Anne, parce que ca je savais que ca n'en était pas, et donc que non ca répondait pas à ma question....

En tout cas merci pour avoir essayer de m'éclairer, je vais essayer d'approfondir ca ^^
^
Prévenir un modérateur
Répondre au sujet
Aller à