[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


jquery Dialog box with AJAX request on the page

Published on
4,830 Points
3 Endorsements
Last Modified:

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">
   <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">

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.


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">
     <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 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. 

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.

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Join & Write a Comment

The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Next Article:

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month