Search code examples
javascriptjquerycordovaonsen-uiphonegap

JQuery .html() not working

I'm using Onsen UI + JQuery and .html() function is not working, see: https://jsfiddle.net/w8904ztc/1/

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Clone</div>
    </ons-toolbar>

    <ons-tabbar swipeable position="auto">
      <ons-tab page="tab1.html" label="Home" icon="ion-home, material:md-home" active>
      </ons-tab>
      <ons-tab page="tab2.html" label="Settings" icon="md-settings">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <template id="tab1.html">
    <ons-page id="Tab1">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </template>

  <template id="tab2.html">
    <ons-page id="Tab2">
      <div class="center" id="usernamespan"></div>
      <p style="text-align: center;">
        <ons-button id="logout" name="logout" onclick="logout();">Logout</ons-button>
      </p>
    </ons-page>
  </template>
  <script type="text/javascript" src="cordova.js"></script>
  <script>
    function logout() {
      window.localStorage.clear();
      window.location.href = "index.html";
    }
    var username = localStorage.username;
    ons.notification.toast({
      message: 'Willkommen ' + username,
      timeout: 4000
    });

    $('usernamespan').html("Hallo Welt" + username);

  </script>
</body>

Also simple JavaScript is not working, tried already .getElementById()

window.document.getElementById("#usernamespan").innerHTML = "Something";

returns => Uncaught TypeError: Cannot set property 'innerHTML' of null

Any Ideas?

Solution

  • You need to specify the target ID as #IDOFDIV or if its a class .CLASSOFID. You also need to tell jquery to wait for the page to finish loading before it tries to find it and add html to it as it may not be on the page yet.

    This is done using the $(document).ready() call which is then passed a function with the code you would like to execute after the page has finished loading in.

      $(document).ready(function(){
   function logout() {
      window.localStorage.clear();
      window.location.href = "index.html";
    }
    var username = localStorage.username;
    ons.notification.toast({
      message: 'Willkommen ' + username,
      timeout: 4000
    });

    $('#usernamespan').html("Hallo Welt" + username);
  })