Number of total events displayed on the main page.

We are an event drivin site. Who knows how to display the total number of events in a text box on the main page?

Favorite

0 members favorited this

▶ Reply to This

Replies to This Discussion

NC for HirePermalink Reply by Elson Tan on November 13, 2012 at 6:10am

Hi Andrew , there are two ways of doing this:

1) Use jQuery .load() to load up the event page and get the total event number out , this approach is simple however it will slow down(a little) your site for loading up another page.

2) Using a much complicated technique which requires a server to store that information, first we obtain the currently existing event count , then add a function to add event button to increase that count , the count information will be stored in database of a server outside of Ning. Then when user loads the home page , a script will retrieve the count information from the server then display it out on home page textbox. Well I don't recommend this approach as it involves a lot of work but this one does not increase your site loadtime as much as first approach.

Assume that you want the total events (upcoming+past events) , so we need to get the data from

http://yournetwork/events/event/listAllTypes

So here is the FIRST approach code:

HTML: use this code so that the script can inject the count into the span(of course , put this in your textbox)

You can put content in front of it like :

Total Events: <span id="eventcount"></span>

Now the script(put this in custom code):

//coded by Elson Tan (@elsodev) elsodev.com
var ecount = '0';
if(x$('span#eventcount').length){

//event count span exists
x$('#xn_bar').before('<div id="ecountstore" style="display:none;width:0px;height:0px;"></div>');
//we load up that page and put the html into an invisible box
x$('#ecountstore').load('events/event/listAllTypes .xg_span-12 ul', function(){
x$('#ecountstore ul li a').remove();
x$('#ecountstore ul li').each(function(){
      var tempstore = x$(this).text();
      //we remove brackets from the each numbers
       var getecount = tempstore.replace(/$(.*?)$/g, '$1');
     //we add it up to obtain a total
       ecount = parseInt(parseFloat(ecount) + parseFloat(getecount));
});
//after each function done , we display out the total
x$('span#eventcount').html(ecount);
});
}
else{
}
</script>

There are a few things in the script that you may not understand:

var getecount = tempstore.replace(/$(.*?)$/g, '$1');

This is to remove the brackgets using regex , you can learn more about it here , its awesome for matching things

ecount = parseInt(parseFloat(ecount) + parseFloat(getecount));

This is adding up to get the total value , I used parseFloat to turn it into an floating point integer , this might be new to you. What it does is to make your integer able to undergo calculation properly. Normally if you don't use parseFloat , javascript will turn 2+1 into 21 , while using parseFloat 2+1 =3 . You can learn more about it here

That's it , hope it helps. I havent tested the code , just roughly coded , I hope it works.