Jquerymobile create button using javascript

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

Drew Gaynor · Accepted Answer · 2012-09-17 18:03:06Z

2

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

edited Sep 17, 2012 at 18:03

answered Sep 17, 2012 at 17:24

Drew Gaynor

8,4825 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

horin Over a year ago

where exactly should I put it? at the end of code (provided)? Because if yes it is stil not working.

horin Over a year ago

ty, I have udpated my code(whole code) as you can see in edit but it is not working, can you check it please?

horin Over a year ago

using whole code I have provided I can see text, but still no button.

Drew Gaynor Over a year ago

@horin: The issue is that you are calling trigger('create') before you've inserted the elements into the DOM. You should be able to change the line mainDiv.appendChild(div); into mainDiv.appendChild(div).trigger('create'); or just put $('mainDiv').trigger('create'); after it.

horin Over a year ago

ok, I have changed the code (as you can see in edit) and put $('mainDiv').trigger('create'); after it but it still isnt working.

Abdur Rehman · Accepted Answer · 2022-08-20 04:54:14Z

0

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

edited Aug 20, 2022 at 4:54

answered Aug 4, 2022 at 11:01

Abdur Rehman

14 bronze badges

Collectives™ on Stack Overflow

Jquerymobile create button using javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related