add 2 value to a div and then spliting? - html

Question

Not sure if this is the best way but, as can see below I am getting the current page and adding it to the div of "load_more" I then use this value in a function to + 1. however I now need another value added to this "total pages" and I am not sure where to add it do (another div). Can I add it to the div (the same one on click) also then slit out the results? in the load more click function?
Thanks
gets the value
$('.load_more').live("click", function(){ //When user clicks
var currentPage = parseInt($(this).attr('id'), 10);
++currentPage;
alert(currentPage);
dosomething(currentPage);
});
set the value
var currentPage = "";
var totalPages = ";"
$.each(r.MESSAGES, function(key, value){
currentPage += value.CURRENTPAGE;
totalPages += value.TOTALPAGES;
})
jQuery('.load_more').attr("id", currentPage);
html
<div id="load-more">
<a class="load_more" id="123" href="#">
Load More
</a>
</div>

Answer 1

Instead of adding DOM attributes to your class load_more it can be an idea using jQuery data storage. http://api.jquery.com/data/
Very simple to use: http://jsfiddle.net/j3bb5/
$('.load_more').data("current_page", 1); // Setting variable current_page;
alert( $('.load_more').data("current_page") ); // Getting variable current_page, alerts "1"
And you can store Objects as well: http://jsfiddle.net/j3bb5/1/
$('.load_more').data("current_page", { // Setting variable current_page;
id: 1,
name: "My page 1"
}); // Setting variable current_page;
alert( $('.load_more').data("current_page").id ); // Getting variable current_page, alerts "1"
alert( $('.load_more').data("current_page").name ); // Getting variable current_page, alerts "My page 1"
And now to your example: http://jsfiddle.net/j3bb5/4/
Don't know what variable r is but something like this?
var r = {
MESSAGES: [{
CURRENTPAGE: 1,
TOTALPAGES: 4
},{
CURRENTPAGE: 2,
TOTALPAGES: 4
}]
};
Function doSomething does nothing ;)
function doSomething(CURRENTPAGE, TOTALPAGES) {};
Setting the values from r.MESSAGES using jQuery.fn.data method
First we define our temporary CURRENTPAGE and TOTALPAGES variables
var CURRENTPAGE = 0, TOTALPAGES = 0;
Loops throw r.MESSAGES and updating CURRENTPAGE and TOTALPAGES
$.each(r.MESSAGES, function(key, value) {
CURRENTPAGE += value.CURRENTPAGE;
TOTALPAGES += value.TOTALPAGES;
});
Binds them to the selector .load_more
$('.load_more').data("CURRENTPAGE", CURRENTPAGE);
$('.load_more').data("TOTALPAGES", TOTALPAGES);
Click Event on .load_more
$('.load_more').live("click", function() {
Getting CURRENTPAGE and TOTALPAGES from data method:
var CURRENTPAGE = $(this).data("CURRENTPAGE");
var TOTALPAGES = $(this).data("TOTALPAGES");
Alerting the values:
alert("CURRENTPAGE: " + CURRENTPAGE);
alert("TOTALPAGES: " + TOTALPAGES);
And now increases the values by one: Note the double + sign before our variables. It means you add one to the value. Se a little deeper explanation: http://jsfiddle.net/j3bb5/6/
$(this).data("CURRENTPAGE", ++CURRENTPAGE);
$(this).data("TOTALPAGES", ++TOTALPAGES);
doSomething(CURRENTPAGE, TOTALPAGES);
});