title: $.post().html().show not 'showing' a <div>
body: <p>G'Day All,</p>
  
  <p>I am trying to use the jQuery $.post function to pass some parameters to a PHP file which:</p>
  
  <ul>
  <li><p>Gathers flight booking info from a MySQL database,</p></li>
  <li><p>generates a HTML form with the data for display,</p></li>
  <li><p>return the HTML output into a hidden <code>&lt;div&gt;</code>,</p></li>
  <li><p>unhide the <code>&lt;div&gt;</code> so that it is over the top of the rest of the content of the page as a type of dialogue box.</p></li>
  </ul>
  
  <p>The issue is, if I have the <code>&lt;div id="bookingpop" style="display:none; ... "&gt;</code>, the .show() in the jquery line that works to insert and display the output of the php file does not show (unhide) the <code>&lt;div&gt;</code>. (??)</p>
  
  <p>As a test:</p>
  
  <ul>
  <li><p>if I take out the 'display:none;' style to always show the div (as is the state of the HTML code below), the output populates the element from the PHP via $.post works OK, but it is obviously always there (undesired).</p></li>
  <li><p>$("#bookingpop").hide() doesn't hide it if it is visible (again, as a test),</p></li>
  <li><p>The other things I've comented below the offending line (<code>alert(bid);</code> and <code>alert(output);</code>) both behave and display as expected if allowed to run.</p></li>
  <li><p>The date picker also works OK.</p></li>
  <li><p>having or not having the HTML remark between the open and closing tags of the #bookingpop <code>&lt;div&gt;</code> make no difference to the issue,</p></li>
  <li><p>IE8-9, FF10, Chrome, Safari on iPad 3, no difference other than IE interpreting the form field widths wider than the others.</p></li>
  </ul>
  
  <p>The JS/jQuery in the header:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function passbooking(bid) { // &lt;- bid is the Booking ID
          $.post("bookdisplay.php", { bookref: bid },
              function(output) {
                  $("#bookingpop").html(output).show();
                  // alert(bid);
                  // alert(output);
              });
      };
  
      /* Code for th jQuery-ui date picker. */
      $(function() {
          // $("#bookingpop").hide();
          $( "#pick_DATE" ).datepicker({
              changeMonth: true,
              changeYear: true,
              showOtherMonths: true,
              selectOtherMonths: true,
              dateFormat: "yy-m-d"
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML/PHP:</p>
  
  <pre><code>&lt;div style="position: absolute; top: 0px; left: 0px; height: 124px; width: 157px; border: none; margin: 0;"&gt;&lt;img alt="Logo" src="/act/images/avncol-logo.png" /&gt;
  &lt;/div&gt;
  &lt;div style="position:absolute; left: 157px; top:0px; width: 1000px; height: 64px; border: none;"&gt;
    &lt;h2&gt;Aviation College Townsville:  Daily Run Sheet&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div style="position: absolute; top: 65px; left: 157px; height: 64px; width: 1000px;"&gt;&lt;input type="text" id="pick_DATE" size="20" value="&lt;?php echo $date ?&gt;"/&gt;&lt;/div&gt;
  
  &lt;?php
  $booking_overlays = prepevents($date);
  // var_dump($booking_overlays);
  ?&gt;
  
  &lt;div class="parentDiv" style="top: 126px; left: 0px;"&gt;   &lt;!-- create a parent div section to contain and reference the timeline &lt;div&gt; elements to --&gt;
  &lt;?php
  print $timesheet; // Prints a grid/daily planner made from &lt;div&gt; elements
  print $booking_overlays; // Prints a event/bookings as time blocks over the planner (as &lt;div&gt;)
  ?&gt;
  &lt;/div&gt;  &lt;!-- Close the "parentDiv" --&gt;
  
  &lt;!-- This div is the one that  pops up over the others to display the booking --&gt;
  &lt;div id="bookingpop" style="position: absolute; z-index: 100; background-color:#FFF; left: 200px; top: 50px; width: 610px; height: 500px; border: 3px solid; margin: 0;"&gt;&lt;!-- the data goes in here --&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm new to JS/jQuery and am re-learning HTML (having not touched it since before CSS existed and JS was commonplace).
  If anyone can see anything out of place (or simply wrong), please let me know.</p>