CODEWITHSUNDEEP
javascriptbuttonjquery-mobile
horin
horin

Reputation: 1662

Jquerymobile create button using javascript

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);
});

Upvotes: 1

Views: 1689

Answers (2)

Abdur Rehman
Abdur Rehman

Reputation: 1

var a = document.createElement("button");
a.innerText = "Submit";
a.id = "addition";
document.body.appendChild(a);

Upvotes: 0

Drew Gaynor
Drew Gaynor

Reputation: 8472

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/.

Upvotes: 2

Related Questions