How to use jquery template js
/*****by Jiangong SUN*****/
Jquery template can help generate code in the same format. It's like repeater control in asp.net.
html div:
<head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> </head> <body> <div id="pages"> <div class="results-wrapper"> <ul class="pagination"></ul> </div> </div> </body>
JS template: Template
<script id="dealerTemplate" type="text/x-jquery-tmpl">
<li>
<span class="name">${Name}</span>
<span class="address">${Address}<br />${ZipCode} ${City}</span>
<span class="btn_fiche">
<a href="#" id="box_${index}">
<%=Labels[LABELS.FO_DEALERLOCATOR_DETAILS]%>
</a>
</span>
<span class="btn_select">
<a href="#" id="box_${index}_select">
<%=Labels[LABELS.FO_DEALERLOCATOR_SELECT]%>
</a>
</span>
</script>
AJAX usage:
function loadDealers(search, page, itemsByPage) {
var params = "{'page':'" + page + "', 'itemsByPage':'" + itemsByPage + "', 'searchString':'" + search + "'}";
var selectedPage = page;
$("ul.pagination").empty();
var loader = "<img src='" + globalVars.brandRootPath + "/styles/images/general/ajax-loader.gif' />";
$("ul.companies").html(loader);
$("span.results").text("");
ajaxCallDealers(params, function(data) {
var dealers = data.d.Dealers;
var count = data.d.Count;
var pagesNb = data.d.PagesNb;
var page = data.d.Page;
$("span.results").html(count + " " + globalVars.labels['FO_DEALERLOCATOR_RESULTCOUNT']);
datas = {}; // to remove previous markers
$.each(dealers, function(i, dealer) {
dealer.index = i;
datas[i] = {
dealerId: dealer.Id,
marker: { lat: dealer.Latitude, lng: dealer.Longitude },
infobox: {
name: dealer.Name, address: dealer.Address + '<br />' + dealer.ZipCode + ' ' + dealer.City,
tel: dealer.PhoneNumber, fax: dealer.FaxNumber, email: dealer.Email, services: [1], link: dealer.WebSite,
open: dealer.OpenHours,
select: { link: '', text: globalVars.labels['FO_DEALERLOCATOR_SELECT'], rel: 'box_' + i + '_select' }
}
};
});
$("ul.companies").empty();
$("#dealerTemplate").tmpl(dealers).appendTo("ul.companies");
$("ul.companies").fadeIn('slow');
//setLatLong();
SetMarkers();
var last = pagesNb - 1;
for (i = 0; i < pagesNb; i++) {
var activeClass = ((i == page) ? 'active' : ''); // add active class if current page
var lastClass = ((i == last) ? 'last' : ''); // add last class if last page
var currentClass = ((i == page) ? 'current' : ''); // add current class if current page
var pageNumber = i + 1;
var pageLink = '<li class="' + activeClass + ' ' + lastClass + '"><a class="' + currentClass + '">' + pageNumber + '</a></li>';
$("ul.pagination").append(pageLink);
}
$('div#pages ul.pagination a').each(function(index) {
$(this).click(function() {
var search = $('input#search-zipcode').val();
loadDealers(search, index, 2);
});
});
$('div#pages ul.pagination li').each(function(index) {
$(this).click(function() {
var search = $('input#search-zipcode').val();
loadDealers(search, index, 2);
});
})
});
}
ajax method:
function ajaxCallDealers(param, callback, errorHandler) {
var options = {
type: "POST",
url: globalVars.loadDealersUrl,
data: param || "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: callback,
error: errorHandler || function() { }
};
$.ajax(options);
}
Hope this can help ! Enjoy coding!