Question

I’m writing a jQuery plugin for a toolbar that has a few buttons in it. I need this toolbar to fadeIn on hover for each element it is called on, e.g. multiple item containers on the page all show the same toolbar when hovered.

This seems easy enough, but I need all the toolbars to be populated with one set of data based on the current user. If I just instantiate the plugin across all item containers, I’ll have to ajax in the data from the user database for each element on the page (could be 100’s).

I don’t want to ajax this data in each time I instantiate the plugin.

My question is where is the best place to store this data to be accessed by all toolbars, or am I thinking of this the wrong way? Should I make one global toolbar with the user data, save it to the DOM and move it to the hovered item? Or just ajax the data in when I need it by attaching it to the toolbar when a button has been clicked?

Edit:
Data I get back from database (bucket id’s to store item information):

{ 'bucket0' : '0', 'bucket1' : '1', 'bucket2' : '2' }

HTML for item page:

<div class="items-container">
    <div class="item" id="item0">
         <div class="item-toolbar" id="item-toolbar-item0">
              <ul class="item-action save">
                  <li id="0">bucket0</li>
                  <li id="1">bucket1></li>
                  <li id="2">bucket2></li>
              </ul>
         </div>
    </div>
    <div class="item" id="item1">
        <div class="item-toolbar" id="item-toolbar-item1">...</div>
    </div>
    <div class="item" id="item2">
        <div class="item-toolbar" id="item-toolbar-item2">...</div>
    </div>
</div>

Answer 1

If all items have the same parent, then you can just store the data on the parent using jQuery’s .data() like this:

// in some event handler context
var self = $(this);
var parent = self.parent();
var toolbar = parent.data("toolbar");
if (!toolbar) {
    // get data via ajax so you can create the toolbar
    // in the success handler, set the data with so other items can find it:
    // parent.data("toolbar", theToolbar);
}

FYI, I often prefer to use .closest(selector) rather than .parent() because it’s a little less brittle if the div structure gets modified with an extra level for formatting reasons. But, since you haven’t included the relevant HTML, I don’t know what selector would be used with .closest().