Question

i am trying to create href using javascript which should have data-role=”button”. But the button is not showing. Here is my code.

var a = document.createElement("A");
a.appendChild(document.createTextNode("Skúsiť Znova"));
a.setAttribute("onClick","checkConnection();");
a.setAttribute("data-role","button");
a.setAttribute("data-inline","true");
a.setAttribute("data-corner","false");

I append this to div as child and I can see text and also onClick parameter is working great. But for some reason it isnt showing as button but as normaln href. Any suggestions on how to create jquerymobile button dynamicaly with JS? This is whole code:

$(document).ready(function(){
    var a = document.createElement("A");
    var div = document.createElement("div");
    var span = document.createElement("span");
    var p2 = document.createElement("p");
    var p = document.createElement("p");
    a.appendChild(document.createTextNode("Skúsiť Znova"));
    a.setAttribute("onClick","checkConnection();");
    a.setAttribute("data-role","button");
    a.setAttribute("data-inline","true");
    a.setAttribute("data-corner","false");
    div.setAttribute("id","alertMessage");
    span.appendChild(document.createTextNode("Pripojenie zlyhalo"));
    p2.setAttribute("style","text-align: center;");
    span.setAttribute("class","red");
    p.appendChild(span);
    p.appendChild(document.createTextNode(" (skontrolujte nastavenia siete)."));    
    div.appendChild(p);
    p2.appendChild(a);
    div.appendChild(p2);
    var mainDiv = document.getElementById("alert");
    mainDiv.appendChild(div);
    $('mainDiv').trigger('create');
    var toppos=($(window).height()/2) - ($("#alertMessage").height()/2);
    var leftpos=($(window).width()/2) - ($("#alertMessage").width()/2);
    $("#alertMessage").css("top", toppos).css("left",leftpos);
});

Answer 1

You can use trigger('create') to apply all of the jQuery Mobile formatting. Full working code:

HTML:

<div id="container"></div>

JavaScript:

var a = document.createElement("A");
a.appendChild(document.createTextNode("Skúsiť Znova"));
a.setAttribute("onClick","checkConnection();");
a.setAttribute("data-role","button");
a.setAttribute("data-inline","true");
a.setAttribute("data-corner","false");

$('#container').append(a).trigger('create');

This can be seen in action here: http://jsfiddle.net/sQ2dA/.

---

In response to your edits: the issue is that you have mainDiv in quotes, so you are passing a string on this line:

$('mainDiv').trigger('create');

But you should be passing the variable mainDiv:

$(mainDiv).trigger('create');

Please see the working example here: http://jsfiddle.net/P62Cp/.