jquery Dialog box with AJAX request on the page

Jeffrey Dake Senior Director of Technology
CERTIFIED EXPERT
Published:
PROBLEM:

The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working fine until I tried to add an ajax request to the page to bring in some data below my form field.  Essentailly my page looked like this.
 
<div class="wrapper">
                         <form>
                           <input>
                           <input>
                         </form>
                         <div id="ajaxId"></div>
                         <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front description" style="display: none;" tabindex="-1" role="dialog" aria-describedby="privateQuestionPopup" aria-labelledby="ui-id-1">
                      </div>

Open in new window

 For those of you who are used to using the jquery dialog function you will recognize the ui-dialog section div.   This is the html the jquery dialog function adds in for you automatically.  By default the jquery dialog automatically adds the html to the end of the html document.  It then leverages the jquery ui positioning function to relatviely position the element.  In my example I was positioning relaitve to my inputs.  See here for more information about positioning.  http://api.jqueryui.com/position/.  The jquery positioning worked perfectly.  The dialog was position:relative with a top:-999px to move it up to where it needed to be.  The problem then came when I added in content through an asynchronous(ajax) request into my "ajaxId" element.  Since the dialog box was already positioned with a negative top value, once more html was added into the ajaxId, the DOM was changed and the positioning value was no longer correct.  The position was still top:-999px, but the form input was actually -1100px away from the bottom of the page.  This resulted in my dialog no longer lining up with my form input.

SOLUTION:

After researching for awhile, I discovered a property in the jQuery UI dialog that is not talked about much.  The solution was to take advantage of the dialog appendTo property (http://api.jqueryui.com/dialog/#option-appendTo).  Since I knew that my ajax request would always be in the same spot, I was able to add a new div location for my jquery dialog box.
 
<div class="wrapper">
                         <form>
                           <div id="appendToTarget">
                                 <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front description" style="display: none;" tabindex="-1" role="dialog" aria-describedby="privateQuestionPopup" aria-labelledby="ui-id-1"></div>
                           </div>
                           <input>
                           <input>
                         </form>
                         <div id="ajaxId"></div>

Open in new window


I updated the property of the dialog to use the appendTo and pointed it at the "appendToTarget" div.  By doing this I know had changed the relative location of the dialog to be above the form input that I was using the postioning on.  Now, since the positioning was no longer relative to the bottom of the page the ajax request into my "ajaxId" no longer had any affect on the positiong of my dialog box.  This was an easy solution that I had a hard time finding anything about on the web. 

Conclusion:
If you are having trouble with relative positioning of a jquery dialog box, because an asynchrounous call is changing the positioning of the element, consider using the appendTo property to change where in the DOM the dialog is being positioned from.

 
3
2,596 Views
Jeffrey Dake Senior Director of Technology
CERTIFIED EXPERT

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.