Panel buttons not styled.

Panel buttons not styled.

Hi,

I am having trouble with my buttons looking like simple anchors in my side panel. The panel markup is placed before the div 'data-role="header":

business.html

  1. <div id="infopanel" data-role="panel" data-position="right" data-display="overlay"
  2. data-theme="a">
  3. <!-- panel content goes here -->
  4. <h3 id="panel_heading"></h3>
  5. <p id="panel_description"></p>
  6.       <div data-role="controlgroup" data-type="horizontal">
  7.       <a href="#" data-role="button">Map</a>
  8.       <a href="#" data-role="button">Coupon</a>
  9.       <a href="#business_list_page" data-role="button" data-rel="close">Close Panel</a>
  10.       </div>
  11. </div>

I am creating the dynamic html in $(document).on(“pagecreate)... while looping over the list of categories:

business.js

  1.  /* Add event handlers in $(document).on(“pagecreate”)
  2. */
  3. $(".ui-listview li a").on("click", function() {
  4. $("#panel_heading").text($(this).data("Info").title);
  5. $("#panel_description").text($(this).data("Info").description);
  6. // Update the panel
  7. $("#infopanel").trigger("updatelayout");
  8. $("#infopanel").find("a").button(); // Added this in hopes it would force a refresh on the anchor buttons.
  9. });
  10. ....
  11. // Get all business objects that match the criteria. Occurs in a separate function.
  12. $.each(getBusinessObjects(businesses, "type", categoryName), function(index, business) {
  13.       $("#" + categoryName + "_list")
  14.       .append("<li><a id='" + categoryName + "_list_anchor" + index + "'" + "href='#infopanel' data-       role='button'>" + business.name + "</a></li>")
  15.       // Add pertinent data to the anchor tag
  16.       $("#" + categoryName + "_list_anchor" + index).data("Info", {
  17.       title: business.name,
  18.       description: "Debug test to see if this works!"
  19.       });
  20. });

I intend to add more data to the individual anchors in the listview to use in the panel.

It basically works fine. When I click on a listview item, the panel opens with the data attached to the anchor that I can use in the panel.

The trouble is the button group is not styled by Jquery but are only simple links.

Thanks in advance for any help.