Jquery UI Dialog problems

Jquery UI Dialog problems

Hi, thanks in advance for any advice. What I'm trying to do with this dialog box is to dynamically generate it each time a certain button is clicked. The dialog is supposed to populate with a list of items and actions.

This is the code I use to populate the dialog and open it
function openDialogBox(url, id1, id2, text){
          var ajaxOpts = {'id1': id1, 'id2': id2};
          jQuery('#dialogContainer').load('${AppPath}/populateDuplicateTasks.do', ajaxOpts,
                 function(){
                   var dialogOpts = {modal: true, buttons: {"Cancel": function(){jQuery(this).dialog("close");}, "Ok": function() { callAction(url, missionId, metId); }} };
                     jQuery('#dialog').dialog(dialogOpts);
                }
           );
    }


Here is the element in the original dom to be populated:
<div id="dialogContainer">Ahh</div>


Here is the jsp that is populated by ajax:
<%@ taglib prefix="c" uri="/WEB-INF/tld/c.tld" %>
<div id="dialog" title="Basic dialog"/>
<p>Below is a list of linked tasks for this:</p>
    <ul id="duplicateLinked">
        <c:set var="tasks" value="<%= session.getAttribute("duplicateTasks")%>"></c:set>
        <c:forEach items="tasks" var="task">
            <li>${task}</li>
        </c:forEach>
    </ul>
</div> 


When I run the request call by itself, I get a result that looks like I want it to. The problem is when I run the code nothing seems to happen. The request gets called, but nothing is populated and the dialog never appears.

Can anyone help me out please?