jQuery Forum

I'm trying to understand how to get one action to not happen until another action has complete. I looked up callbacks and chaining and experimented some, but I cannot figure out how to get this to work.

Specifically, I am dynamically creating a div and adding it to the page with .append(). This div holds tab tools for easyUI tabs, tiny buttons that get placed inside the tab. Then, I dynamically create the tab, pointing to the newly created div as the place for it to find its tools.

However, the lines aren't executing in the order written (I think). The tab doesn't find the new div containing its tools, so it doesn't add them. Conversely, if I create a tab and point to a static div that was there from page load, it can find that and use it correctly.

How do I make sure that my tab isn't added until the new div is created and added to the page?

1. var tabTools = "#tab-tools-" + uniqueID; //create the unique id for the tab tools
2. var tabToolsDiv = "<div id='" + tabTools + "'><a href='javascript:void(0);' class='icon-mini-popup' onclick='javascript:popTab(\"" + tabTitle + "\");'><\/a><\/div>";//create the tab tools div
   
3. $('#main-tab-tools').append(tabToolsDiv); //add the tab tools div to the page
   
4. $('#main-tab-bar').tabs('add',{ //add the new tab (with tools)
       title: tabTitle,           //tab title
       href: tabContent,      //url to load via ajax
       cache: true,             //cache the content so the tab doesn't reload every time selected
       iconCls: tabIcon,      //tab icon
       closable: tabClose,  //whether to show the close button on the tab
       tools: tabTools,        //which div holds its tools (popup icon)
       selected: true          //whether this tab should be selected after it is added
   });//end add the new tab

Thank you for any help you can give me!