Aggiunta dinamica di elementi comprimibili

Question

Fonte: http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html Quando aggiungo manualmente un elemento come questo al mio codice, viene visualizzato correttamente. Ma quando provo ad aggiungere con jQuery in questo modo:

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

E 'appena visualizza titolo h3 ed il contenuto di sotto di essa, quindi non come un elemento comprimibile. Come posso risolvere questo?

Answer 1

dovete aggiungerli al posto giusto (per esempio, con un elemento di data-role="page") quindi chiamare .page() per inizializzare il contenuto in allegato, in questo modo:

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

You can test it out here.

Answer 2

Il modo più semplice per raggiungere questo obiettivo è quello di chiamare il metodo pieghevole() dei div creati dinamicamente:

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

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

Answer 3

Meglio pieghevole è UpdateLayout, it is in the docs. In breve ...

Questo evento viene attivato da componenti all'interno del quadro che mostrano in modo dinamico/nascondere contenuti, ed è inteso come un meccanismo generico per notificare altri componenti che possono avere bisogno di aggiornare le loro dimensioni o posizione. All'interno del framework, questo evento viene attivato sull'elemento componente il cui contenuto è stato mostrato/nascosto e fino all'elemento del documento.

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

Answer 4

questo è quello che faccio. Speranza che aiuta

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() è una funzione js che restituisce un po 'di html che voglio all'interno del div pieghevole. può essere qualcosa di simile

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

Answer 5

Questo codice è per Perl, è possibile modificare per qualsiasi linguaggio di programmazione.

<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

A partire dal jquery beta2 cellulare si attiva un evento - .trigger ('creare')

Answer 7

è possibile aggiornare il pieghevole utilizzando il seguente codice

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

Hope it helps

Answer 8

In questo modo è possibile aggiungere piccoli collassabili in un gger uno in modo dinamico. 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

penso

dopo aver impostato l'innerHTML, semplicemente tiggerring un evento su di esso dovrebbe rendere la Contnet dinamico come di seguito

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

Answer 10

Ecco un esempio di ciò che ho fatto per cambiare dinamicamente il mio pieghevole. Avevo alcuni array che dovevo mostrare come intestazioni e quindi avevo bisogno di una griglia in ogni set pieghevole con 2 lati, uno per domanda e uno per risposta.

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

vedere la funzione enhanceWithin(): jQuery Mobile docs: enhanceWithin

chiamata enhanceWithin su un oggetto jQuery che rappresenta genitore vostro elemento DOM avere alcun jQuery Mobile caratteristiche aggiunto al codice HTML.

In questo caso:

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

Nota che se si aggiungono più jQuery Mobile Widget si può solo voler chiamare enhanceWithin su un antenato come "corpo" dopo aver aggiunto tutto il codice HTML dinamico.

Questa sarebbe una buona soluzione per questa domanda così: Refresh a section after adding HTML dynamically to jquery mobile