Change text of element in Kendo Mobile Layout header

Question

I have a mobile application similar to that of the Telerik demo found at: http://demos.telerik.com/kendo-ui/mobile-layout/index

In my application however I have a div and need to alter the text within it when the online or offline events fire. If I use JQuery to select the div the text is only changed the first time one of the events fire. If either event fires again the text does not change. (I have confirmed that the code for each event fires every time its just that the text isn't updated after the first change).

Can anyone tell me why the update does not occur each time?

Answer 1

Assuming that you have the online / offline button defined as:

<a data-align="right" data-role="button" class="nav-button" href="#/">Online</a>

What I suggest is play with the text of the button using a simple jQuery text call.

First provide an id to the button so you can easily find it:

<a id="status" data-align="right" data-role="button" class="nav-button" href="#/">Online</a>

Then turn it offline would be:

$("#status").text("Offline");

Check it here: http://dojo.telerik.com/@OnaBai/IFezi/2

You might also create two buttons one for online another for offline

<a id="ob-online" data-align="right" data-role="button" class="nav-button" href="#/">online</a>
<a id="ob-offline" data-align="right" data-role="button" class="nav-button" href="#/">offline</a>

and show only one using CSS as follow:

// turn it online
$("#ob-offline").css({ display: "none" });
$("#ob-online").css({ display: "inline" });
// turn it offline
$("#ob-online").css({ display: "none" });
$("#ob-offline").css({ display: "inline" });

Check it here: http://dojo.telerik.com/@OnaBai/IFezi/3