Adding jQuery Mobile controls programmatically
Adding a new jQuery Mobile control can't be appended directly to the page. Every control with jQuery mobile has its own style that is loaded at create event which belongs to the control itself.
By appending the controls directly, create event page will not be fired, so we need to execute it.
Here you can find a full example that illustrates how to add a button to jQuery page.
<!DOCTYPE html>
<html>
<head>
<title>Load Control Dynamically</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
$('#addNewButton').live('click', function () {
$('#Container').append($('<input id="Button1" type="button" value="Custom button" />'));
$('#Container').trigger('create');
});
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="b">
<div data-role="header">
<h1>
Add New button
</h1>
</div>
<div data-role="content">
<a data-role="button" id="addNewButton">Add New button</a>
<div id="Container" />
</div>
</div>
</body>
</html>
In the above example jQuery trigger event is used, which executes create event that is related to the button. In this event jQuery Mobile framework implements the custom theme by adding the formatted divider which implements .fn.buttonMarkup jQuery Mobile plug-in. In addition, this event adds hidden input during submit.
Here you can find how the button rendered with and without create event:
Without using creat event:
With using creat event
Practice: Build User Control
Regarding to this point, I will create a practical example. In this example I built a navigation bar user control. If you have many pages with the same bar or any common HTML codes, then you can build your HTML user control in a separate file so you can call it from any page.
Here is the HTML file that contains the navigation bar:
UserCotrolToolBar.html
<div data-role="navbar">
<ul>
<li><a href="one.html" class="ui-btn-active">One</a></li>
<li><a href="two.html">Two</a></li>
</ul>
</div>
Then we can call it from the page as the following :
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">
var url = 'UserCotrolToolBar.html';
$(document).ready(function () {
$.get(url, function (retData) {
$('#Customfooter').append(retData);
$('#Customfooter').trigger('create');
}); });</script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="content">
<a href="Page2.html">Link</a>
</div>
<div id='Customfooter' data-role="footer">
</div>
</div>
</body>
</html>
Summary:
In this topic, I show you how to add jQuery mobile controls programmatically by using jQuery append then trigger create event.