Question

I have a “home” button in the headers with this “standard” code at many places:

<a href="#home" 
    data-role="button" 
    data-iconpos="right"
    data-icon="home" 
   class="ui-btn-right">
   home</a>

I want to render it from a single piece of javascript code since it appears many times in index.html – to decrease code redundancy and for easier changes. (I want to use jQuery so the cross browser functionality is ok)

The code bellow should 🙂 work, what am I doing wrong ?

(I tried to solve it from different angles, I can write out text, put out other html etc. – but I can not tackle data-* and standard html attr together)

THE CODE:

in index.html:

<div  data-role="header">
    <a data-myButton="headerHome> </a>
</div>

in main.js :

$( function () {    
    // put home button into the headers:        
    $("a[data-mybutton = 'headerHome']").( function () {
        $(this).href = "#home";             
        $(this).data("role","button");
        $(this).data("iconpos","right");
        $(this).data("icon","home");
        $(this).class("ui-btn-right");      
    })
})

I call main.js as a last js file in my index.html

Answer 1

In jQuery Mobile it is not enough just to set the attributes. Correct page event needs to be used, also .button( function needs to be called to restyle the button correctly, like this:

$('#index').live('pagebeforeshow',function(e,data){    
    $("a[data-mybutton = 'headerHome']")
        .attr("href","#home")
        .data("role","button")
        .data("iconpos","right")
        .data("icon","home")
        .attr("class","ui-btn-right");  
    $("a[data-mybutton = 'headerHome']").button();
});

Here’s a working example: http://jsfiddle.net/Gajotres/heSKu/