Prawidłowe formatowanie podczas dodawania zawartości dynamicznej w jquery telefonu

Próbuję dynamicznie dodać zawartość do listy wyboru w składanej <li> elementu jQuery Mobile. Nie mogę uzyskać odpowiedniego formatowania z ładnymi zaokrąglonymi narożnikami i zgrupowanymi elementami. Jeszcze gorzej, gdy dodaję inne elementy na poziomie liścia.Prawidłowe formatowanie podczas dodawania zawartości dynamicznej w jquery telefonu

Here jest przykładem, który pokazuje problem (dodać jQuery i skrypty jquerymobile i CSS w nagłówku oczywiście):

<body> 
<div data-role="page" id="page"> 
    <ul id="listList" data-role="listview"> 
    <li id="list1" data-role="collapsible"> 
    <h3>list 1</h3> 
    <div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" id="fs1"> 
     <input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li> 
    <li id="list2" data-role="collapsible"> 
    <h3>list 2</h3> 
    <p>here comes another list of checkboxes...</p></li></ul> 
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div> 
</body> 
<script> 
function addCheckbox() { 
    $("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>'); 
} 
</script>

próbowałem dodać .page() po wywołaniu append() ale to nie działa prawidłowo, choć trochę lepiej.

poza moim przykładzie pytanie rodzajowy jest sposób dynamicznego dołączania zawartości do drzewa DOM po jQuery Mobile bawił się ze strukturą DOM. Wierzę, że istnieje funkcja, która "jockeyymobilizes" część drzewa, ale nie mogę go znaleźć.

Bardzo dziękuję za pomoc!

EDYCJA: Krótko mówiąc, próbuję dynamicznie dodawać elementy do jednego elementu <li> z listview i nie próbuję dodawać elementów do samej listy. Odświeżenie listview nie wydaje się tu pomocne.

EDIT 2: jestem coraz nieco bliżej jak znalazłem funkcję .trigger("create") które mogą być przykuty do .append() (cf JQM FAQ). Poniższy skrypt działa nieco lepiej, ale data-role="controlgroup" nie zapewnia odpowiedniego formatowania z ładnymi zaokrąglonymi ramkami.

$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");

Będę zamieszczać pełną odpowiedź, jeśli dojdę tam w pewnym momencie.

EDIT 3: Tu jest mój przykład ilustruje w jsFiddle

Źródło

2012-02-26 Mad Echet

PS: Zastanawiam się również, dlaczego pole wyboru wydaje się wyłączone, a elementy zwijane nie są zwinięte domyślnie w moim przykładzie, ale jest to pomocnicza. –

myślę mogę odpowiedzieć na moje własne pytanie więc o to, co mam:

dynamicznie dodawać elementy w jQuery Mobile Aplikacja .trigger("create") (porjQuery Mobile FAQ)
, aby dodać je do składanego części składanego elementu dodać go do div.ui-collapsible-content lub utwórz div pojemnik w składaną część ex ante więc dodać zawartość bezpośrednio tam
aby uzyskać ładny rendering pogrupowane Pola wyboru, należy dodać wszystkie pola na raz (nie mogłem dostać eleganckie zaokrąglone narożniki kiedy dodałem je kolejno

Więc tutaj jest moja ostateczna skrypt, który robi to, co potrzebne:

$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">' 
    +'<input type="checkbox" id="cb1" /><label for="cb1">text</label>' 
    +'<input type="checkbox" id="cb2" /><label for="cb2">More text</label></fieldset>' 
    +'<a href="index.html" data-role="button" data-icon="delete">Delete</a>') 
    .trigger("create");

Mam nadzieję, że to pomoże!

Źródło

2012-02-27 09:41:54

Oto mój przykład pracy w http://jsfiddle.net/hbbvM –

Niekoniecznie pewny śledzę. Czy szukasz więcej, jak zastosować odpowiedni styl. W takim przypadku należy użyć:

$('#mylist').listview('refresh');

Będzie to możliwe po dodaniu nowych pozycji do listy.

Źródło

2012-02-27 02:11:41 imaginethepoet

Dzięki, ale problem polega na tym, że jQuery mobile tworzy serię kontenerów i reorganizuje elementy po załadowaniu strony. Kiedy dynamicznie dodam nowe elementy jquery (w tym przypadku pola wyboru i ich etykiety), reorganizacja nigdy się nie dzieje, stąd brzydka prezentacja. Odświeżanie działa w widoku listy, ale w moim przykładzie problem pochodzi z pól wejściowych, nie dodaję żadnej pozycji do listy, ale dołączam elementy do zwijanej części jednego elementu na liście. –

Ten problem jest z powodu, po dołączeniu dynamicznej zawartości do ListView, jQuery klasy telefony mogą nie stosując do ListView. więc spróbuj jedną z poniższych

$('#listList').listview('refresh'); //which refresh your list view 
$('#listList').listview('refresh',true); //which rebuilds the listview with your new content

Źródło

2012-02-27 04:01:45

Dzięki, ale jak próbowałem wyjaśnić w innym komentarzu, nie dodaję elementów do widoku listy, ale dołączam elementy do składanej części jednego elementu elementu div. Odświeżanie listy nie wydaje się tutaj pomocne. –

@Mad Echet: Myślę, że twoje zdarzenie onclick nie uruchamia funkcji "addCheckbox()". Czy możesz to sprawdzić, umieszczając alert w pierwszej linii kodu funkcji ... Możesz sprawdzić swój przykład tutaj [link] http://jsfiddle.net/reddyprasad321/wECQx/5/ –

dzięki za spojrzenie, ja nie " t dość wiem, dlaczego zdarzenie nie jest uruchamiane w twoim przykładzie (nie znam jsfiddle), ale wypalanie nie było dla mnie problemem (tekst został poprawnie dodany, ale brakowało formatowania). Postaram się opublikować działający przykład w jsfiddle, ale w mojej odpowiedzi można znaleźć moje rozwiązanie. –

Prawidłowe formatowanie podczas dodawania zawartości dynamicznej w jquery telefonu

Odpowiedz

Powiązane problemy