dynamically populate into navigation bar from javascript

Question

This is my jquery mobile page header section i want to populate my dynamically populated data from javascript to navigation bar in this code.

<div data-role="page" data-theme="a" id="homePage"  >
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3 class="mblHeading">Client</h3>
        <a href="#assignedWI" data-icon="home" data-transition="slide" data-theme="a"></a> <a data-rel="dialog" data-position-to="window" data-transition="slidedown" data-theme="a" data-mini="true" href="#AboutDialog" class="ui-btn-right"> About </a>
        <div data-role="navbar" >
            <ul id="navid">
                <li><a href="a.html">One</a></li>
                <li><a href="b.html">Two</a></li>
            </ul>
        </div>
    </div>

My java script code for dynamically populating the content.Here querytableid is navid.navigationList is an array

function populateQueryList4(queryTableID)
{
    var listParent = jq(queryTableID);
    listEntry = document.createElement("LI");
    aNode = document.createElement("A");

    aNode.innerHTML=navigationList[k-1];

    listEntry.appendChild(aNode);

    aNode.onclick = function() {
        //displayArtifactContent(artifactAreaInfoMap[wiTitle]);
    };
    listParent.append(listEntry);
    jq("#navid").navbar('refresh');
}

score 2 · Answer 1 · edited May 23 '17 at 10:32

Unfortunately you cant populate navbar just like that. Functions navbar() and navbar('refresh') are not going to help you here, not trigger('create') or trigger('pagecreate'). For some reason, when you dynamically add additional navbar item it will not be styled as it should and this is an error.

There are 2 alternative ways how it can be done.

Dynamically populate navbar during the pagecreate or pagebeforecreate page venet.

Basically during those 2 events page is style not styled according to jQuery Mobile styles. So any added content at this point will be enhanced automatically.

Here's a working jsFiddle example for you: http://jsfiddle.net/Gajotres/SJG8W/

$(document).on('pagebeforecreate', '#index', function(){       
    $('[data-role="navbar"]').html('<ul>' +
        '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
        '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
        '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
        '</ul>');
});

Manually enhance dynamically added navbar items

Other solution is to do it by yourself. It is not complicated as you will see in a working example: http://jsfiddle.net/Gajotres/V6nHp/

$('#index').live('pagebeforeshow',function(e,data){    
    navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});


var navbarHandler = {
    addNewNavBarElement:function(navBarID, newElementID, newElementText) {
        var navbar = $("#" + navBarID);

        var li = $("<li></li>");        
        var a  = $("<a></a>");
        a.attr("id", newElementID).text(newElementText);
        li.append(a);

        navbar = navbarHandler.clearNavBarStyle(navbar);

        navbar.navbar("destroy");
        li.appendTo($("#" + navBarID + " ul"));
        navbar.navbar();
    },
    clearNavBarStyle:function(navbar){
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-[\w\-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });
        return navbar;   
    }
}

Comments

As you can see for this method to work you must understand how jQuery Mobile page events work, to find out more take a look at my other answer: jQuery Mobile: document ready vs page events.

Also take a look at my other answer regarding enhancement of jQuery Mobile pages markup: jQuery Mobile: Markup Enhancement of dynamically added content

Hi gajotres thanks for answering the question. For the first solution do u say something like i have to populate everything in the html and display it as html . Can u please explain it . Thank u — anilgontla, May 06 '13 at 08:35
No no, first solution only requires from you to populate navbar with additional li elements. Only thing you don't need to do is refresh navbar because jQuery Mobile will do it automatically (only if this action is done during pagecreate or pagebeforecreate events). — Gajotres, May 06 '13 at 08:51
thank u i removed that refresh line and what else should i do to make it work . — anilgontla, May 06 '13 at 08:55
Take a look at my jsFiddle example, I cant help you because I can see your code. My answer will provide you with more then enough information to do the rest. — Gajotres, May 06 '13 at 10:29
i have seen it you have added the html content directly to the id .can we add the onclick to the buttons in the same way — anilgontla, May 06 '13 at 11:18

dynamically populate into navigation bar from javascript

1 Answers1

Dynamically populate navbar during the pagecreate or pagebeforecreate page venet.

Manually enhance dynamically added navbar items

Comments