Content not updating in DOM

[Rahul_Murali]

I have added a div to show the current page in cuebcart search

 

	<div class="currentPage text-center">
		<div>Page {$page} of {$total}</div>
	</div>

$page and $total are already values present in the current cubecart search which is used for displaying and hiding the load more button which is working perfectly fine. But my page value does not change at stays constant even after loading more items (pages by clicking load more). Why is the it behaving like this , I have tried inspecting the network and html content returned has the updated page value in the html.  
Any help appreciated 

[Rahul_Murali]

I have a found alternative solution using JS to directly update innerHTML of the div during ("#ccScroll") onclick event. But I would still like to know why this happens or if I am doing something wrong.

[bsmither]

These {$var} entities are for Smarty, the template rendering engine, and are evaluated before the finished HTML is sent out of the web server.

Using the More button causes javascript (at the browser) to request, receive, and use only a specific portion of the next page, which gets appended to the end of the scrollable products area. This specific portion of the incoming HTML may have the page number somewhere in it, but it will not be tied to {$page}. That is, having added {$page} to a different template, or a new place in the content template, when Smarty replaces it with a actual number (at the server), that new number won't show if it is outside of the portion of the finished HTML that the javascript uses.