Posted In: Java Script, jQuery

How to make html files in separate modules using jQuery

Use Case – Your application has multiple modules like Customer, Payment and Email. You want to build an UI for all these modules. One approach is to make a single large HTML files and load it or you could make separate HTML file for each module and load it one by one. This is better approach as single file will get too large once number of modules increases.

Technologies used

1. jQuery to load files
2. Bootstrap for rows, columns and hidden

Your index file will look like this

<div id="crmMainAcrdn" class="panel-group">

	<div id="crmMainDashbId">
		<div class="row">
			<div class="col-md-4">
				<div class="jumbotron">
					<h2>Total Active</h2>
					<h2>Customers</h2>
					<h1 id="totalCustDashbId">0</h1>
				</div>
			</div>
			<div class="col-md-4">
				<div class="jumbotron">
					<h2>New Customers</h2>
					<h2>Last 3 Months</h2>
					<h1 id="newCustDashbId">0</h1>
				</div>
			</div>
			<div class="col-md-4">
				<div class="jumbotron">
					<h2>Payments Due</h2>
					<h2>Month of <span id="pmntDueMonthDashbId"></span></h2>
					<h1 id="pmntDueDashbId">0</h1>
				</div>
			</div>
		</div>
	</div>

	<div id="crmMainCustomerId" class="hidden"></div>
	<div id="crmMainSmsId" class="hidden"></div>
	<div id="crmMainPymntId" class="hidden"></div>
	<div id="crmMainUserId" class="hidden"></div>
	<div id="crmMainClientId" class="hidden"></div>
</div>
<!-- //crmMainAcrdn ends -->
<script type="text/JavaScript">
	$("#crmMainCustomerId").load(crmBaseUrl + "/customer");
	$("#crmMainSmsId").load(crmBaseUrl + "/sms");
	$("#crmMainPymntId").load(crmBaseUrl + "/payment");
	$("#crmMainUserId").load(crmBaseUrl + "/user");
	$("#crmMainClientId").load(crmBaseUrl + "/client");
	loadCrmDashboard();
</script>

Once loaded you could hide and show content

$('#crmMainDashbId').addClass('hidden');
$('#crmMainDashbId').removeClass('hidden');

by , on April 1st, 2017

  • Categories