Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
How can this work as it does
9 views
Skip to first unread message
Tony
May 24, 2013, 4:44:10 AM5/24/13
to
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
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
Evertjan.
May 24, 2013, 5:09:15 AM5/24/13
to
Tony wrote on 24 mei 2013 in comp.lang.javascript:
> 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
> });
> }
This is about Jquery, why do you not programme in Javascript?
> 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
> });
> }
It is said there are NG's for Jquery, this is not one of them.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Message has been deleted
Christoph Becker
May 24, 2013, 8:29:53 AM5/24/13
to
Evertjan. wrote:
> Tony wrote on 24 mei 2013 in comp.lang.javascript:
>
>> 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
>> });
>> }
>
> This is about Jquery, why do you not programme in Javascript?
jQuery is a library that can be used with several ECMAScript
> Tony wrote on 24 mei 2013 in comp.lang.javascript:
>
>> 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
>> });
>> }
>
> This is about Jquery, why do you not programme in Javascript?
implementations, so programming in "Jquery" is programming in
"Javascript" (to stick with your wording), albeit mostly with a somewhat
unusual notation.
The code could have well been:
function Click_InsertLots()
{
//Create and display dialog dlgInsertLots
width:700
});
}
Then the question would arise what function dialog() does. If it is a
library function, this should be looked up in the library's documentation.
--
Christoph M. Becker
Tony Mountifield
May 24, 2013, 10:25:10 AM5/24/13
to
In article <knn912$659$1...@dont-email.me>,
So it would appear you are replacing the style "width:500px; display:none"
with the style "width:700". That overwrites the complete inline style, and
the replacement style doesn't include "display:none".
Cheers
Tony
--
Tony Mountifield
Work: to...@softins.co.uk - http://www.softins.co.uk
Play: to...@mountifield.org - http://tony.mountifield.org
Tony <tony.jo...@inport.com> wrote:
> 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.
When you use an inline style, that style is treated as a single entity.
> 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.
So it would appear you are replacing the style "width:500px; display:none"
with the style "width:700". That overwrites the complete inline style, and
the replacement style doesn't include "display:none".
Cheers
Tony
--
Tony Mountifield
Work: to...@softins.co.uk - http://www.softins.co.uk
Play: to...@mountifield.org - http://tony.mountifield.org
Christoph Becker
May 24, 2013, 11:21:09 AM5/24/13
to
of the element(s) to "block", no matter what's passed as parameter. See
<http://api.jqueryui.com/dialog/>.
--
Christoph M. Becker
JJ
May 24, 2013, 5:30:48 PM5/24/13
to
On Fri, 24 May 2013 10:44:10 +0200, Tony wrote:
> 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.
[snip]
> 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.
The fact that you hard coded the "dlgInsertLots" not to be displayed means
that it's not displayed by design. HTML tags are mandatory, but scripts are
not; and the "dlgInsertLots" is processed before the Click_InsertLots is
executed (otherwise, it'll be a script error).
JJ
May 24, 2013, 5:33:32 PM5/24/13
to
On Fri, 24 May 2013 12:55:40 +0100, Tim Streater wrote:
> In article <XnsA1CA7177...@194.109.133.133>,
You mean "Exactly. I get sick of seeing /jQuery/ shit in this ng." ?
> In article <XnsA1CA7177...@194.109.133.133>,
> "Evertjan." <exxjxw.h...@inter.nl.net> wrote:
>> Tony wrote on 24 mei 2013 in comp.lang.javascript:
>> This is about Jquery, why do you not programme in Javascript?
>>
>> It is said there are NG's for Jquery, this is not one of them.
>
> Exactly. I get sick of seeing jscript shit in this ng.
>> Tony wrote on 24 mei 2013 in comp.lang.javascript:
>> This is about Jquery, why do you not programme in Javascript?
>>
>> It is said there are NG's for Jquery, this is not one of them.
>
You mean "Exactly. I get sick of seeing /jQuery/ shit in this ng." ?
Message has been deleted
Denis McMahon
May 24, 2013, 6:13:11 PM5/24/13
to
On Fri, 24 May 2013 14:29:53 +0200, Christoph Becker wrote:
> jQuery is a library that can be used with several ECMAScript
> implementations, so programming in "Jquery" is programming in
> "Javascript"
> (to stick with your wording), albeit mostly with a somewhat unusual
> notation.
However, this is not a jquery users[1] forum, and anyone seeking support
> jQuery is a library that can be used with several ECMAScript
> implementations, so programming in "Jquery" is programming in
> "Javascript"
> (to stick with your wording), albeit mostly with a somewhat unusual
> notation.
for jquery issues is best directed to a forum where they will find jquery
users.
[1] If this was an advocacy group, would the correct spelling include an
l prefix?
--
Denis McMahon, denismf...@gmail.com
Christoph Becker
May 24, 2013, 6:56:07 PM5/24/13
to
Denis McMahon wrote:
> On Fri, 24 May 2013 14:29:53 +0200, Christoph Becker wrote:
>
>> jQuery is a library that can be used with several ECMAScript
>> implementations, so programming in "Jquery" is programming in
>> "Javascript"
>> (to stick with your wording), albeit mostly with a somewhat unusual
>> notation.
>
> However, this is not a jquery users[1] forum, and anyone seeking support
> for jquery issues is best directed to a forum where they will find jquery
> users.
ACK.
> On Fri, 24 May 2013 14:29:53 +0200, Christoph Becker wrote:
>
>> jQuery is a library that can be used with several ECMAScript
>> implementations, so programming in "Jquery" is programming in
>> "Javascript"
>> (to stick with your wording), albeit mostly with a somewhat unusual
>> notation.
>
> However, this is not a jquery users[1] forum, and anyone seeking support
> for jquery issues is best directed to a forum where they will find jquery
> users.
> [1] If this was an advocacy group, would the correct spelling include an
> l prefix?
--
0 new messages