Fórum jQuery Mobile - Collapsible via AJAX #499716
30/10/2014
0
Prezados colegas, tentarei ser rápido e diretor.
Intento: trazer um collapsible-set com uma série de características de um produto, via AJAX.
O que acontece: a consulta PHP sai perfeitamente OK e o layout que não fica no collapsible-set fica perfeito. Apenas o que está no collapsible-set não dá certo.
O que tentei fazer: vez que o método de inserção simples (exemplo 1) não deu certo, tentei o detalhado (exemplo 2).
Exemplo 1:
Exemplo 2:
Resultado do Exemplo 2: o CSS é aplicado e a aparência é de que o collapsible funcionará corretamente, mas não abre nenhum dos elementos colapsible do set.
Outras tentativas de fazer o exemplo 2 dar certo: apliquei o ID resultado no colapsible-set e, no meu javascript coloquei os seguintes códigos para teste (um de cada vez):
1 - $( ".selector" ).collapsibleset( "refresh" );
2 - $( "#myCollapsibleSet" ).children().trigger( "collapse" );
Agora as minhas suposições, segundo o que eu li no site do jQuery Mobile acabaram.
Espero poder contar com a ajuda e paciência dos colegas.
Um abraço!
Intento: trazer um collapsible-set com uma série de características de um produto, via AJAX.
O que acontece: a consulta PHP sai perfeitamente OK e o layout que não fica no collapsible-set fica perfeito. Apenas o que está no collapsible-set não dá certo.
O que tentei fazer: vez que o método de inserção simples (exemplo 1) não deu certo, tentei o detalhado (exemplo 2).
Exemplo 1:
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
Exemplo 2:
<div id="resultado" data-role="collapsibleset" class="ui-collapsible-set ui-corner-all"><!-- SET de collapsebles --> <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-first-child ui-collapsible-collapsed"><!-- COLLAPSEBLE 1 --> <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus"> Descrição <span class="ui-collapsible-heading-status">click to expand contents</span> </a> </h3> <div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true"> <p><?php nl2br($desc_web); ?></p> </div> </div><!-- COLLAPSEBLE 1 --> <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-first-child ui-collapsible-collapsed"><!-- COLLAPSEBLE 2 --> <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-btn-a ui-icon-plus"> Outro 2 <span class="ui-collapsible-heading-status">click to expand contents</span> </a> </h3> <div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true"> <p><?php nl2br($caracteristicas); ?></p> </div> </div><!-- COLLAPSEBLE 2 --> </div><!-- SET de collapsebles -->
Resultado do Exemplo 2: o CSS é aplicado e a aparência é de que o collapsible funcionará corretamente, mas não abre nenhum dos elementos colapsible do set.
Outras tentativas de fazer o exemplo 2 dar certo: apliquei o ID resultado no colapsible-set e, no meu javascript coloquei os seguintes códigos para teste (um de cada vez):
1 - $( ".selector" ).collapsibleset( "refresh" );
2 - $( "#myCollapsibleSet" ).children().trigger( "collapse" );
Agora as minhas suposições, segundo o que eu li no site do jQuery Mobile acabaram.
Espero poder contar com a ajuda e paciência dos colegas.
Um abraço!
Edcp_poa
Curtir tópico
+ 0
Responder
Posts
30/10/2014
Edcp_poa
Correção
O exemplo 1 é o seguinte:
O exemplo 1 é o seguinte:
<div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>Section 1</h3> <p>I'm the collapsible set content for section 1.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>I'm the collapsible set content for section 2.</p> </div> </div>
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)