Multiple widgets in wordpress

Question

I have created a wordpress widget. It has a drop down in widget options. The dropdown contains "facebook" and "twitter". If admin selects "twitter", then twitter follower count is displayed inside the widget, similar case for facebook.

The count is displayed inside a div with id "social-count" using jquery. When page loads, jquery ajax will fetch the count and insert it into "social-count".

The problem is that it works fine for single instance. But if 2 instances are added to sidebar, the latest count is shown in both instances as i am using $('.social-count').html(count);

Now how can i assign count to corresponding widget areas using jquery?

Answer 1

Try to generate your div to have a value that makes clear what kind of content it loads, for example:

<div class='social-count' role='facebook'></div>
<div class='social-count' role='twitter'></div>

Then, via jQuery, change them by that value, for example:

$('.social-count[role="facebook"]').html(count);
$('.social-count[role="twitter"]').html(count);

Answer 2

You can create unique ID via instance of your widget such as by using the title of the widget.

Ex.

<div id='social-count-instance1'></div>     // instace1 should be replaced by widget title.

Then, via jQuery, change them by that class.

$('#social-count-instance1').html(count);

OR

You can address the social-count div by hierarchy of your DOM structure. There will be a specific class assigned to each of the widget you use by it's title attribute.

So you can use it like :

$(".social-count-widget #social-count").html(count); // .social-count-widget can be changed as per the title of widget.

OR

You can create separate div per instance and assign different classes to your div to have a value that makes clear what kind of content it loads, for example:

<div class='social-count social-count-facebook'></div>
<div class='social-count social-count-twitter'></div>

Then, via jQuery, change them by that class.

ex:

$('.social-count-facebook').html(count);
$('.social-count-twitter').html(count);