jQuery Mobile - Collapsible via AJAX

Front-end

30/10/2014

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:
<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

Edcp_poa

Curtidas 0

Respostas

Edcp_poa

Edcp_poa

30/10/2014

Correção

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>
GOSTEI 0
POSTAR