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
Code qui génére la liste UL-LI
Et voici le script, le bridge, qui permet de communiquer avec l'application
Je sais pas si j'ai été très claire dans mes explication...
voila voila
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...
voila voila
