Setting text at jQuery Mobile dialog doesn't work

Question

I try to set a header and button texts dynamically via javascript. Unfortunattely it doesn't work as I thought. I added my text at jsfiddle to demonstrate the problem: http://jsfiddle.net/tMKD3/8/ .

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>

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

Has somebody an idea what I did wrong and why it doesn't works?

Thank you very much in advance for your help.

Greetings, Thomas

Jakub Malec · Accepted Answer · 2013-08-23 12:30:05Z

2

change

$("dialogHeader").text("Dialog");
$("dialogButton").text("Close");

and

$("buttonP1").text("Test");
$("buttonP2").text("Test");
$("buttonP3").text("Test");

to:

$("#dialogHeader").text("Dialog");
$("#dialogButton").text("Close");

and:

$("#buttonP1").text("Test");
$("#buttonP2").text("Test");
$("#buttonP3").text("Test");

edited Aug 23, 2013 at 12:30

answered Aug 23, 2013 at 12:14

Jakub Malec

1468 bronze badges

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

Collectives™ on Stack Overflow

Setting text at jQuery Mobile dialog doesn't work

1 Answer 1

change

to:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

change

to:

Comments

Your Answer

Sign up or log in

Post as a guest

Related