I have tried to use 'chain.js' but it was too slow so I've adopted Pure.js, which is very fast.
I also use the nice tips of John which allows to hide
html parts.
Here is a sample on how I use Pure with JQuery
Here is the link for the lib:
http://beebole.com/pure
Thanks Mic Cvilic
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../Scripts/pure.js" type="text/javascript"></script>
<script src="../Scripts/Services.js" type="text/javascript"></script>
</head>
<body>
<button onclick="getProducts();">GetProducts</button>
<br />
<div id="productsList"></div>
<br />
<button onclick="decS();">prev 10</button><button onclick="incS();">next 10</button>
<!-- Scripts -->
<script type="text/html" id="productsListTemplate">
<table id="products" border="1"; width="400">
<thead>
<tr>
<th style="width:100;">ProductID</th>
<th>ProductName</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</script>
<script type="text/html" id="tableBodyTemplate">
<tr class="context">
<td class="ProductID"></td>
<td class="ProductName"></td>
</tr>
</script>
<script type="text/javascript" charset="utf-8">
var s = 0;
var t = 10;
var uriProducts = "ClientBin/DataService.axd/InfoCentreV01-Web-ProductService/GetProducts?";
var tableBodyTemplate = $("#tableBodyTemplate").html();
var prdtTemplate = $("#productsListTemplate").html();
$("#productsList").html(prdtTemplate);
function incS() {
s = s + 10;
getProducts()
}
function decS() {
if (s > 1) {
s = s - 10;
}
getProducts();
}
function getProducts() {
var uri = uriProducts + "s=" + s + "&t=" + 10;
$.getJSON(uri, function(products) {
var context = products.Results;
$("#tableBody").html('');
$("#tableBody").html(tableBodyTemplate);
$('#products').autoRender(context);
});
}
</script>
</body>
</html>
Hi Salvatore,
ReplyDeleteThank you very much for the post.
I didn't know the script tag trick to hide HTMLs, I'll use it for sure.
A pitty the src attribute doesn't work, this would have been a great way to dynamically load templates.
Do you mind adding a link to the web site of the lib? If some people are interested to know more about it
http://beebole.com/pure
Cheers,
Mic
This comment has been removed by a blog administrator.
ReplyDelete