1.  data-add-back-btn="true"

    in a dynamic header page with no success. I am loading the html page via jQuery like so (will shorten the codes a bit to show only the header stuff since its the only issue that I have.

1.     //js file
        loadHeader: function (page)
        {
            //$(page+" #m_header").load ("header.html");
   
            $.get ("header.html", function (d){
                $(page).prepend (d).trigger ("create");
            });      
        } 
   
       $(document).on ("pageinit", function (e){
            _wine.loadHeader ("#"+e.target.id); //code is shorted, _wine is defined just in case
            _wine.loadFooter ("#"+e.target.id);
        });
   
   
   
   
   
   
   
   
   
   
   
   
   
   

    and here are the html pages.

1.  //header.html page
   <div data-role="header" data-add-back-btn="true">
       <h2>Wine App</h2>
   </div>
   
   
   
   

1. //index.html page
         <div data-role="page" id="home" data-theme="a">
            <div data-role="main" class="ui-content">
              <ul data-role="listview" data-inset="true">
                 <li><a href="#cw" data-transition="slide">Test Wine</a></li>
              </ul>
            </div>
         </div>
   
         <div data-role="page" id="cw" data-theme="a">
            <div data-role="main" class="ui-content">
               text from test wine
            </div>
         </div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   can anyone spot the error as to why the button wont show? Also please keep in mind that I have just started playing around with jQuery Mobile two days ago since I started playing around with  phoneGap. I am not new to jQuery, but I am completely new to jQuery mobile (not sure if there is a big diff), so maybe I missed something in the documentation?.  Btw, I do get the styling correct in the header.. everything seems lagit, except for this darn back button that wont show lol