La Ferme du web - Les forums

Venez baraguiner avec la communauté !

Vous n'êtes pas identifié.

#1 02/08/2013 10:36:33

GuikLePutride
Membre
Date d'inscription: 02/08/2013
Messages: 2

[Jquery Mobile + Phonegap]Accordeon dynamique en jquery

Bonjour à tous,

Je suis actuellement en train de développer une appli mobile via Phonegap et Jquery mobile (JQM).

Cette appli doit lire un fichier JSON et l'afficher dans un accordéon JQM Accordéon JQM

J'arrive bien à récupérer et afficher le contenu de mon fichier, cependant JQM ne me l'affiche pas correctement.

Voici mon code :

                              var url="./client.json";
                              var list='<div id=collapseClient" data-role="collapsible-set" data-theme="c" data-content-theme="d">';
                                 

                              $.getJSON(url, function(data){
                                       
                                        $.each(data, function(index, d){
                                               list+='<div data-role="collapsible">';
                                               list+='  <h3 data-theme="c">'+d.nom+'</h3>';
                                               list+='  <p>Département du siège : '+d.dep_siege+'<br/>';
                                               list+='  Siren : '+d.siren+'<br/>';
                                               list+='  Siret du siège : '+d.siret_siege+'<br/>';
                                               list+='  Nombre d\'etablissement : '+d.nb_etab_insee+'</p>';
                                               list+='</div>';
                                         });
                                               
                                        list+='</div></div>';
                                        $("#contact").append(list);
                                        $("#contact").collapsibleset( "refresh" );
                             });



<div id="contact"></div>


D'après la doc JQM (Accrodeon JQM) j'ai ajouté  : $("#collapseClient").collapsibleset( "refresh" ); mais je ne pense pas l'utiliser correctement car cela ne fonctionne pas.

N'étant pas super calé en Javascript pourriez vous éclairer un peu ma lanterne car je tourne en rond !

D'avance merci

Hors ligne

 

02/08/2013 10:36:33

Botte De Foin Publicitaire


#2 02/08/2013 16:10:30

GuikLePutride
Membre
Date d'inscription: 02/08/2013
Messages: 2

Re: [Jquery Mobile + Phonegap]Accordeon dynamique en jquery

Bon finalement je me répond moi même.

Il "suffisait" de rajouter : $('#contact [data-role=collapsible-set]').collapsibleset();

juste après le :  $('#contact').append (list);

ce qui donne un code final correspondant à ça:


<div data-role="content">
                              var url="./client.json";
                              var list='<div data-role="collapsible-set" data-theme="b" data-content-theme="d">';
                             
                              $.getJSON(url, function(data){
                                       
                                        $.each(data, function(index, d){
                                               list +='<div data-role="collapsible">';
                                               list +='  <h3 data-theme="c">'+d.nom+'</h3>';
                                               list +='  <p>Département du siège : '+d.dep_siege+'<br/>';
                                               list +='  Siren : '+d.siren+'<br/>';
                                               list +='  Siret du siège : '+d.siret_siege+'<br/>';
                                               list +='  Nombre d\'etablissement : '+d.nb_etab_insee+'</p>';
                                               list +='</div>';
                                               });
                                       
                                        list+='</div>';
                                       
                                        $('#contact').append (list);
                                        $('#contact [data-role=collapsible-set]').collapsibleset();
                                       
                                        });
</script>

<div id="contact"></div>


voila désolé du dérangement !

Hors ligne

 

Pied de page des forums

Powered by FluxBB
© Copyright 2008-2009 - LaFermeduWeb.net