Same widget code on page

Question

Hello,

I'm creating a widget using jQuery. It's a charting widget which communicates with the server (PHP) through ajax to update the chart.

My problem is that I need 2 of this widget on the same page without one overwriting the other. How can I encapsulate the javascript code without using the same code twice and without defining separate events for each chart control, update button, etc. ?

Answer 1

If you encapsulate your functionality into a class, then instantiate that class into two different variables, you should have all the separation you need.

var chart_one = new myChart(x,y,z);
var chart_two = new myChart(a,b,c);

chart_one.display();
chart_two.display();

This page contains a good tutorial on javascript classes.