JQuery Collapsible Div only appears correctly first time

Question

Hi I have a simple collapsible div created in js by a function like this:

function createColDiv() {
  return '<div data-role="collapsibleset" data-theme="a" data-content-theme="a">' +
    '<div data-role = "collapsible">' +
    '<h2>Sub0001</h2>' +
    '</div>' +
    '</div>';
}

this is done inside another function that creates a table that appears before the collapsible div, like this:

function build() {
  var windowContent = '<table id="tabellaGallery" class="ui-body-d ui-shadow ui-responsive table-stripe" data-column-btn-theme="b" style="width:100%; margin:0px; border:0px solid black; border-collapse: collapse;">' +
  '<tr style="text-align: center; border-bottom: 1px solid #AFAFAF" ><td align="center" style="text-align: center; font-weight: bold" colspan="2">Table Title</td></tr>' +
  '<tr class="bb" style="vertical-align: middle;min-width: 150px;padding-left:0.3em">' +
            '<td style="vertical-align: middle;min-width: 150px;padding-left:0.3em">Data di nascita</td>' +
            '<td align="right" style="vertical-align: middle; padding-left:0.5em;padding-right:0.4em">14091947</td>' +
  '</tr>' +
  '<tr class="bb" style="vertical-align: middle;min-width: 150px;padding-left:0.3em">' +
            '<td style="vertical-align: middle;min-width: 150px;padding-left:0.3em">Luogo di nascita</td>' +
            '<td align="right" style="vertical-align: middle; padding-left:0.5em;padding-right:0.4em">L378</td>' +
  '</tr>' +
  '</table>' + 
  createColDiv();

  $('#myPage').html(windowContent);
}

Then I add all the html to the page with $('#myPage').html(windowContent);. The problem is that the first time I enter that page I can see my collapsible div correctly like this:

but then if I enter again I see my "collapsible div" like this:

It is not even a button anymore, just plain text.. What did I do wrong?

It will be good if you post the complete code inside `build` function for us to replicate this — Guruprasad J Rao, Sep 01 '15 at 12:26
What do you mean by "the first time I enter that page" and "but then if I enter again"? — jonmrich, Sep 01 '15 at 12:28
When i enter that page '#myPage' first time then return back to homepage and then back again in that page... — ayasha, Sep 01 '15 at 12:31

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

It's seems that you are using jQuery Mobile.

If so, when the page was loaded, the script (jquery-ui) "read" the attributes of the elements (buttons, lists etc) and add classes by them.

If you just add a html markup, you need that the script will run again and "do his magic".

If I'm right so far, read this question: Dynamically Add Buttons Via JQuery Mobile

In short, you have to run this: (on a button, for example)

$("your_button_selector").button().button('refresh');

edited May 23 '17 at 12:22

Community

1
1

answered Sep 01 '15 at 12:43

Mosh Feu

28,354
16
88
135

Yes I think that is the problem thanks. But since mine is not a button but a collapsible set the only way is to use .trigger("create"); as said here http://www.gajotres.net/jquery-mobile-and-how-to-enhance-the-markup-of-dynamically-added-content/ . It works but then all other pages change and become a mess: divs are moved all over.. – ayasha Sep 01 '15 at 13:47
Thanks! This works without problems $('[data-role="content"]').trigger('create'); – ayasha Sep 01 '15 at 14:04

JQuery Collapsible Div only appears correctly first time

1 Answers1