11480 sujets

JavaScript, DOM et API Web HTML5

Hello à tous,

Je suis bloqué sur un projet depuis maintenant plusieurs jours, j'aurais besoin de votre avis sur un cas particulier... un regard extérieur pourra m'helpé et je l'espère avancé... Pour info,je suis en stage dans une agence web.

Je vous explique :

En ce moment je travail sur une SearchBar pour une application immobiliere. Cette application est créer via un CMS app, qui s'appelle PandaSuite. Il y a la possibilité d'y injecter du code via un "bridge'.
La barre de recherche est faite en jquery. L'affichage est généré dans le fichier index.html, les fonction sont enregistré dans index.js, et les suggestion sont enregistré dans liste.js (via un tableau CSV) . La barre de recherche est fonctionnel. Je dois maintenant rendre cliquable chaque suggestion pour envoyé vers une page de l'app (via le bridge).

Ceux sur quoi je bloque : Dans le fichier index.html, j'ai fais un script (c'est le bridge dont je parlais), qui cible l'ensemble des suggestion, (ulUsers). Cependant, je dois cibler chaque LI,.Je n'arrive pas à cibler chacun des li un par un pour les rendre par la suite cliquable dans le CMS PendaSuite. Est ce que quelqu'un aurait une idéee comment je pourrais target chacun des li pour y poser un écouteur d'évenement ?
Quand j'ouvre l'inspecteur, j'essaie de target un LI, mais y'a pas de class ou id précis pour les différencier, et je n'arrive pas a détourner ce problème...

Code html de ma liste UL

<div id="bxFind" class="fontFamilyNormal fontSize13" style="width:95%; display:none; padding:5px;">
				<ul id="ulUsers" class="list"></ul>
				<ul class="pagination"></ul>


Code qui génére la liste UL-LI


$(function() {
	listObj=chargeListe(getTableauCsv());
	
	listObj.on('updated', function(list) {
		var nbElem=list.visibleItems.length;
		if ( nbElem == 1 ) {
			// on va chercher la li restituee
			$(".name").each(function(){ 
				viewUser( $(this) );
			});
		} else {
			if ( nbElem > 1 ) {
				cacheUser();
			}
		} // if ( list.visibleItems.length == 1 )
	}) // listObj.on('updated'

	$('#txFind').focus();
});


