I am attempting to dynamically set the header and button texts using JavaScript, but unfortunately it's not working as expected. To demonstrate the issue, I have added my code on jsfiddle: http://jsfiddle.net/tMKD3/8/.
Here is the HTML code:
<body>
<div data-role="page" id="start" data-theme="e">
<div data-role="header" data-position="fixed" data-theme="e">
<h1 id="startHeader"></h1>
</div>
<div data-role="content">
<a href="#page" id="buttonP1" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
<a href="#page" id="buttonP2" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
<a href="#page" id="buttonP3" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
</div>
</div>
<!-- Dialog -->
<div data-role="dialog" id="dialog" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed" data-close-btn="none">
<h3 id="dialogHeader"></h3>
</div>
<div data-role="content" data-theme="e">
<a href="#start" type="button" data-role="button" id="dialogButton" data-rel="back"></a>
</div>
</div>
</body>
And here is the JS code:
$(document).ready(function(){
// set button text
$("buttonP1").text("Test");
$("buttonP2").text("Test");
$("buttonP3").text("Test");
}
function setup() {
// set dialog header text
$("dialogHeader").text("Dialog");
$("dialogButton").text("Close");
$.mobile.changePage('#dialog', {
transition: 'pop',
role: 'dialog'
});
return false;
}
Can anyone provide insight into what I might be doing wrong and why it's not working?
Thank you in advance for any help provided.
Sincerely, Thomas