Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19918

How can this work as it does

Show all headers | View raw

This code works as it should but there is one thing that
I don't fully understand.

In the html markup at the end I have this div
  <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
display:none">
...
which is not displayed because we have said display:none

Now to my question when I click on button with id= InsertLots this function 
Click_InsertLots is called.
function Click_InsertLots()
  {
      //Create and display dialog dlgInsertLots
      $("#dlgInsertLots").dialog({
          width:700
      });
  }

but this div with id=dlgInsertLots is displayed which is the behaviour that 
I want.
What I want to know is why is it displayed now but not when the html page 
was displayed the first time.
I don't want to change anything because it works perfect but I don't 
understand how it can work as it does.


<!DOCTYPE html>
<html>
    <head>
    <title>Voyage</title>

    <script type="text/javascript">
        //Global names


        // <summary>
        //    Sort array voyageArr in two different ways depending
        //    of the passed argument.
        //    Either ascending on vesselid,arrtime or
        //    ascending on vesselName
        // </summary>
        // <param name="sortOn">Tell the function how to sort</param>
        // <param name="voyageArr">The array that is to be sorted</param>

        // <summary>
        //    Display some of the fields in the array voyageArr in html 
select control
        // </summary>
        // <param name="voyageArr">The array that is to be displayed</param>
        function DisplayVessel(voyageArr)
        {
           for (var i = 0; i < voyageArr.length; i++)
           {
              $('#DDLVesselName').append($("<option value=" + 
voyageArr[i].Vesselid + "></option>").text(voyageArr[i].VesselName));
           }
        }

       // <summary>
       //    Event handler that is called when click the InsertLots button
       // </summary>
       function Click_InsertLots()
       {
           //Create and display dialog dlgInsertLots
           $("#dlgInsertLots").dialog({
               width:700
           });
       }


       //***********************************************************************************
       //This $(function) will be called as soon as the document has been 
thoroughly displayed
       //***********************************************************************************
       $(function ()  //wait until the DOM is complete
       {
           $("#InsertLots").click(Click_InsertLots);
       });

    </script>
</head>

<body>
   <div id="logo">
      <span class="headerDateTimeRight" id="mydateTime"></span>
       <img alt="" src="../Images/gotris.jpg" id="logoSize"  />
      <p>For better and smother shipping on götaälv</p>
   </div>

   <br />
    <ul id="nav">
        <li><a class="menuItem" 
href="ObstacleView.html">ObstacleView</a></li>
        <li><a class="menuItem" href="Schema.html">Schema</a></li>
        <li><a class="menuItem" href="Voyage.html">Voyage</a></li>
        <li class="right"><a class="logout" onclick="return LogOut()" 
href="Login.html">Log out</a></li>
    </ul>

   <br /><br />
   <div id="voyage">
      <h3 style ="text-align:center;">Voyage</h3>
       <select id="DDLVesselName">
          <option> Select a vessel</option>
       </select>

        &nbsp;
       <input id="InsertLots" type="button" value="Insert Lots" />
       &nbsp;
       <input id="NewVoyage" type="button" value="New Voyage" />
       <br /><br />
      <table id="myGrid">
         <thead>
            <tr>
               <th>ArrTime</th>
               <th>DepTime</th>
               <th>VesselID</th>
               <th>VesselName</th>
               <th>Port</th>
               <th>NextPort</th>
               <th>PreviousPort</th>
            </tr>
         </thead>
         <tbody>
         </tbody>
    </table>
   </div>

   <div id="dlgInsertLots" title="Insert Lots" style="width:500px; 
display:none">
   <br />
      <table>
        <tr>
           <th> Lots Station: </th>
           <th> Arrival date </th>
           <th> Departure date </th>
        </tr>

        <tr>
           <td>
              <select id="DDLLotsStn">
              </select>
           </td>

           <td>
              <div>
                 <input type="Text" id="dateArr" size="18"/>
                 <img src="images/cal.gif" alt="" 
onclick="javascript:NewCssCal('dateArr','yyyyMMdd','arrow',true,'24')" 
style="cursor:pointer"/>
              </div>
           </td>

           <td>
              <div>
                 <input type="Text" id="dateDep" size="18"/>
                 <img src="images/cal.gif" alt="" 
onclick="javascript:NewCssCal('dateDep','yyyyMMdd','arrow',true,'24')" 
style="cursor:pointer"/>
              </div>
           </td>
           <td> &nbsp; &nbsp; <input id="BtnSave" type="button" value="Save" 
/></td>
        </tr>
      </table>
   </div>
</body>
</html>

//Tony

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

How can this work as it does "Tony" <tony.johansson@inport.com> - 2013-05-24 10:44 +0200
  Re: How can this work as it does "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-05-24 11:09 +0200
    Re: How can this work as it does Tim Streater <timstreater@greenbee.net> - 2013-05-24 12:55 +0100
      Re: How can this work as it does JJ <duh@nah.meh> - 2013-05-25 04:33 +0700
        Re: How can this work as it does Tim Streater <timstreater@greenbee.net> - 2013-05-24 22:50 +0100
    Re: How can this work as it does Christoph Becker <cmbecker69@gmx.de> - 2013-05-24 14:29 +0200
      Re: How can this work as it does Denis McMahon <denismfmcmahon@gmail.com> - 2013-05-24 22:13 +0000
        Re: How can this work as it does Christoph Becker <cmbecker69@gmx.de> - 2013-05-25 00:56 +0200
  Re: How can this work as it does tony@mountifield.org (Tony Mountifield) - 2013-05-24 14:25 +0000
    Re: How can this work as it does Christoph Becker <cmbecker69@gmx.de> - 2013-05-24 17:21 +0200
  Re: How can this work as it does JJ <duh@nah.meh> - 2013-05-25 04:30 +0700

csiph-web