Ajouter dynamiquement des éléments pliables

Question

Source: http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html Lorsque j'ajoute manuellement un élément de ce type à mon code, il s'affiche correctement. Mais quand j'essaie d'ajouter avec jQuery comme ceci:

$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>'); 

Il affiche juste titre dans h3 et le contenu ci-dessous, donc pas un élément pliable. Comment puis-je résoudre ce problème?

Answer 1

Vous devez les ajouter au bon endroit (par exemple sous un élément data-role="page") puis appelez .page() pour initialiser le contenu que vous joint en annexe, comme ceci:

$('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>') 
    .appendTo('#someElement').page(); 

You can test it out here.

Answer 2

La meilleure façon d'y parvenir est d'appeler la méthode pliable() sur les divs créées dynamiquement:

$('div[data-role=collapsible]').collapsible(); 

source: http://forum.jquery.com/topic/dynamically-add-collapsible-div

Answer 3

Mieux que pliable est UpdateLayout, it is in the docs. En bref ...

Cet événement est déclenché par des composants dans le cadre qui dynamiquement afficher/cacher le contenu et est conçu comme un mécanisme générique pour informer les autres composants qu'ils peuvent avoir besoin de mettre à jour leur taille ou position. Dans le cadre, cet événement est déclenché sur l'élément de composant dont le contenu a été affiché/masqué et bulles jusqu'à l'élément de document.

$('div[data-role=collapsible]') 
    .trigger('updatelayout'); 
    //.collapsible(); 

Answer 4

ce que je fais. Hope it helps

HTML

<div id="collapsibleSet" data-role="collapsible-set"> 
    <div id="ranking1"></div> 
</div> 

Javascript

$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>'); 
$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true}); 

htmlRankings() est une fonction qui renvoie js certains html que je veux dans la div pliable. il peut être quelque chose comme ça

<h3>11</h3> 
<span>test</span> 

Answer 5

Ce code est pour perl, vous pouvez le modifier pour tout langage de programmation.

<a href="javascript:collapsible('$div_instance','$imageID')"> 
     <IMG id='$imageID' SRC='$imagePath' alt='(Expand/Collaspe Section' title='Expand/Collaspe' width=10 height=10> 
      $display_header <br/></a> 
      <div id=$div_instance name=$div_instance 
      style="overflow:hidden;display:$display_option;margin-left:30px; margin-top:20px;"> 
             <-- your content --> 
      </div> 
<script language="JavaScript" type="text/javascript"> 
    <!-- 
    function collapsible(theID,imageID) { 
      var elemnt = document.getElementById(theID); 
      var imageObject =document.getElementById(imageID); 
      if(elemnt.style.display == 'block') { 
       elemnt.style.display ='none'; 
       imageObject.src='images/expand_icon.gif'; 
      } 
      else{ 
      elemnt.style.display ='block'; 
      imageObject.src='images/expand_icon_down.gif'; 
      } 

    } 
    // --> 
    </script> 

REF: http://www.ssiddique.info/simple-javascript-to-create-dynamic-collapsible-section.html

Answer 6

Au beta2 mobile jquery vous déclenchez un événement - .trigger ('créer')

Answer 7

vous pouvez actualiser le pliable en utilisant le code suivant

$('#element').collapsibleset('refresh'); 

J'espère que ça aide

Answer 8

De cette façon, vous pouvez ajouter de petites collapsibles dans un bi gger un dynamiquement. HTML:

<div data-role="collapsible" data-mini="false" data-theme="b" > 
    <h3>main header text</h3> 
    <div id="aCollaps"></div> 
</div> 

Javascript

//Your could do for(){ 
    $("#aCollaps").append('<div data-role="collapsible" data-inset="false" data-content-theme="b">' + 
    '<h3>'+HeaderText+'</h3>'+ContentText+'<br/></div>'); 
//} 
//You might want to be more specific here if you have more collapsibles in the page. this just updates all collapsibles 
$('div[data-role=collapsible]').collapsible({refresh:true}); 

Answer 9

Je pense que

après avoir réglé le innerHTML, tiggerring simplement un événement sur elle devrait rendre la contnet dynamique comme ci-dessous

$('#<divId or elementId').trigger("create"); 

Answer 10

Voici un exemple de ce que j'ai fait pour changer dynamiquement mon pliable. J'avais quelques tableaux que je devais afficher en en-tête, et puis j'avais besoin d'une grille dans chaque ensemble pliable avec 2 côtés, un pour la question et un pour la réponse.

var inputList = ''; 
    var count = 0; 
    var divnum = 999; 
    var collit = 'false'; 
    inputList += '<div data-role="content">'; 
    inputList += '<div id="fb_showings_collapse" data-role="collapsible-set" data-theme="b">'; 
    $.each(fbFullStrArray, function(index, item) { 
    //set questions and answers for each appt 
    getsetApptFback(fbStrApptArray[index]); 
    //write the html to append when done 
    inputList += '<div data-role="collapsible" data-collapsed="'+collit+'">'; 
    inputList += '<h3>'+fbFullStrArray[index]+'</h3>'; 
    inputList += '<div id="g'+divnum+'" class="ui-grid-a">'; 
    inputList += '<div id="gb'+divnum+'" class="ui-block-a">'; 
    inputList += '<div id="fbq'+index+'"><ol>'; 
    $.each(fbQidArray, function(ind,it) { 
     inputList += '<li>'+fbQuestionArray[ind]+'<b></b></li>'; 
    }); 
    inputList += '</ol></div></div>' 
    inputList += '<div id="ga'+divnum+'" class="ui-block-b">'; 
    inputList += '<div id="fba'+index+'"><ul>'; 
    $.each(fbQidArray, function(ind,it){ 
      inputList += '<li>'+fbAnswerArray[ind]+'<b></b></li>'; 
    }); 
    inputList += '</ul></div></div></div></div>'; 
    collit = "true"; 
    divnum++; 
    count++; 
    }); 
    inputList += '</div></div>'; 

    $('#fb_showings_collapse [role=collapsible-set]').text(''); 
    $('#fb_showings_collapse [role=collapsible]').text(''); 
    if (count > 0) { 
    $('#fb_showings_collapse [role=collapsible]').remove(); 
    $('#fb_showings_collapse').append(inputList).collapsibleset('refresh'); 
    } 
    else if (count == 0){ 
    inputList = 'Sorry! No Showings To Show Feedback For!'; 
    $('#fb_showings_collapse [role=collapsible-set').remove(); 
    $('#fb_showings_collapse [role=collapsible]').text(inputList); 
    } 

Answer 11

Voir la fonction enhanceWithin(): jQuery Mobile docs: enhanceWithin

Appel enhanceWithin sur un objet jQuery représentant votre parent de l'élément DOM d'avoir des fonctionnalités jQuery Mobile ajouté à votre code HTML.

Dans ce cas:

jQuery('[data-role="collapsible"]').parent().enhanceWithin(); 

Remarque que si vous ajoutez plusieurs jQuery Mobile widgets ne pouvez appeler enhanceWithin sur un ancêtre, comme « corps » après avoir ajouté toute votre HTML dynamique.

Ce serait une assez bonne solution pour cette question ainsi: Refresh a section after adding HTML dynamically to jquery mobile