Problem with the collapsible of jquery mobile and ajax

Question

Problem with the collapsible of jquery mobile and ajax

Navigation

#1 by (2 votes)

1

Good afternoon.

I'm making a mobile application with jquery mobile and I have a problem with the collapsible elements.

I make an ajax call to the server to get data, and if the answer is correct, what I want is to insert as many collapsible elements as responses from the server.

HTML code:

<div data-role="page" id="paginaListado">
    <div data-role="header">
        <h1>Listado</h1>
    </div>
    <div data-role="content">
        <div id="seccionListadoMaterial"></div>
    </div>
</div>

Javascript code:

$("#seccionListadoMaterial").html("");

$.ajax({
    type: "POST",
    url: "php/listadoMaterial.php",
    cache: false,
    success: function(data){
        for(var i = 0 ; i < 4 ; i++){
            $("#seccionListado").append("<div data-role='collapsible'><h3>Esto es lo de fuera</h3><p>Y esto lo de dentro</p></div>");
        }
    }
}); 
$.mobile.changePage('#paginaListado');

If I do it as shown above, it looks like this:

On the other hand, if instead of doing the for inside the aces of ajax I do it out, it looks ok:

I need to do it within the ajax call to be able to put the collapsible text that I receive from the server.

I have tried to change the subject, but nothing, I have also tried to do it "collapsible-set" but the same.

Why can it be happening?

Greetings.

javascript jquery html jquery-mobile

asked by M. Giner 28.12.2017 в 14:01

source

1 answer

Error with RawQuery in SQLite How can I add a second navigation drawer?

score 2 · Accepted Answer

The problem is that in the initial load of the page, automatically all the elements with attribute data-role="collapsible" are converted to collapsible .

Solution:

When the elements are created after the initial load ( eg: asincrónica ) you must create them manually.

Demo:

$(function() {

  // AQUI Ejemplo de carga asincrónica
  window.setTimeout(function() {
    $container = $("#seccionListadoMaterial");
    
    for (var i = 0; i < 4; i++) {
      $container.append("<div data-role='collapsible'><h3>Esto es lo de fuera</h3><p>Y esto lo de dentro</p></div>");
    }
    
    // AQUI Creamos manualmente los Collapsible
    $container.find('[data-role="collapsible"]').collapsible();
  }, 500);
});

<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

<div data-role="page" id="paginaListado">
  <div data-role="header">
    <h1>Listado</h1>
  </div>
  <div data-role="content">
    <div id="seccionListadoMaterial"></div>
  </div>
</div>