The on_page_loaded event is the first event triggered by an application on the client.
The new project uses on_page_loaded event handler to dynamically build the application’s main menu and attach the on click event handler to menu items using JQuery.
function on_page_loaded(task) {
$("title").text(task.item_caption);
$("#title").text(task.item_caption);
if (task.safe_mode) {
$("#user-info").text(task.user_info.role_name + ' ' + task.user_info.user_name);
$('#log-out')
.show()
.click(function(e) {
e.preventDefault();
task.logout();
});
}
if (task.full_width) {
$('#container').removeClass('container').addClass('container-fluid');
}
$('#container').show();
task.create_menu($("#menu"), $("#content"), {view_first: true});
}
This event handler uses JQuery to select elements from the index.html to set their attributes and assign events.
<div id="container" class="container" style="display: none">
<div class="row-fluid">
<div class="span6">
<h3 id="title" class="muted"></h3>
</div>
<div class="span6 logging-info">
<span id="user-info"></span>
<a id="log-out" href="#" style="display: none">Log out</a>
</div>
</div>
<div class="container">
<div id="taskmenu" class="navbar">
<div class="navbar-inner">
<ul id="menu" class="nav">
</ul>
</div>
</div>
</div>
<div id="content">
</div>
</div>
Finally, the create_menu method of the task is called to dynamically create the main project menu.