Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

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);
share|improve this answer
add comment

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);
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.