How do you dynamically add side panel menu items with jQuery Mobile and keep all CSS styling?

Question

I pulled very small snippets from my code to show a very simple example of my problem. I put it in JSFiddle -> http://jsfiddle.net/hollycoffee/LjLMU/

I have researched and found others with the same issue and they either tried addClass or refresh jQuery methods, so I tried both in a few different places in my code and nothing worked, so I'm hoping that by making the simple example in JSFiddle, someone can point me to exactly what I am missing and where.

The example is random and won't make sense, but the part that I am stuck on is the fact that only the dynamic portion of the menu loses style, the Skills list.

The menu portion markup looks like this:

<header data-role="header" data-position="absolute" data-theme="a">
    <h1>View Skills</h1>
    <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
</header>

<!-- Starting our left side menu panel -->
<div data-role="panel" id="left-panel" data-theme="a">
    <ul data-role="listview" data-theme="a">
        <li data-icon="back"><a href="#" data-rel="close">Back Home</a></li>
    </ul><br />

    <div class="ui-header ui-bar-a" data-theme="a">Settings</div>
    <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
        <h3>Optimization Settings</h3>
        <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
            <ul data-role="listview">
                <li><a href="#" data-rel="close">Colors</a></li>
                <li><a href="#" data-rel="close">Preferences</a></li>
            </ul>
        </div><!-- /collapsible-set -->
    </div><!-- /collapsible -->

    <div class="ui-header ui-bar-a" data-theme="a">Skills Menu</div>
    <div id="skillsList"></div>

    <div class="ui-header ui-bar-a" data-theme="a">Saved</div>    
    <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
        <h3>Saved Searches</h3>
        <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
            <ul data-role="listview">
                <li><a href="#" data-rel="close">Angry Birds</a></li>
                <li><a href="#" data-rel="close">Professional Events</a></li>
            </ul>
        </div><!-- /collapsible-set -->
    </div><!-- /collapsible -->
</div><!-- / Menu panel -->

Everything looks good except for the skillsDiv, which is filled by this javascript:

function CreateSkillsList(skills){
    var skillsDiv = $('#skillsList');
    var html = "<div data-content-theme=\"a\" data-theme=\"a\" data-iconpos=\"right\"    data-inset=\"false\" data-role=\"collapsible\"><h3>Skills</h3><div data-role=\"collapsible-set\" data-inset=\"false\" data-iconpos=\"right\" data-theme=\"a\" data-content-theme=\"a\">";
    html += "<ul data-role='listview'>";

    var size = skills.length;
    for (i=0; i<size; i++) {
        html += "<li><a href=\"#\" data-rel=\"close\"><div id='Skill" + i + "'></div>   </a></li>";
    }

    html += "</ul></div></div>";
    skillsDiv.html(html);     
}

Each skill does show as a list item, but has no CSS.

Here is the JSFiddle so you can use the top left Menu button to see the skills list with no style:

http://jsfiddle.net/hollycoffee/LjLMU/

Thank you so much for the help, you StackOverflow geniuses help me every time! -Holly

(Quick note update - In my real application, I don't use the $(document).ready() - I just put it into this example to fill my array for me. My real application gets the array filled by an external API, so I thought this was the simplest way to re-create it.)

I have updated my answer and the demo. – Omar May 07 '13 at 23:40 — Omar, May 07 '13 at 23:40

Omar · Accepted Answer · 2013-10-18T12:30:00.053

3

Edit: Add this at the end of your function

$('[data-role=page]').trigger('pagecreate');

~~Just add $('[data-role=panel]').trigger('updatelayout'); after injecting items dynamically to panel.~~

Demo

edited Oct 18 '13 at 12:30

answered May 07 '13 at 22:38

Omar

32,302
9
69
112

I tried your demo but it didn't work, it gave me an error that looked like this: uncaught exception: Error in Actionscript. Use a try/catch block to find error. [Break On This Error] ...e{K=x.u.path}var A=M.path;if(K!=A){if(/\//.test(x.o)){return false}var L=K.split... What browser did your demo work in? I am using Firefox. – codesforcoffee May 07 '13 at 22:52
I tried it on my iPhone in Safari and the Skills don't populate at all with your demo link. I'm not sure what's wrong. Thank you for trying to help me though, Omar. I really appreciate it! -Holly – codesforcoffee May 07 '13 at 22:57
I think it was just missing the top because you removed the .ready line and left a trailing }); at the end.... but when I removed that it still didn't work. I'm still stumped. – codesforcoffee May 07 '13 at 23:01
In my real application, I don't use the .ready. I just put it into this example to fill my array for me. My real application gets the array filled by an external API, so this was the simplest way to re-create it.... – codesforcoffee May 07 '13 at 23:06
I tried adding ('
').trigger('refresh'); and ('#left-panel').trigger('refresh'); and ('
').trigger('updatelayout'); and ('#left-panel').trigger('updatelayout'); in the CreateSkillsMenu function before the last close brace. Nothing is working for me...
– codesforcoffee May 07 '13 at 23:25
did you only add those 4 lines at the end? It works now!! It looks to me like you removed the .ready and added the 4 lines at the bottom. If you had to do anything additional that I'm not catching please let me know! Thank you soooo very much! – codesforcoffee May 07 '13 at 23:35
In fact only this `$('[data-role=page]').trigger('pagecreate');`. – Omar May 07 '13 at 23:36
Amazing, thank you! Trying to get over this learning curve with jquery mobile. I appreciate your help so much! – codesforcoffee May 07 '13 at 23:43
@codesforcoffee you're welcome :) *trial and error*, good luck. – Omar May 07 '13 at 23:45
1

Now my actual project menu is working! I love you, Omar!!!! I'll be eternally grateful. :D – codesforcoffee May 08 '13 at 00:26

score 0 · Answer 2 · answered Oct 17 '15 at 02:14

0

Use:

$('#panel-id').html(yourHtmlHere);
$('#panel-id').trigger('create');
$('#panel-id').trigger('updatelayout');

Standard CSS for styling.

answered Oct 17 '15 at 02:14

Ronnie Royston

16,778
6
77
91

How do you dynamically add side panel menu items with jQuery Mobile and keep all CSS styling?

2 Answers2

Linked