Tout d’abord voici 2 penses -bete pour jQuery :

jQuery-Visual-Cheat-Sheet-1.4.2.
impulse_studios-jquery_cheat_sheet-1.0

Maintenant quelques fonction qui m’ont été utiles ces derniers jours.

.split()

La fonction split permet de diviser une chaine de caractère en tableau. Ex:

var chaine = « bonjour tout le monde »;
var tab=chaine.split(«  »);
Résultat : tab = bonjour, tout, le, monde

.substr(indice du début, nombre de caractère)

La fonction permet d’extraire une chaine de caractère. Ex:
var chaine= »bonjour tout le monde »;
var chaine2= chaine.substr(8,4);
Résultat : chaine2= tout

2 fonctions utiles pour créer un loader : .hide() et .show()

.show() permet d’afficher un contenu, et .hide() permet d’enlever le contenu. Ex:
< div id= »loader » > le contenu de mon loader </div>
Dans mon code je vais donc écrire : $(« #loader »).show(); j’affiche ma div
Et plus loin de mon code (après avoir effectué toutes mes fonctions) j’enlève ma div :
$(« #loader »).hide();

La dernière fois je vous ai donner un code pour cocher tout les checkbox. Aujourd’hui je vais vous expliquer comment récupérer la valeur d’un bouton radio.

Je vais vous donner un petit script bien utile dont j’ai eu besoin cette semaine. Ce script vous permet de cocher toutes les checkbox d’un formulaire. Tout d’abord votre HTML :

<form name= »formulaire »>
<input type= »checkbox » name= »toutcocher » value= »toutcocher » onclick= »toutcocher(); »> Tout cocher //vous pouvez utiliser un lien au lieu d’un input pour tout cocher ( à vous de voir )
<input type= »checkbox » name= »1″ value= »1″> Valeur 1
<input type= »checkbox » name= »2″ value= »2″> Valeur 2
<input type= »checkbox » name= »3″ value= »3″> Valeur 3
<input type= »checkbox » name= »4″ value= »4″> Valeur 4
…..
</form>

Et voilà le code JavaScript

function toutcocher()
{
    for(i=0;i<document.formulaire.length;i++)
    {
      if(document.formulaire.elements[i].type== »checkbox »)
      document.formulaire.elements[i].checked=true;
    };
}

Et voilà un code tout simple et bien utile

Ce plugin contient plusiseurs options qui vous permettrons de personnaliser votre popin, vous pouvez changez le CSS, personnaliser les boutons …

Pour une popin toute simple : $.prompt(‘votre texte a afficher’);

Pour une popin avec plusiuers états le code est plus long certes mais loin d’être compliqué:

1. function openprompt(){
2. var statesdemo = {
3. state0: { // Premier état
4. html:’test 1.test 1..test 1…’, // on ajoute du text
5. buttons: { Cancel: false, Next: true }, // Initialisation des boutons
6. focus: 1,
7. submit:function(v,m,f){
8. if(!v) return true;
9. else
10. $.prompt.goToState(‘state1′);
11. return false;
12. }
13. },
14. state1: {
15. html:’test 2′,
16. buttons: { Back: -1, Exit: 0 },
17. focus: 1,
18. submit:function(v,m,f){
19. if(v==0) $.prompt.close()
20. else if(v=-1)
21. $.prompt.goToState(‘state0′);
22. return false;
23. }
24. },
25. state2: {
26. html:’This is the next one
test 3′,
27. buttons: { Back: true, Done: false },
28. submit:function(v,m,f){
29. if(!v)
30. return true;
31. else $.prompt.goToState(‘state1′);//go back
32. return false;
33. }
34. }
35. };
36. $.prompt(statesdemo);} // On lance le plugin
Vous pouvez voir le résultat de cette example ici.

Ceci n’est qu’un petit exemple des possibilité de ce plugin, pour en savoir plus et voir plus d’exemples aller voir le tuto (en anglais bien sûr) ici.

A l’ heure actuelle, la fonctionnalité de recherche ne permet pas d’ élargir les critères aux environs, en établissant un rayon de recherche en km autour de la ville entrée.

L’ objectif de ma mission est de permettre à l’utilisateur de définir un rayon en km autour de la ville ou du quartier qu’il a choisi, dans lequel appliquer les paramètres de recherche. La demande est d’élargir la recherche à un certain nombre de kilomètres autour de la localisation choisie.

Au niveau de l’interface, un lien sous la recherche géographique sera créé. Un clic sur le lien ouvrira une fenêtre pop-up.Chaque onglet aura une liste déroulante de checkboxes accompagnées des noms des villes concernées par le critère de recherche, permettant de retourner les annonces de toutes les villes pour un rayon de recherche donné. A côté de ces villes, devra être affiché le comptage des annonces pour chacune (si possible).L’utilisateur pourra alors choisir les villes qui l’intéressent dans la liste. Lors de la validation par l’utilisateur, nous renverront une requête sur le serveur pour récupérer les annonces des villes cochées. Un niveau intermédiaire de recherche doit apparaître dans le cas où l’utilisateur a fait une recherche sur plusieurs villes/quartiers à la fois :
Une fenêtre pop-up apparaît, demandant à l’utilisateur de choisir la ville (ou le quartier) sur laquelle il veut élargir la recherche.Une fois le choix effectué, on peut procèder normalement.

Dans l’entreprise, le mois d’Aout est le mois de vacances pour les employés, ce qui fait que depuis le début de la semaine l’équipe est réduite de moitié (dans mon bureau nous ne sommes plus que 4 ). Les locaux sont vides, plus de responsables(les managers sont en vacances!!!). Et cette semaine fut la dernière semaine de travail pour l’équipe du marketing, ils ont installés un filet de ping-pong dans la salle de réunion, apportés un ballon de foot pour jouer dans le couloir, et ont décidés de s’attaquer a leur stagiaire en la scotchant à une chaise!! ( heureusement mon équipe ne compte pas me faire çelà !!!).

Pour moi cette semaine fut consacrée à de l’optimisation de code (JavaScript) et un peu de CSS pour ma cartographie. Ce fût donc une semaine calme pour moi avant d’attaquer des semaines plus chargée. Donc rien de particulier à vous dire cette semaine, à part que l’entreprise et mon rôle dans cette équipe me correspond tout à fait et je compte bien y rester.

Comme vous pouvez le voir sur l’image de ma carte mes marqueurs sont simple, une icône classique et juste un nombre qui s’affiche dessus. Mais croyez moi c’est beaucoup plus compliqué.


Tout d’abord le chiffres que j’ai inséré sur l’icône représente le nombre d’agence se trouvant autour de ce point. Et c’est  ce petit détail qui m’a compliqué la tache. Il faut savoir que dans le langage de googlemap, l’insertion de marqueurs se fait avec la fonction GMarkers, mais le souci c’est que cette fonction reste limité.


Avec GMarkers il m’est impossible d’insérer du texte dynamique dans mes marqueurs. Donc pour cela il m’a fallu faire appel à une autre fonction (mais qui n’est pas insérer dans le  script de googlemap). J’ai donc utilisé la fonction LabeledMarker (qui me permet de personnaliser un peu mieux mes marqueurs). Pour utiliser cette fonction ilvous faut tout d’abord créer un script labeledmarker.js et y insérer le code de cette fonction que vous pourrez trouver ici.


Je crée donc une fonction qui me permettras d’afficher mes marqueurs au bonne endroit et avec les options souhaitées.


/* Add Markers with Text */
this.setMarker = function (lat, lon, markerOpts, str, opts) {
var marker;

marker = new LabeledMarker(new GLatLng(lat, lon), opts);

// Add to Markers array for removal
this.markerArray[this.markerArray.length] = marker;

this.map.addOverlay(marker);
marker.addInfoBox(markerOpts);

}


Cette fonction me permet d’afficher les marqueurs. Mais avant d’exécuter cette fonction il faut que je récupère les différentes données des agences (représenté par les marqueurs). Pour cela comme je l’ai dit dans l’article précédent je fais un appel de mon XML où est stocké la longitude et latitude des  agences ainsi que les coordonnées des agences.


// Start Ajax call to retrieve xml data
$j.ajax({
type: ‘GET’,
url: ajax_url_m,
data: this.qry_page,
dataType: ‘xml’,
success: function (xml) {

$j(xml).find(‘marker’).each( function (i) {

// Init variables
_lat = $j(‘lat’, this).text();
_lng = $j(‘lng’, this).text();
_nbagences = $j(‘nbagences’, this).text();
_nom = $j(‘nom’, this).text();
_codeinsee = $j(‘codeinsee’, this).text();
_idquartier = $j(‘idquartier’, this).text();
_iddivision = $j(‘iddivision’, this).text();
_poly = $j(‘poly’, this).text();
_levels = $j(‘levels’, this).text();

});



Puis je fais un appel de ma fonction setmarker en lui passant comme paramètres les données des agences.


SLMapPointer.setMarker(
_lat,
_lng,
{
‘nom’: _nom,
‘idq’: _idquartier,
‘code’: code,
‘markerLat’: _lat,
‘markerLng’: _lng,
‘map’: tmpMap,
‘iteration’: i,
‘slagence’: SLMapPointer,
‘nbagences’: _nbagences,
‘qry’: SLMapPointer.qry_page,
},
‘<span class= »mapOverlay »>’ + _nom + ‘ (‘ + _nbagences + ‘ agences)</span>’,

// Voici les options de mes marqueurs
{
‘labelClass’: labelClass, // la class de mes marqueurs pour pouvoir les stylisé en css

‘labelText’:  _nbagences , // le texte que je désire afficher sur l’icone

‘icon’: SLIconPointer, // l’icone qui est un .png créer auparavant
‘clickable’: true, // je décide de mettre mon marqueur cliquable
}
);

Et voilà tout cela pour afficher une petite icône avec un texte dynamique !!!

Attention dans votre HTML faites d’abord l’appel au script de googlemap, puis au script de la fonction LabeledMarker et enfin l’appel de votre propre script.

- Si c’est votre première visite la carte se centreras en fonction de votre adresse IP

- Et sinon la carte seras centrée en fonction de votre dernière recherche.

Alors avant de se lancer dans le code 1 lien  à aller voir :  le guide pour developer de google map, ( a garder dans ces marques pages )

Puis se procurer une clé api pour google map.

Etant donnée que le but est de centrer la carte en fonction des données des utilisateurs et étant sur ID3x, il me faut tout d’abord créer un fichier XML , d’où je pourrais faire mes appel de macro et récupérer les informations nécessaire. Puis création de ma page HTML, où je crée seulement une <div> avec un ID= »map_canvas »  et bien sur je fais l’appel de ma feuille de javascript.  Je crée ensuite ma feuille de script.

Dans mon script, j’utilise du JavaScript (bien sur) avec JQuery et de l’ AJAX. L’ AJAX me permettra de récupérer les informations de mon XML ( attention à bien créer son XML sans erreurs, j’ai perdu une journée de travail en pensant que mon script était faux alors que j’avais tout simplement une petite erreur dans le XML).

Pour insérer une carte le code est assez simple et court :

<script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
      }
    }

    </script>

Mais là une simple carte s'affiche. Pour obtenir une carte plus complexe
suivant différentes informations le code est plus long et plus recherché.
Pour l'instant après plusieurs jours de code j'en suis à environ 400 lignes
de code et j'arrive à afficher la carte correctement en fonction des 2 critères,
il me reste maintenant une semaine pour afficher les markers des agences,
et stylisé tout ça. D'ici quelques semaines vous pourrez donc voir l'intégration
de la cartographie des agences sur seloger.com