<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div class="my-search-app">
<form action="/search">
<input type="text" name="q" /><input type="submit" value="search" />
</form>
<div class="my-search-results"></div>
<script type="text/javascript" src="my-search-app.js"></script>
</div>
</body>
</html>
// Closure
(function(window, document, $) {
$(document).ready(function() {
// Capture search form submit and transfor into AJAX request
$('form').submit(function() {
// AJAX Logic and stuff
fnResults = function(data) {
$('.my-search-results').html('Results ... ');
}
});
});
// End of closure
})(window, document, jQuery);
(function(window, document, $) {
// Generic bootstrap function for each
// instance of my-search-app
function init(node) {
// Prevent duplicated execution of
// the bootstrapping logic
if (node.isInitialized) {
return;
}
node.isInitialized = true;
// Store reference to the JQuery wrapped node.
var $node = $(node);
// Capture search form submit and transfor into AJAX request
$node.find('form').submit(function() {
// AJAX Logic and stuff
fnResults = function(data) {
$node.find('.my-search-results').html('Results ... ');
}
});
}
// When this code executes, trigger the
// bootstrapping if all instances
$(document).ready(function() {
$('.my-search-app').each(init);
});
})(window, document, jQuery);
<body>
<div id="my-header-wrapper">
<div id="my-search-box">
<div class="my-search-app">
<form action="/search">
<input type="text" name="q" /><input type="submit" value="search" />
</form>
<div class="my-search-results"></div>
</div>
</div>
</div>
<div id="my-full-page-search">
<div class="my-search-app">
<form action="/search">
<input type="text" name="q" /><input type="submit" value="search" />
</form>
<div class="my-search-results"></div>
</div>
</div>
<script type="text/javascript" src="my-search-app.js"></script>
</body>
<body>
<div id="my-search-form"></div>
.. more html ..
<script type="text/javascript">
// Lazy load the search box application
$(document).ready(function() {
$('#my-search-form').load('my-search-box.html');
});
</script>
</body>
<body>
<div class="my-lazy-app" data-src="my-search-box.html"></div>
<div class="my-lazy-app" data-src="login-app.html"></div>
<div class="my-lazy-app" data-src="contextual-navigation.html"></div>
<div class="my-lazy-app" data-src="user-profile.html"></div>
<div class="my-lazy-app" data-src="social-buttons.html"></div>
<script type="text/javascript">
$(document).ready(function() {
// Load all applications based on their
// declarative application src.
$('.my-lazy-app').each(function() {
$(this).load($(this).data('src'));
});
});
</script>
</body>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (1)
Author
Commented: