Jquery dialog window not rendering correctly

When I include my jquery dialog div on my page, the html markup of the dialog renders at the bottom of the page instead of being hidden until the user triggers the open event. Also, the remain开发者_运维问答ing parts of my page do not load.

Here is the code of my dialog div:

    <div id="photoAdd_dialog" title="Upload Photos">
    <form name="photoInfo_form" action="" method="post" id="photoInfo_form">
       ...html markup for several input fields...
     </form>
   </div>

   <script type="text/javascript">
   $(document).ready(function(){
 $("#photoAdd_dialog").dialog(
               {autoOpen: false,
                   width: 400,
                   resizable: false,
                   modal: true}
 );
 //end of the dialog setting
 $("#reminder").css("display","none");

 });
//end of preload
    .... form validation javascript here
 </script>

What I've done:

• Made sure the jquery css and js files are up to date and pointing to the right location

• Included a different jquery dialog on this page and it worked perfectly fine..i.e. was hidden till user clicks a link to trigger the dialog.

Totally stuck on this. Appreciate any help! Thanks.

I assume you are using jQuery UI for the dialog? Is the JS file linked properly?

Secondly, if your page is not loading AT ALL you probably have an error being thrown. Use Chrome Dev Tools or Firebug to see the JS console output.

Where are you triggering the Dialog to open?

All you need to initialize the dialog is:

//Auto opens by default
$("#photoAdd_dialog").dialog()

//To open the dialog
$("#photoAdd_dialog").dialog('open')

//To close the dialog
$("#photoAdd_dialog").dialog('close')

jQuery should hide the dialog once initialized, therefore you don't need that CSS manipulation.

All in all, I would do this:

//link to JS files here

<script type="text/javascript">
    $(document).ready(function(){
        $("#photoAdd_dialog").dialog(
        {
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true,
            title: "Upload Photos",
        });
    });
</script>

<script type="text/javascript">
    $(".opener").onClick(function(e){
        //stops the click from changing the page and whatever other default action would happen.
        e.preventDefault();
        $("#photoAdd_dialog").dialog('open');
    });

    $(".closer").onClick(function(e){
        //stops the click from changing the page and whatever other default action would happen.
        e.preventDefault();
        $("#photoAdd_dialog").dialog('close');
    });
</script>

//end of head and start of body

<div id="photoAdd_dialog">
    ...html markup for several input fields...
</div>

//I prefer classes, since IDs tie up namespace.  Not totally relevant for a small JS application though.
<a href="#" class="opener">Open Photo Add Dialog</a>

<a href="#" class="closer">Close Photo Add Dialog</a>

Make sure to checkout the jQuery UI demo pages: http://jqueryui.com/demos/dialog/#modal

Happy coding!

Should

$("#reminder").css("display","none"); 

really be

$("#photoAdd_dialog").css("display","none");

Or ...

What if you just put style="display: none;" inline and not worry about changing with jQuery, since that's the default you want anyway?

Assuming that you are using jQuery UI then there is a great helper css class built in just modify your div to this:

<div id="photoAdd_dialog" title="Upload Photos" class="ui-helper-hidden">

ALl this does is apply the display:none through a class in the css. This is nice since it keeps out inline style statements, though many feel that style="display:none;" is okay, it depends on who you talk to.

Ok, I found the offending piece of code. Turns out nothing to do w/ JS/jquery. Inside my dialog window I had this code that was retrieving data for my input field. I had this code commented out. Once I removed this, the dialog window works perfectly. Still don't know why this would cause the issue, but here is the code:

               <!-- <?php $em=getAllEm();?> 
<?php foreach($em as $e):?>
    <option value="<?=$e[0]?>"><?php echo $e[1];?></option>
<?php endforeach;?> -->

I appreciate everyone's help!