How can this work as it does
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>
<input id="InsertLots" type="button" value="Insert Lots" />
<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> <input id="BtnSave" type="button" value="Save"
/></td>
</tr>
</table>
</div>
</body>
</html>
//Tony