Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Twitter Sign In with OpenID Sign In with Google

Sign In Sign Up

Categories

In this Discussion

Tagged

Jo Home Page
GitHub Repo
Welcome to the Jo support forums! Please Sign Up and join in the discussion. You can also Sign In instantly with Twitter, OpenID or your Google ID.
Set innerHTML of Jo widget
  • kevinwalzerkevinwalzer January 2012
    Posts: 63

    I'm making progress on drawing and setting the text for an iOS-style icon badge in a joTabBar. I've done so by extending the class with this code:


    joTabBar = function() {
    joList.apply(this, arguments);
    };
    joTabBar.extend(joList, {
    tagName: "jotabbar",
    formatItem: function(data, index) {
    var o = document.createElement("jotab");
    if (data.type)
    o.className = data.type;

       if (data.badge)
                  o.innerHTML = "<div class='badge'>" + data.badge + "</div>";
                
    o.setAttribute("index", index);
                    
    return o;
    }
    });

    I can successfully create the badge with this type of sample code:

    menu = new joTabBar([
       {type : "search", badge: "badge"},
        {type : "whois"},
        {type : "about"}
        ])

    What I don't know how to do, however, is get or set  the text of the badge programmatically. This code doesn't work:

    console.log(joDOM.get(menu[0]).innerHTML);

    I get this error:

    TypeError: 'undefined' is not an object (evaluating 'joDOM.get(menu[0]).innerHTML')

    I suspect the methods are somewhere in joList, as joTabBar is a subclass of joList, but I'm not sure how to proceed from here. Advice is appreciated. Once I get this worked out, I'll post the CSS and complete code along with an example.




  • kevinwalzerkevinwalzer January 2012
    Posts: 63

    Looks like the way to go here is to tear down and rebuild the entire tab bar, like so: 


    menu.setData([{type : "search", badge: "updated""},
        {type : "whois"},
        {type : "about"}
        ]);
    menu.refresh();

    I'll post a sample soon. 
Add a Comment