Hello everyone!

My team and I are having an issue with the Cancel button not working in our jQuery Dialog.  When the user clicks the button, nothing happens.

All of our JSP files are based off a template.jsp that calls the jquery-1.4.4.min.js and jquery-ui-1.8.10.custom.min.js scripts.

On our main page, we have a button that we would like to click and call a javascript function (showHistory) that displays a modal dialog.  This modal dialog would display the history page from our site.  The code that we have follows:

1. <input type="button" onclick="showHistory();" value="Show History" />
   
2. <div id="historyDialog"></div>
   
3. <script>
   
4. function showHistory() {
5.      var ajaxDialog = $("#historyDialog").load("<%=request.getContextPath()%>/history.jsp");
6.      ajaxDialog.dialog({
7.            autoOpen: false, 
8.            title: 'This is my title', 
9.            modal:true, 
10.            buttons: 
11.            { 
12.                 Cancel: function(){
13.                     $(this).dialog('close');
14.                 }
15.            }
16.      });
17.      $('#historyDialog').dialog('open');
18. }
19. </script>
    

If we load the standard root server page, the Cancel button works correctly and closes the modal window.  It only seems to be when we try to load one of our sites' JSP files that the Cancel button doesn't work. 

We are wondering if it has something to do with the fact that both pages (our caller and the one being loaded) use the template page that loads the jQuery scripts.  Is the second page loading jQuery overwriting a callback?  If so, how can we implement this functionality to get it working correctly?  Any thoughts or guidance is greatly appreciated!