function chargeListe(tableauCsv) {
	var tabEntete = new Array();
	var ligneEntete = '';
	
	$.each( tableauCsv, function( keyList, valueList ) {
		if ( valueList.substring(0, 1) == '#' ) {
			ligneEntete=valueList.substring(1);
			tabEntete=ligneEntete.split(';');
		} else {
			$('#ulUsers').append('<li class="fontFamilyBold fontSize18 fontColorPurple"><p class="name" onclick="viewUser(this);" attr-ent="'+ligneEntete+'" attr-csv="'+valueList+'" style="cursor:pointer;">'+getChamp(tabEntete, valueList, 'Ville')+' - '+getChamp(tabEntete, valueList, 'Loyer')+' - ' +getChamp(tabEntete, valueList, 'Surface') +' - '+getChamp(tabEntete, valueList, 'Disponibilité') +'<span style="display:none;">'+valueList+'</span></p></li>');
		




Et voici le script, le bridge, qui permet de communiquer avec l'application


 function clickbox(){
            
            let el = document.getElementById('ulUsers');    // c'est ici qu'il faudrait ciblé chaque li à la place du UL, j'ai réussi a cibler uniquement le UL
            
     
            el.addEventListener("click",function(){
                PandaBridge.send('ulUsers');               // Envoie les marqueur à l'application.  Ici est ciblé également tout le UL, il faudrais target chaque LI 
            });
            
        }    
    
        PandaBridge.init(function(){ // fonction init qui sera le point d'entrée du programme 
            
            PandaBridge.onLoad(function(pandaData){ // charge la fonction clickbox
                clickbox();
            });
            
            PandaBridge.listen('clickbox',function(){ // j'écoute l'ensemble des marqueurs 
                clickbox();
            });
        });   




Je sais pas si j'ai été très claire dans mes explication... Smiley confused

voila voila Smiley smile
Salut

Il faut apprendre le CSS et les différentes formes que peut prendre un sélecteur.

Pour donner un style à tous les enfants LI d'un UL donné, on écrira :

#ulUsers > li {
    color: green;
}


jQuery et en JS querySelector et querySelectorAll prennent tous les sélecteurs CSS valident.

Donc document.querySelectorAll('#ulUsers > li') sélectionne tous les LI enfants du UL d'ID #ulUsers

const elemsLI = Array.from(document.querySelectorAll('#ulUsers > li'));

// Array.from() transforme en véritable Array la liste de nodes retournée par querySelectorAll

for (const elemLI of elemsLI) {
    elemLI.addEventListener('click', ev => {
        // debug, console, touche F12
        console.log(ev.target, ev.target.textContent);
    }, {
        capture: false,
        passive: true,
        once: false
    });
}
Merci pour ton retour Smiley smile

Mais du coup document.querySelectorAll('#ulUsers > li') selectionne tous les LI ,enfant du UL.
Et pour selectionner LI par Li je peux utiliser cette méthode ?
Car chaque suggestion (li) renvoie vers une page différente de l'app, c'est pourquoi je dois les bien les séparer...
tu as même le droit de faire
let el = document.getElementById('ulUsers').getElementByTagName("li");

et dans el, tu as tous les "li"
Modifié par JENCAL (01 Jun 2018 - 12:11)
Intéressant comme écriture , merci Jencal Smiley smile j'ai tester mais....

J'ai omis de préciser quelque chose pour parvenir à cibler chaque "li" : je dois paramétré les différents déclencheur pour créer l'interactivité avec le CMS de l'app dans le fichier : pandasuite.json pour renvoyé le "li" vers une page. Chaque "li" a une page différentes .

Voici le code que j'avais écris pour déclencher les actions sur l'évenement "ulUsers" , fonctionnel mais qui ciblait tout le "UL".


    {
  "version": "2.0.0",
  "main": "index.html",

  "events": [
    {
      "id": "ulUsers",
      "name": "ulUsers",
      "locale_name": {
        "fr_FR": "ulUsers"
      }
    }
  ],
  "actions": [
    {
      "id": "clickbox",                         
      "name": "click box",
      "locale_name": {
        "fr_FR": "click event"
      }
    }
  ]
}


En utilisant : let el = document.getElementById('ulUsers').getElementByTagName("li");
Comment je pourrais appeler chaque "li" dans le fichier pandasuite.json ? car je n'ai pas d'id propre a chacun...

Il faudrait avoir plusieurs 'event' dans le fichier .json, mais je ne sais pas comment cibler chacun des li..
Intéressant comme écriture , merci Jencal Smiley smile j'ai tester mais....

J'ai omis de préciser quelque chose pour parvenir à cibler chaque "li" : je dois paramétré les différents déclencheur pour créer l'interactivité avec le CMS de l'app dans le fichier : pandasuite.json pour renvoyé le "li" vers une page. Chaque "li" a une page différentes .

Voici le code que j'avais écris pour déclencher les actions sur l'évenement "ulUsers" , fonctionnel mais qui ciblait tout le "UL".


    {
  "version": "1.0.0",
  "main": "index.html",

  "events": [
    {
      "id": "ulUsers",
      "name": "ulUsers",
      "locale_name": {
        "fr_FR": "ulUsers"
      }
    }
  ],
  "actions": [
    {
      "id": "clickbox",                         
      "name": "click box",
      "locale_name": {
        "fr_FR": "click event"
      }
    }
  ]
}


En utilisant : let el = document.getElementById('ulUsers').getElementByTagName("li");
Comment je pourrais appeler chaque "li" dans le fichier pandasuite.json ? car je n'ai pas d'id propre a chacun...

Il faudrait avoir plusieurs 'event' dans le fichier .json, mais je ne sais pas comment cibler chacun des li..
Je t'avou que j'ai vraiment pas compris ton dernier message avec ton .JSON

Tu dis
alex75020 a écrit :
"Voici le code que j'avais écris pour déclencher les actions sur l'évenement "ulUsers" , fonctionnel mais qui ciblait tout le "UL".
mais juste en dessous tu met du json... ça déclenche rien du tout j'ai pas compris.

Ensuite tu dis :
alex75020 a écrit :
]"Comment je pourrais appeler chaque "li" dans le fichier pandasuite.json ?"

non mais tes <li> sont dans ton html, ou alors j'ai rien compris non plus. Dans ton json tu as des noeuds, c'est tout, rien d'autres.

Pour finir tu dis :
alex75020 a écrit :
"Il faudrait avoir plusieurs 'event' dans le fichier .json, mais je ne sais pas comment cibler chacun des li.."

toujours pas compris, un fichier json c'est fait pour echanger des informations, pas pour avoir des "event" dedans.... tes event c'est dans ton javascript et sur ton navigateur... pas dans un fichier.
Modifié par JENCAL (06 Jun 2018 - 10:15)
Je peux comprendre que cela ne soit pas très claire, c'est un cas particulier.

Le fichier pandasuite.json permet d'échanger les informations pour que le CMS PandaSuite puisse lire les actions demandées. C'est ce qui va permettre dans le CMS PandaSuite de créer une interactivité c'est a dire, de pouvoir afficher des actions possible.

https://help.pandasuite.com/fr/articles/inserer-contenu-html : liens qui explique le fonctionnement du fichier .json

https://help.pandasuite.com/fr/articles/se-connecter-api-meteo: exemple de cas sur le CMS


Les LI ne sont pas dans le fichier index.html :

<div id="bxFind" class="fontFamilyNormal fontSize13" style="width:95%; display:none; padding:5px;">
				<ul id="ulUsers" class="list"></ul>
				<ul class="pagination"></ul>


Les li sont généré par les ce code :

$(function() {
	listObj=chargeListe(getTableauCsv());
	
	listObj.on('updated', function(list) {
		var nbElem=list.visibleItems.length;
		if ( nbElem == 1 ) {
			// on va chercher la li restituee
			$(".name").each(function(){ 
				viewUser( $(this) );
			});
		} else {
			if ( nbElem > 1 ) {
				cacheUser();
			}
		} // if ( list.visibleItems.length == 1 )
	}) // listObj.on('updated'

	$('#txFind').focus();
});


function chargeListe(tableauCsv) {
	var tabEntete = new Array();
	var ligneEntete = '';
	
	$.each( tableauCsv, function( keyList, valueList ) {
		if ( valueList.substring(0, 1) == '#' ) {
			ligneEntete=valueList.substring(1);
			tabEntete=ligneEntete.split(';');
		} else {
			$('#ulUsers').append('<li class="fontFamilyBold fontSize18 fontColorPurple"><p class="name" onclick="viewUser(this);" attr-ent="'+ligneEntete+'" attr-csv="'+valueList+'" style="cursor:pointer;">'+getChamp(tabEntete, valueList, 'Ville')+' - '+getChamp(tabEntete, valueList, 'Loyer')+' - ' +getChamp(tabEntete, valueList, 'Surface') +' - '+getChamp(tabEntete, valueList, 'Disponibilité') +'<span style="display:none;">'+valueList+'</span></p></li>');


Vu que mes li sont généré par une fonction, c'est pourquoi je ne sais pas comment trigger chaque li... c'est sur quoi je bloque