Search jQuery

jQuery Forum

[jQuery] Enable / disable submit button not working

in Using jQuery • 14 years ago

I can't figure out why this simple isn't working. I've tried a number of
variations. I've tried examining the vars with debugging output.
I have a bunch of forms on the page, each one having just one text input and
a submit button. When the user types in any of the forms I want to make sure
the text field is not empty (i.e., they haven't just cleared the field) and
enable the submit button accordingly.
However, the state of the submit button does not change. I've verified that
the script is getting called. I also tried $("input") instead of $("form").
Is there some error here that I'm missing.
I've tried using either line 3 (now commented) and line 4, below.
$(document).ready(function(){
$("form").keyup(function(event){
//var activeForm = $(event.target).parents('form');
var activeForm = this.form;
if ($(event.target).fieldValue()[0].length > 0)
{
$('input[@type=submit]', activeForm).attr("disabled",
false).removeClass('formfielddisabled');
} else {
$('input[@type=submit]', activeForm).attr("disabled",
true).addClass('formfielddisabled');
}
});
});
--
View this message in context: http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742
Sent from the JQuery mailing list archive at Nabble.com.

Replies(40)

benjamin...

Re: [jQuery] Enable / disable submit button not working

14 years ago

jarrod,
I personally have never formated my code like $(event.target).fieldValue()[0], but what happens when you do $(event.target).val().length?
Also, I believe you can get away $('input[@type=submit]', activeForm).disabled = true; because I believe $('input[@type=submit]', activeForm).attr("disabled",false) does not work properly in IE6, I could be wrong on that tho.
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">jarrod</b> <<a href="mailto:elektrophyte@yahoo.com">elektrophyte@yahoo.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I can't figure out why this simple isn't working. I've tried a number of
variations. I've tried examining the vars with debugging output.
I have a bunch of forms on the page, each one having just one text input and
a submit button. When the user types in any of the forms I want to make sure
the text field is not empty (i.e., they haven't just cleared the field) and
enable the submit button accordingly.
However, the state of the submit button does not change. I've verified that
the script is getting called. I also tried $("input") instead of $("form").
Is there some error here that I'm missing.
I've tried using either line 3 (now commented) and line 4, below.
$(document).ready(function(){
    $("form").keyup(function(event){
        //var activeForm = $(event.target).parents('form');
        var activeForm = this.form;
        if ($(event.target
).fieldValue()[0].length > 0)
        {
            $('input[@type=submit]', activeForm).attr("disabled",
false).removeClass('formfielddisabled');
        } else {
            $('input[@type=submit]', activeForm).attr("disabled",
true).addClass('formfielddisabled');
        }
    });
});
--
View this message in context: <a href="http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742">
http://www.nabble.com/Enable---disable-submit-button-not-working-tf4133072s15494.html#a11754742</a>
Sent from the JQuery mailing list archive at <a href="http://Nabble.com">Nabble.com</a>.
</blockquote></div>
<br clear="all">
--
Benjamin Sterling
<a href="http://www.KenzoMedia.com">http://www.KenzoMedia.com</a>
<a href="http://www.KenzoHosting.com">http://www.KenzoHosting.com</a>

elektroph..

Re: [jQuery] Enable / disable submit button not working

14 years ago

bmsterling

malsup

Re: [jQuery] Enable / disable submit button not working

14 years ago

jarrod,
Now that I know what you're trying to do I would suggest something like this:
$('form').submit(function() {
var val = $('input[@type=text]', this).val();
if (val == null)
alert('Please enter a value');
return val != null;
});
Mike

elektroph..

Re: [jQuery] Enable / disable submit button not working

14 years ago

malsup

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch

malsup

Re: [jQuery] Enable / disable submit button not working

14 years ago

> Regarding the solution above, that's a different style of validation that
> works great in some situations, but for this app I really want to pursue the
> concept of not enabling the submit button until the form is valid.
Yes, I didn't mean to imply you should change "how" you're validating
the form. I should have written it like this:
$('form').submit(function() {
var val = $('input[@type=text]', this).val();
// insert validation handling here!
return val != null;
});
Cheers!
Mike

aaron.hei..

Re: [jQuery] Enable / disable submit button not working

14 years ago

jQuery.fn.toggleVis = function() {
    // Here, "this" is the jQuery object
    // This return statement is used for two reasons
    //   1. To make sure we hit every HTML element in the jQuery object
    //   2. To make sure that this method doesn't "break the chain"
    return this.each(function() {
        // Iterate over all selected HTML elements and toggle their "visibility" CSS property
        // Here, "this" a HTML element
        if(this.style.visibility == 'hidden') {
            this.style.visibility = 'visible';
        } else {
            this.style.visibility
= 'hidden';
        }
    });
};
Usage: $('mySelector').toggleVis();
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">
mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch
</blockquote>
</div>
<br clear="all">
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>

rob.desbo..

Re: [jQuery] Enable / disable submit button not working

14 years ago

For information, the reason that works is that setting {visibility:hidden} hides the element but the element's box still affects layout.
Setting {display:none} suppresses box generation altogether.
(From <a href="http://www.w3.org/TR/REC-CSS2/visufx.html#visibility">
http://www.w3.org/TR/REC-CSS2/visufx.html#visibility</a>)
--rob
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Aaron Heimlich</b> <<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com
</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">jQuery.fn.toggleVis = function() {
    // Here, "this" is the jQuery object
    // This return statement is used for two reasons
    //   1. To make sure we hit every HTML element in the jQuery object
    //   2. To make sure that this method doesn't "break the chain"
    return this.each(function() {
        // Iterate over all selected HTML elements and toggle their "visibility" CSS property
        // Here, "this" a HTML element
        if(this.style.visibility == 'hidden') {
            this.style.visibility = 'visible';
        } else {
            this.style.visibility
= 'hidden';
        }
    });
};
Usage: $('mySelector').toggleVis();<div><span class="e" id="q_113f5be5e028f85d_1">
<div><span class="gmail_quote">On 7/23/07, <b class="gmail_sendername">
Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I like jQuery effects show and hide but they actually remove the object from the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects "visibility" property between "hidden" and "visible" so any HTML under it will not move.
Mitch
</blockquote>
</div>
<br clear="all">
</span></div><span class="sg">--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">aaron.heimlich@gmail.com
</a>
<a href="http://aheimlich.freepgs.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://aheimlich.freepgs.com</a>
</span></blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I get everything but this</span><span style='font-size:10.0pt;
font-family:"Courier New"'> <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>//
This return statement is used for two reasons
// 1. To make sure we hit every HTML element in
the jQuery object
// 2. To make sure that this method doesn't
"break the chain"
</span><span style='font-size:9.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>What does “hit” mean and what is the “chain”? I don’t want “everything
to become invisible, just the one container I specify. Wont th is work just
fine?<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>jQuery.fn.toggleVis
= function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:8.0pt;font-family:"Courier New"'>
        if(this.style.visibility ==
'hidden') {

this.style.visibility = 'visible';
        } else {

this.style.visibility = 'hidden';
        }
};
<span style='color:#1F497D'><o:p></o:p></span></span>

<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Monday, July 23, 2007 6:01 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
<p class=MsoNormal><o:p> </o:p>

<p class=MsoNormal style='margin-bottom:12.0pt'>jQuery.fn.toggleVis =
function() {
    // Here, "this" is the jQuery object
    // This return statement is used for two reasons
    //   1. To make sure we hit every HTML element in
the jQuery object
    //   2. To make sure that this method doesn't
"break the chain"
    return this.each(function() {
        // Iterate over all selected HTML
elements and toggle their "visibility" CSS property
        // Here, "this" a HTML
element
        if(this.style.visibility ==
'hidden') {
            this.style.visibility
= 'visible';
        } else {

this.style.visibility = 'hidden';
        }
    });
};
Usage: $('mySelector').toggleVis();<o:p></o:p>

<div>
<p class=MsoNormal><span class=gmailquote>On 7/23/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com"> mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>

<p class=MsoNormal style='margin-bottom:12.0pt'>
I like jQuery effects show and hide but they actually remove the object from
the screen. So an <H1> under an image will move up.
Can someone show me the best way to change (toggle) an objects
"visibility" property between "hidden" and
"visible" so any HTML under it will not move.
Mitch
<o:p></o:p>

</div>
<p class=MsoNormal>
<br clear=all>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a> <o:p></o:p>

</div>
</body>
</html>

aaron.hei..

Re: [jQuery] Enable / disable submit button not working

14 years ago

<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">mitch@mitchwaite.com
</a>> wrote:</span>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div><span></span>

</div></div></blockquote>A jQuery object is an pseudo-array[1] that contains all of the HTML elements selected by a give selector. So
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have the class "foo". By "hit", I mean that toggleVis() will toggle each and every one of the elements selected whatever selector you use (that's usually what you want).
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US">
<div>

<span style="font-size: 11pt; color: rgb(31, 73, 125);"> and what is the "chain"?</span>

</div></div></blockquote><div>
See <a href="http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29">
http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29</a>
</div>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>

<span style="font-size: 11pt; color: rgb(31, 73, 125);"> I don't want "everything
to become invisible, just the one container I specify.</span>

</div></div></blockquote><div>
That's exactly what my plugin does. Only the element's selected by the selector that you use will be affected.
</div>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>

<span style="font-size: 8pt;">jQuery.fn.toggleVis
= function() {</span>

<span style="font-size: 8pt;"><span>
        if(this.style.visibility ==
'hidden') {

this.style.visibility = 'visible';
        } else {

this.style.visibility = 'hidden';
        }
</span>
};</span>

</div></div></blockquote><div>No it won't. In that context, "this" refers to a jQuery object, which does not have a "style" property. To iterate over the contents of a jQuery object, use the "each" method[2], as plugin does. The "each" method accepts a function, and within that function "this" is set to whatever element is currently being iterated over. The "each" method returns the jQuery object it was iterating over, which allows users to continue chaining method calls onto each other.
The concept of "this" is certainly one of the more confusion aspects of jQuery (and of JavaScript in general). For now, I direct you to <a href="http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27">
http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27</a>, although there was a post by Michael Geary some time ago[3] that explained this concept very well (as he always does).
[1] It's not an actual instance of JavaScript's Array class, but it acts enough like one that it can be used mostly in the same fashion. You can iterate over it like an Array object, and you can access indexes (foo[0], foo[1], foo[2], etc.) like you can with an Array object, but that's about it.
</div></div>[2] <a href="http://docs.jquery.com/Core#each.28_fn_.29">http://docs.jquery.com/Core#each.28_fn_.29</a>
[3] I believe this is it: <a href="http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32">
http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32</a>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://aheimlich.freepgs.com
</a>

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I don’t think you understand my question.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I have a link called ‘Change the cats visibility’. I have a div
with a cat image inside it. I would like that particular link to change the visibility
of that particular image inside a div.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I want to be able to give the link an ID and the routine to
toggle the visibility a function in jQuery. <o:p></o:p></span>

<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Tuesday, July 24, 2007 10:40 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
<p class=MsoNormal><o:p> </o:p>

<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com" target="_blank">mitch@mitchwaite.com </a>>
wrote:</span> <o:p></o:p>

</div>
</div>
<p class=MsoNormal style='margin-bottom:12.0pt'>A jQuery object is an
pseudo-array[1] that contains all of the HTML elements selected by a give
selector. So
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have
the class "foo". By "hit", I mean that toggleVis() will
toggle each and every one of the elements selected whatever selector you use
(that's usually what you want). <o:p></o:p>

<span style='font-size:11.0pt;color:#1F497D'>and what is the
"chain"?</span><o:p></o:p>

</div>
</div>
<div>
<p class=MsoNormal>
See <a
href="http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29">http://docs.jquery.com/How_jQuery_Works#Chainability_.28The_Magic_of_jQuery.29</a><o:p></o:p>

</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<p class=MsoNormal><o:p> </o:p>

<span style='font-size:11.0pt;color:#1F497D'>I don't want "everything
to become invisible, just the one container I specify.</span><o:p></o:p>

</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>
That's exactly what my plugin does. Only the element's selected by the selector
that you use will be affected.<o:p></o:p>

</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<p class=MsoNormal><o:p> </o:p>

<span style='font-size:8.0pt'>jQuery.fn.toggleVis = function() {</span><o:p></o:p>

<span style='font-size:8.0pt'>
        if(this.style.visibility ==
'hidden') {

this.style.visibility = 'visible';
        } else {

this.style.visibility = 'hidden';
        }
};</span><o:p></o:p>

</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>No it won't. In that context, "this" refers to a
jQuery object, which does not have a "style" property. To iterate
over the contents of a jQuery object, use the "each" method[2], as
plugin does. The "each" method accepts a function, and within that
function "this" is set to whatever element is currently being
iterated over. The "each" method returns the jQuery object it was
iterating over, which allows users to continue chaining method calls onto each
other.
The concept of "this" is certainly one of the more confusion aspects
of jQuery (and of JavaScript in general). For now, I direct you to <a
href="http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27">http://docs.jquery.com/How_jQuery_Works#Callbacks.2C_Functions.2C_and_.27this.27</a>,
although there was a post by Michael Geary some time ago[3] that explained this
concept very well (as he always does).
[1] It's not an actual instance of JavaScript's Array class, but it acts enough
like one that it can be used mostly in the same fashion. You can iterate over
it like an Array object, and you can access indexes (foo[0], foo[1], foo[2],
etc.) like you can with an Array object, but that's about it. <o:p></o:p>

</div>
</div>
<p class=MsoNormal>[2] <a href="http://docs.jquery.com/Core#each.28_fn_.29">http://docs.jquery.com/Core#each.28_fn_.29</a>
[3] I believe this is it: <a
href="http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32">http://groups.google.com/group/jquery-en/browse_thread/thread/d670a83c308961d3/92e29565dff28d32#92e29565dff28d32</a>
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com" target="_blank">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com" target="_blank">http://aheimlich.freepgs.com
</a><o:p></o:p>

</div>
</body>
</html>

aaron.hei..

Re: [jQuery] Enable / disable submit button not working

14 years ago

Well you should have mentioned that in the beginning. But, that doesn't mean that my plugin isn't usable.
On 7/24/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">
mitch@mitchwaite.com</a>> wrote:
<div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>

<span style="font-size: 11pt; color: rgb(31, 73, 125);">I have a link called 'Change the cats visibility'. I have a div
with a cat image inside it. I would like that particular link to change the visibility
of that particular image inside a div.</span>

<span style="font-size: 11pt; color: rgb(31, 73, 125);">I want to be able to give the link an ID and the routine to
toggle the visibility a function in jQuery. </span>

</div></div></blockquote></div>
Using my original plugin:
Note: You will have to edit the selectors to actually find the proper elements, as I have no knowledge of your page's structure
// Find the "Change the cats visibility" link and assign a "click" event handler to it
$("a.changeVis").click(function() {
// Find the div that has the cat image in it and toggle the image's visibility
$("#catDiv img").toggleVis();
});
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My apology for the confusion. I should have just posted the darn
code. I’ll remember this in the future. <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I had one typo, left out the # for the container, then it worked
fine. <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I think it’s a good demo but I still don’t think I need all the
for ‘each’ stuff however.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><title>CSS, DHTML & Ajax | Making Objects Appear
and Disappear | Changing Visibility Style</title><o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>jQuery.fn.toggleVis = function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Here, "this" is the jQuery object <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // This return statement is used for two reasons<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // 1. To make sure we hit every HTML element in the jQuery
object<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // 2. To make sure that this method doesn't "break
the chain"<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> return this.each(function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Iterate over all selected HTML elements and toggle
their "visibility" CSS property <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> // Here, "this" a HTML element<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> if(this.style.visibility == 'hidden') {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> this.style.visibility = 'visible';<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> this.style.visibility = 'hidden';<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>/* testing mouse events in jQuery */ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").show(); <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#hidecat').click(function(){ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").hide(); <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#showcat').click(function(){ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#cheshireCat").show(); <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> /* toggle visibility */ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#toggle').click(function(){ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $('#cheshireCat').toggleVis();<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> font-family: Georgia, "Times New
Roman", times, serif;<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> color: #000000;<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> background-color: #ccc;<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> margin: 8px;<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>#cheshireCat {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> margin: 8px;<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a id="toggle"
href="#Javascript;">Change the Cat's Visibility</a><o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><h1>The Cheshire Cat</h1><o:p></o:p></span>

<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Tuesday, July 24, 2007 11:08 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
</div>
<p class=MsoNormal><o:p> </o:p>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I don’t think you understand my question.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I have a link called ‘Change the cats visibility’. I have a div
with a cat image inside it. I would like that particular link to change the
visibility of that particular image inside a div.<o:p></o:p></span>

<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Aaron
Heimlich
<b>Sent:</b> Tuesday, July 24, 2007 10:40 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
<p class=MsoNormal><o:p> </o:p>

<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com" target="_blank">mitch@mitchwaite.com </a>>
wrote:</span> <o:p></o:p>

</div>
</div>
<p class=MsoNormal style='margin-bottom:12.0pt'>A jQuery object is an pseudo-array[1]
that contains all of the HTML elements selected by a give selector. So
$("div.foo");
is a pseudo-array of all of the "div" elements on the page that have
the class "foo". By "hit", I mean that toggleVis() will
toggle each and every one of the elements selected whatever selector you use
(that's usually what you want). <o:p></o:p>

<span style='font-size:11.0pt;color:#1F497D'>and what is the
"chain"?</span><o:p></o:p>

</div>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-top:5.0pt;margin-right:0in;margin-bottom:5.0pt'>
<p class=MsoNormal><o:p> </o:p>

<span style='font-size:11.0pt;color:#1F497D'>I don't want "everything
to become invisible, just the one container I specify.</span><o:p></o:p>

</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>
That's exactly what my plugin does. Only the element's selected by the selector
that you use will be affected.<o:p></o:p>

<span style='font-size:8.0pt'>jQuery.fn.toggleVis = function() {</span><o:p></o:p>

<span style='font-size:8.0pt'>
        if(this.style.visibility ==
'hidden') {

this.style.visibility = 'visible';
        } else {

this.style.visibility = 'hidden';
        }
};</span><o:p></o:p>

</div>
</body>
</html>

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I know this is trivial but what it turned out I needed was
something this simple<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>jQuery.fn.toggleVis = function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> if(chesireCat.style.visibility
== 'hidden') {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> chesireCat.style.visibility
= 'visible';<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> chesireCat.style.visibility
= 'hidden';<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Enabled with this<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
/* toggle visibility */ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$('#toggle').click(function(){ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>
$('#cheshireCat').toggleVis();<o:p></o:p></span>

<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Mitchell
Waite
<b>Sent:</b> Tuesday, July 24, 2007 12:45 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
</div>
<p class=MsoNormal><o:p> </o:p>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My apology for the confusion. I should have just posted the darn
code. I’ll remember this in the future. <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I had one typo, left out the # for the container, then it worked
fine. <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I think it’s a good demo but I still don’t think I need
all the for ‘each’ stuff however.<o:p></o:p></span>

</div>
</body>
</html>

aaron.hei..

Re: [jQuery] Enable / disable submit button not working

14 years ago

On 7/24/07, <b class="gmail_sendername">Mitchell Waite</b> <<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:<div><span class="gmail_quote"></span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US">
<div><span style="font-size: 11pt; color: rgb(31, 73, 125);">jQuery.fn.toggleVis = function() {</span>

<span style="font-size: 11pt; color: rgb(31, 73, 125);"> if(chesireCat.style.visibility
== 'hidden') {</span>

<span style="font-size: 11pt; color: rgb(31, 73, 125);"> chesireCat.style.visibility
= 'visible';</span>

<span style="font-size: 11pt; color: rgb(31, 73, 125);"> chesireCat.style.visibility
= 'hidden';</span>

</div></div></blockquote></div>
That works for you??? (works as in functions properly, not as in "I'm
ok with this"), because I couldn't get it to in either Firefox or IE 7.
In fact, I was expecting this not to work. As I explained in our off-list communication, that cannot possibly work because there is no variable named "chesireCat" defined within the toggleVis(). If I correct the spelling mistake and change "chesireCat" to "cheshireCat", then it works, but only in Internet Explorer (which is generally a Bad Thing, you *want* things to work cross-browser[1]).
If my original solution was too complex for you, here's a simpler solution (although it lacks the reusability of mine):
    /* toggle visibility */
    $('#toggle').click(function() {
            // Remember, a jQuery object acts like an array of all elements selected by a
            // particular selector (in this case, "#cheshireCat"), so we access individual
            // elements through numbered array indexes (starting with 0)
            var cheshireCat = $("#cheshireCat")[0];
            if(cheshireCat.style.visibility == 'hidden') {
                cheshireCat.style.visibility = 'visible';
            } else {
               cheshireCat.style.visibility = 'hidden';
            }
        });
[1] jQuery helps *a lot* in this regard, but it doesn't handle everything.
--
Aaron Heimlich
Web Developer
<a href="mailto:aaron.heimlich@gmail.com">aaron.heimlich@gmail.com</a>
<a href="http://aheimlich.freepgs.com">http://aheimlich.freepgs.com</a>

sgbeal

Re: [jQuery] Enable / disable submit button not working

14 years ago

On Jul 25, 12:41 am, "Mitchell Waite" <mi...@mitchwaite.com>

ganeshread

Re: [jQuery] Enable / disable submit button not working

14 years ago

<div>> jQuery.fn.toggleVis = function() {
>        if(this.style.visibility == 'hidden') {
>          this.style.visibility = 'visible';
>        } else {
>           this.style.visibility
= 'hidden';
>        }
> };
</div>
<div>doesn't "this" here refer to the jquery object... I don't think jquery object has a style attribute, or does it?</div>
<div> </div>
<div>-GTG</div>
<div>
</div>
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com">sgbeal@googlemail.com</a>> wrote:</span>
<blockquote class="gmail_quote" style="PADDING-LEFT: 1ex; MARGIN: 0px 0px 0px 0.8ex; BORDER-LEFT: #ccc 1px solid">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com">mi...@mitchwaite.com
</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>         if(chesireCat.style.visibility == 'hidden') {
>
>            chesireCat.style.visibility = 'visible';
>
>         } else {
>
>            chesireCat.style.visibility = 'hidden';
>
>         }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
       if(this.style.visibility == 'hidden') {
          this.style.visibility = 'visible';
       } else {
          this.style.visibility
= 'hidden';
       }
};
</blockquote></div>

rob.desbo..

Re: [jQuery] Enable / disable submit button not working

14 years ago

Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the outside at quite a fundamental level. Did you run through the tutorials at
<a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a> ? At the very least, John and Joern's tutorials - the top two - are an excellent introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript itself. I don't know of other people's opinions and am not speaking for the jQuery community, but I would really recommend learning JavaScript on its own to a competent level before attempting to use jQuery, otherwise it's hard for you to know which conventions,
<span class="gmail_quote"></span>problems and bits of code are JavaScript, and which are jQuery. It would be like trying to learn MFC (Microsoft Foundation Classes - the old MS C++ class hierarchy wrapping the Windows API) before being able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much more complicated language than some appreciate (I'm currently struggling with some aspects). Walk before you can run.
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Ganeshji Marwaha</b> <<a href="mailto:ganeshread@gmail.com">ganeshread@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<span class="q"><div>> jQuery.fn.toggleVis = function() {
>        if(this.style.visibility == 'hidden') {
>          this.style.visibility = 'visible';
>        } else {
>
this.style.visibility
= 'hidden';
>        }
> };
</div></span>
<div>doesn't "this" here refer to the jquery object... I don't think jquery object has a style attribute, or does it?</div>
<div> </div>
<div>-GTG</div><div><span class="e" id="q_113fc4c0278b7ca4_2">
<div>
</div>
<div><span class="gmail_quote">On 7/24/07, <b class="gmail_sendername">Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">sgbeal@googlemail.com
</a>> wrote:</span>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mi...@mitchwaite.com
</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>         if(chesireCat.style.visibility == 'hidden') {
>
>            chesireCat.style.visibility = 'visible';
>
>         } else {
>
>            chesireCat.style.visibility = 'hidden';
>
>         }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
       if(this.style.visibility == 'hidden') {
          this.style.visibility = 'visible';
       } else {
          this.style.visibility
= 'hidden';
       }
};
</blockquote></div>
</span></div></blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

I'm sorry for my apparent ignorance. I tried your approach and it did not
work
DOESN'T WORK
http://www.whatbird.com/wwwroot/Alice_1.html
    jQuery.fn.toggleVis = function() {
if(this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
        }
};
WORKS
http://www.whatbird.com/wwwroot/Alice_1.html
    jQuery.fn.toggleVis = function() {
if(cheshireCat.style.visibility == 'hidden') {
cheshireCat.style.visibility = 'visible';
} else {
cheshireCat.style.visibility = 'hidden';
        }
};
I was under the impression that the object #chesireCat would be the only
object affected by this function, and that its using jQuery's ability to
figure out the object by name.
<div id="cheshireCat"><img src="images/alice24.gif" /></div>
Take a look at the code examples and tell me if I am missing something here.
Mitch
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Stephan Beal
Sent: Tuesday, July 24, 2007 11:31 PM
To: jQuery (English)
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>Unfortunately
my code does work </span><span style='font-family:Wingdings;color:#1F497D'>J</span><span
style='font-family:"Calibri","sans-serif";color:#1F497D'>. Must be a miracle?<o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><a
href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
(works)<o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>here
is the idea of using (this).<o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'><a
href="http://www.whatbird.com/wwwroot/Alice_2.html">http://www.whatbird.com/wwwroot/Alice_2.html</a>
(does not work)<o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
just got my copy of Learning jQuery and it’s a very good book (took 10 days to
get here). Some really basic concepts that got away from me are finally becoming
clear.<o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
know enough Javascript, my main issue is not understanding the domain of jQuery
and the domain of JS, and how the two differ, but the book is making that clear.
Also the book helps me understand that jQuery is really about manipulating elements
in the DOM using selectors and traversing the DOM. I think that is where I went
astray. I don’t think you need to dive deep into JS to grok jQ, but the syntax closeness
of the two can be tricky, and not explained well in the tutorials. Like the book
spends a lot of time explaining $() which it calls the Factory function.<o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif";color:#1F497D'>I
see now that an object in jQuery does not have a visibility directly, it needs
a class assigned to it, so that is why example 2 doesn’t work.<o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif"'>PS I have
read all the tutorials at </span><span style='font-family:"Calibri","sans-serif"'><a
href="http://docs.jquery.com/Tutorials"><span style='color:windowtext'>http://docs.jquery.com/Tutorials</span></a>
and honestly they assume a lot of prior knowledge and leave out some really
major lessons for the newbie. <o:p></o:p></span>

<p class=MsoNormal><span style='font-family:"Calibri","sans-serif"'>PSS I am
not sure your metaphor is right, but I agree that the bigger picture needs
amplifying on the docs site, and maybe I will end up contributing to that
issue, which is not to be critical of the community in any way, you guys are
all fabulous and very generous.<o:p></o:p></span>

<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Rob
Desbois
<b>Sent:</b> Wednesday, July 25, 2007 2:14 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
<p class=MsoNormal><o:p> </o:p>

<p class=MsoNormal style='margin-bottom:12.0pt'>Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this
code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the
outside at quite a fundamental level. Did you run through the tutorials at <a
href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a> ?
At the very least, John and Joern's tutorials - the top two - are an excellent
introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript
itself. I don't know of other people's opinions and am not speaking for the
jQuery community, but I would really recommend learning JavaScript on its own
to a competent level before attempting to use jQuery, otherwise it's hard for
you to know which conventions, problems and bits of code are JavaScript, and
which are jQuery. It would be like trying to learn MFC (Microsoft Foundation
Classes - the old MS C++ class hierarchy wrapping the Windows API) before being
able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much
more complicated language than some appreciate (I'm currently struggling with
some aspects). Walk before you can run.
--rob<o:p></o:p>

<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Ganeshji Marwaha</b>
<<a href="mailto:ganeshread@gmail.com">ganeshread@gmail.com</a>> wrote:</span><o:p></o:p>

<div>
<p class=MsoNormal>> jQuery.fn.toggleVis = function() {
>        if(this.style.visibility == 'hidden')
{
>
         this.style.visibility =
'visible';
>        } else {
>
this.style.visibility = 'hidden';
>        }
> };
<o:p></o:p>

</div>
<div>
<p class=MsoNormal>doesn't "this" here refer to the jquery object...
I don't think jquery object has a style attribute, or does it?<o:p></o:p>

</div>
<div>
<p class=MsoNormal> <o:p></o:p>

</div>
<div>
<p class=MsoNormal>-GTG<o:p></o:p>

</div>
<div>
<div>
<p class=MsoNormal>
<o:p></o:p>

</div>
<div>
<p class=MsoNormal><span class=gmailquote>On 7/24/07, <b>Stephan Beal</b> <<a
href="mailto:sgbeal@googlemail.com" target="_blank">sgbeal@googlemail.com </a>>
wrote:</span> <o:p></o:p>

<p class=MsoNormal style='margin-bottom:12.0pt'>
On Jul 25, 12:41 am, "Mitchell Waite" <<a
href="mailto:mi...@mitchwaite.com" target="_blank"> mi...@mitchwaite.com </a>>
wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>
if(chesireCat.style.visibility == 'hidden') {
>
>            chesireCat.style.visibility
= 'visible';
>
>         } else {
>
>            chesireCat.style.visibility
= 'hidden';
>
>         }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
       if(this.style.visibility == 'hidden') {
          this.style.visibility
= 'visible';
       } else {
          this.style.visibility
= 'hidden';
       }
};
<o:p></o:p>

</div>
<p class=MsoNormal><o:p> </o:p>

</div>
</div>
<p class=MsoNormal>
<br clear=all>
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and
the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome. <o:p></o:p>

</div>
</body>
</html>

rob.desbo..

Re: [jQuery] Enable / disable submit button not working

14 years ago

Mitch,
In your working code:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
   if(cheshireCat.style.visibility
== 'hidden') {
      cheshireCat.style.visibility = 'visible';
   } else {
      cheshireCat.style.visibility = 'hidden';
   }
};</blockquote><div>
That can only work if there is a variable called 'cheshireCat' which is accessible from within jQuery. My best guess is that at some point in your code you've written
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">cheshireCat = $("#cheshireCat")[0];
</blockquote>or something similar. The best way to avoid this 'namespace pollution' is to always use the keyword 'var' when declaring a variable,
e.g.
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">var cheshireCat = $("#cheshireCat")[0];
</blockquote></div>That prevents the variable from becoming globally available, and I guess will break the previously working code you have.
Now, the question is, how can you fix the code that I've just broken?
If you add a function to jQuery as you've done, that function will be available to any jQuery object, and should work upon that object as expected. So, if you write
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">$("#cheshireCat").toggleVis();</blockquote><div>you should expect that the element with ID 'cheshireCat' will be toggled, and nothing else. You should also be able to expect that the toggleVis() function will return the same jQuery object it operated on, which is the same one you got with $(...), so that you can do other things as well, like (for example):
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote"> $("#cheshireCat").toggleVis().append('toggled');</blockquote></div>
Now, this code block:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
   if(this.style.visibility == 'hidden') {
      this.style.visibility = 'visible';
   } else {
      this.style.visibility = 'hidden';
   }
};
</blockquote>doesn't work because in a jQuery function, 'this' is not a DOM object (
i.e. the <div> element), it's a jQuery object containing the matching element(s). How can you get them out? Two ways:
this[0] - will give you the first DOM element in the object, and assumes that there IS one. If there aren't, you're accessing an array out-of-bounds.
this.each() - will iterate through any and all contained DOM elements. This is by far the best way to achieve this.
So first off your if..else needs to be wrapped to act on all contained elements:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">
this.each(function() {
   if (this.style.visibility == 'hidden') {
      this.style.visibility = 'visible';
   } else {
      this.style.visibility = 'hidden';
   }
});
</blockquote>
Within the function passed to .each(), 'this' refers to the actual DOM element we are currently dealing with, so that part of the code is now alright.
It still won't allow you to chain function calls though, so one final touch is to return the result of .each(), and we're done:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">jQuery.fn.toggleVis = function() {
   this.each(function() {
      if (this.style.visibility
== 'hidden') {
         this.style.visibility = 'visible';
      } else {
         this.style.visibility = 'hidden';
      }
   });
};</blockquote><div>
I hope that's explained it all a bit better - it took a lot of 'hammering' before I understood the way jQuery fits together, especially in terms of what 'this' means when.
</div>Put that function in your code, then try $("#cheshireCat").toggleVis() and see what happens :-)
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mitchell Waite
</b> <<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I'm sorry for my apparent ignorance. I tried your approach and it did not
work
DOESN'T WORK
<a href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
        jQuery.fn.toggleVis = function() {
        if(this.style.visibility == 'hidden') {
            this.style.visibility = 'visible';
        } else {
            this.style.visibility = 'hidden';
                }
};
WORKS
<a href="http://www.whatbird.com/wwwroot/Alice_1.html">http://www.whatbird.com/wwwroot/Alice_1.html</a>
        jQuery.fn.toggleVis = function() {
        if(cheshireCat.style.visibility
== 'hidden') {
            cheshireCat.style.visibility = 'visible';
        } else {
            cheshireCat.style.visibility = 'hidden';
                }
};
I was under the impression that the object #chesireCat would be the only
object affected by this function, and that its using jQuery's ability to
figure out the object by name.
<div id="cheshireCat"><img src="images/alice24.gif" /></div>
Take a look at the code examples and tell me if I am missing something here.
Mitch
-----Original Message-----
From: <a href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</a> [mailto:<a href="mailto:jquery-en@googlegroups.com">
jquery-en@googlegroups.com</a>] On
Behalf Of Stephan Beal
Sent: Tuesday, July 24, 2007 11:31 PM
To: jQuery (English)
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide
On Jul 25, 12:41 am, "Mitchell Waite" <
<a href="mailto:mi...@mitchwaite.com">mi...@mitchwaite.com</a>> wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>         if(chesireCat.style.visibility == 'hidden') {
>
>            chesireCat.style.visibility = 'visible';
>
>         } else {
>
>            chesireCat.style.visibility
= 'hidden';
>
>         }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
        if(this.style.visibility == 'hidden') {

this.style.visibility = 'visible';
        } else {
           this.style.visibility = 'hidden';
        }
};
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.

rob.desbo..

Re: [jQuery] Enable / disable submit button not working

14 years ago

<span style="color: rgb(31, 73, 125);">Unfortunately
my code does work </span><span style="font-family: Wingdings; color: rgb(31, 73, 125);">J</span><span style="color: rgb(31, 73, 125);">. Must be a miracle?</span>

</div></div></blockquote><div>The one where you used 'this' instead of 'cheshireCat' didn't work - that was the one I was referring to. My last post clears that up a bit more understandably I hope.
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>

<span style="color: rgb(31, 73, 125);">
I
just got my copy of Learning jQuery and it's a very good book (took 10 days to
get here). Some really basic concepts that got away from me are finally becoming
clear.</span>

</div></div></blockquote><div>Excellent - good luck with it!
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>

<span style="color: rgb(31, 73, 125);">I
know enough Javascript, my main issue is not understanding the domain of jQuery
and the domain of JS, and how the two differ, but the book is making that clear.
Also the book helps me understand that jQuery is really about manipulating elements
in the DOM using selectors and traversing the DOM. I think that is where I went
astray. I don't think you need to dive deep into JS to grok jQ, but the syntax closeness
of the two can be tricky, and not explained well in the tutorials. Like the book
spends a lot of time explaining $() which it calls the Factory function.</span>

</div></div></blockquote><div>Ok, I hope my post didn't offend in any way. Re-reading your posts, I think your conclusion is correct - understanding what is jQuery and what is JS, and the differences, can be tricky. I'm not so sure about not needing a good understanding of JS - really getting to grips with relatively advanced topics like closures is quite important IMO - I certainly struggled with some bits of JS I'd never seen before coming to jQuery, especially when extending jQuery yourself.
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div>

<span style="color: rgb(31, 73, 125);">
I
see now that an object in jQuery does not have a visibility directly, it needs
a class assigned to it, so that is why example 2 doesn't work.</span>

</div></div></blockquote><div>Not entirely sure what you mean by this..?
</div><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US"><div>

<span>PS I have
read all the tutorials at </span><span><a href="http://docs.jquery.com/Tutorials" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)"><span style="color: windowtext;">http://docs.jquery.com/Tutorials</span>
</a>
and honestly they assume a lot of prior knowledge and leave out some really
major lessons for the newbie.</span>

</div></div></blockquote><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US">
<div>

<span>PSS I am
not sure your metaphor is right, but I agree that the bigger picture needs
amplifying on the docs site, and maybe I will end up contributing to that
issue, which is not to be critical of the community in any way, you guys are
all fabulous and very generous.</span>

</div></div></blockquote><div>In what sort of areas do you think too much is assumed in the tutorials?
I'm not so sure about the metaphor - jQuery is a tool, the use of which requires knowledge and understanding of how you use that tool, as with anything. I would strongly advise anyone wanting to use jQuery to learn JavaScript first, but that is my opinion - you think otherwise, perhaps the rest of the community would disagree with me too ;-)
In terms of adding to the docs I'm sure nobody will be offended. We all approach learning a new language / tool / platform in different ways, if you found that the existing reference and tutorials were not sufficient or appropriate for you then there are probably others in a similar situation. By going through the hard part and contributing yourself, you add your own viewpoint which might be just what someone else needs, which can only be a good thing.
<span></span>
</div>--rob
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div link="blue" vlink="purple" lang="EN-US"><div><div style="border-style: solid none none; border-color: rgb(181, 196, 223) -moz-use-text-color -moz-use-text-color; border-width: 1pt medium medium; padding: 3pt 0in 0in;">

<b><span style="font-size: 10pt;">From:</span></b><span style="font-size: 10pt;">
<a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a> [mailto:<a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
jquery-en@googlegroups.com</a>] <b>On Behalf Of </b>Rob
Desbois
<b>Sent:</b> Wednesday, July 25, 2007 2:14 AM<span class="q">
<b>To:</b> <a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a>
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide</span></span>

</div>

<div><span class="e" id="q_113fe239470a0568_3">
<p style="margin-bottom: 12pt;">Ganeshji,
Correct, As Aaron states above, 'this' refers to the jQuery object, hence this
code will not work.
Mitch,
As I can see it I think you're misunderstanding how jQuery works from the
outside at quite a fundamental level. Did you run through the tutorials at <a href="http://docs.jquery.com/Tutorials" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://docs.jquery.com/Tutorials
</a> ?
At the very least, John and Joern's tutorials - the top two - are an excellent
introduction.
Also IIRC from your other posts you aren't overly-familiar with JavaScript
itself. I don't know of other people's opinions and am not speaking for the
jQuery community, but I would really recommend learning JavaScript on its own
to a competent level before attempting to use jQuery, otherwise it's hard for
you to know which conventions, problems and bits of code are JavaScript, and
which are jQuery. It would be like trying to learn MFC (Microsoft Foundation
Classes - the old MS C++ class hierarchy wrapping the Windows API) before being
able to code in C++.
Granted, jQuery is massively more simple than MFC, but JavaScript is a much
more complicated language than some appreciate (I'm currently struggling with
some aspects). Walk before you can run.
--rob

<div>

<span>On 7/25/07, <b>Ganeshji Marwaha</b>
<<a href="mailto:ganeshread@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">ganeshread@gmail.com</a>> wrote:</span>

<div>

> jQuery.fn.toggleVis = function() {
>        if(this.style.visibility == 'hidden')
{
>
         this.style.visibility =
'visible';
>        } else {
>
this.style.visibility = 'hidden';
>        }
> };

</div>
<div>

doesn't "this" here refer to the jquery object...
I don't think jquery object has a style attribute, or does it?

</div>
<div>

-GTG

</div>
<div>
<div>

</div>
<div>

<span>On 7/24/07, <b>Stephan Beal</b> <<a href="mailto:sgbeal@googlemail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">sgbeal@googlemail.com </a>>
wrote:</span>

<p style="margin-bottom: 12pt;">
On Jul 25, 12:41 am, "Mitchell Waite" <<a href="mailto:mi...@mitchwaite.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)"> mi...@mitchwaite.com </a>>
wrote:
> I know this is trivial but what it turned out I needed was something this
> simple
>
> jQuery.fn.toggleVis = function() {
>
>
if(chesireCat.style.visibility == 'hidden') {
>
>            chesireCat.style.visibility
= 'visible';
>
>         } else {
>
>            chesireCat.style.visibility
= 'hidden';
>
>         }
>
> };
Eeeek! What you're doing here is adding a toggleVis() function to ALL
selectable jQuery elements, but then in the function you're applying
the change to a specific element. Thus this will trigger your
function:
$('div').toggleVis();
that will toggle the cheshireCat element, not the selected element(s),
which certainly isn't desired.
What i *think* you meant was to either make that a standalone function
(not using jQuery.fn.) or:
jQuery.fn.toggleVis = function() {
       if(this.style.visibility == 'hidden') {
          this.style.visibility
= 'visible';
       } else {
          this.style.visibility
= 'hidden';
       }
};

</div>

</div>
</div>

<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and
the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.

</span></div></div>
</div>
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.

mike9

Re: [jQuery] Enable / disable submit button not working

14 years ago

Rob, I think you left out the return statement that you meant to put in. :-)
(Outstanding explanation, BTW!)
For clarity, it could be:
jQuery.fn.toggleVis = function() {
this.each(function() {
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
return this;
};
Or, taking advantage of the fact that "each" returns "this" for convenience:
jQuery.fn.toggleVis = function() {
return this.each(function() {
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};
Mitch, take careful note that "this" means two different things in that
code:
jQuery.fn.toggleVis = function() {
/* Here, "this" is the jQuery object */
return this.each(function() {
/* Here, "this" is a DOM element */
if (this.style.visibility == 'hidden') {
this.style.visibility = 'visible';
} else {
this.style.visibility = 'hidden';
}
});
};
The use of "this" inside an "each" loop is one of the two major design
errors in jQuery (the other being the event system, which I'll get to
another day). It is the source of a great deal of confusion. It would have
been far better if "each" passed the DOM element as an argument to the inner
function, instead of using "this":
/* Non-working code as an example of what could have been */
jQuery.fn.toggleVis = function() {
return this.each( function( element ) {
if (element.style.visibility == 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
});
};
To me at least, that code is *much* easier to follow.
Now it does turn out that the DOM element is passed as an argument to the
"each" inner function, but it's the second argument, not the first. The
first argument is the array index (0 through n). That's unfortunate, since
you rarely need the index but always need the element. But at least you can
code:
jQuery.fn.toggleVis = function() {
return this.each( function( index, element ) {
if (element.style.visibility == 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
});
};
That capability didn't exist in the first versions of jQuery - it was added
somewhat later - so you'll often see another approach in existing jQuery
code:
jQuery.fn.toggleVis = function() {
return this.each( function() {
var element = this;
if (element.style.visibility == 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
});
};
-Mike

kswedberg

Re: [jQuery] Enable / disable submit button not working

14 years ago

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><DIV><DIV>On Jul 25, 2007, at 12:26 PM, Rob Desbois wrote:</DIV><BLOCKQUOTE type="cite"><BLOCKQUOTE class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><DIV link="blue" vlink="purple" lang="EN-US"><DIV><P><SPAN style=""><FONT class="Apple-style-span" color="#1F497D">I see now that an object in jQuery does not have a visibility directly, it needs a class assigned to it, so that is why example 2 doesn't work.</FONT></SPAN><BR></P></DIV></DIV></BLOCKQUOTE><DIV>Not entirely sure what you mean by this..? </DIV></BLOCKQUOTE></DIV><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV>Well, the main point is that the jQuery object is not the same as a DOM element. It doesn't necessarily need a class assigned to it to change the visibility, but that's the approach we took in the early chapters of the book to demonstrate basic jQuery components: $('someSelector').addClass('class') and $('someSelector').removeClass('class')</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>jQuery has its own method to access and modify CSS properties: .css(). </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>So, $('#myDiv').css('visibility') would return the same value as document.getElementById('myDiv').style.visibility</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Except, I think, .css('visibility') will return "visible" if the element is visible, even if its style attribute isn't explicitly set to "visiblity: visible" whereas the .style.visibility will return "visible" only if that's what the element's style attribute says.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I hope I'm not clouding the issue here. Ideally, modifying presentation based on class as its defined in a stylesheet is the way to go. But, Mitchell, I think you'll see later in the book (chapter 5?) that there are times when it's necessary to calculate a css value in your script, so .css() works great for those occasions.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV></DIV><BR></BODY></HTML>

malsup

Re: [jQuery] Enable / disable submit button not working

14 years ago

> It would have been far better if "each" passed the DOM element as
> an argument to the inner function, instead of using "this":
It does pass the element, so if you prefer you could write code like:
$('.stuff').each(function(index, element) {
element.style.visibility = 'hidden';
});
Personally, I prefer using 'this'. I understand that it's more
confusing to learn initially, but once you get it I think it makes a
lot of sense.
Mike

klaus.har..

Re: [jQuery] Enable / disable submit button not working

14 years ago

Michael Geary

malsup

Re: [jQuery] Enable / disable submit button not working

14 years ago

:-) Mike, I just reread your email and see that you pointed this out
already! Sorry!
Mike

rob.desbo..

Re: [jQuery] Enable / disable submit button not working

14 years ago

Michael,
> Rob, I think you left out the return statement that you meant to put in. :-)
Whoops, thanks!
> (Outstanding explanation, BTW!)
And thanks again :-) took a while to put it into rambling words.
Is there a decent article somewhere on <a href="http://docs.jquery.com">docs.jquery.com</a> or someone's blog which explains what 'this' is and when?
It's such a common confusion that it really needs an obvious, short description somewhere.
--rob
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mike Alsup</b> <<a href="mailto:malsup@gmail.com">malsup@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
:-)  Mike, I just reread your email and see that you pointed this out
already!   Sorry!
Mike
On 7/25/07, Mike Alsup <<a href="mailto:malsup@gmail.com">malsup@gmail.com</a>> wrote:
> > It would have been far better if "each" passed the DOM element as
> > an argument to the inner function, instead of using "this":
>
> It does pass the element, so if you prefer you could write code like:
>
> $('.stuff').each(function(index, element) {
>     element.style.visibility = 'hidden';
> });
</blockquote></div>
<br clear="all">
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.

mike9

Re: [jQuery] Enable / disable submit button not working

14 years ago

> From: Michael Geary
>
> The use of "this" inside an "each" loop is one of the two
> major design errors in jQuery (the other being the event
> system, which I'll get to another day).
Just to avoid any possible misunderstanding, I think everyone knows I
consider jQuery to be a brilliant piece of work. Even so, it would be
surprising if there were *no* design flaws. :-) (And "major design errors"
is probably overstating it quite a bit!)
The event system is actually a more subtle and interesting problem. jQuery's
event system is derived from Dean Edwards' entry in the famous addEvent()
recoding contest [1] that took place in September 2005. The contest
specified an addEvent interface that looked good on paper but added
complexity to the implementation.
A small change to the specification allows for a simpler event system, like
the one I coded recently for my Zvents event calendar widgets.
Unfortunately, the original contest specification is gone from quirksmode,
org, and the Wayback Machine at archive.org is broken right now too. Once I
get a hold of the original specs I'll write up an article about this. It's a
fairly interesting design exercise (of course I would say that!), even if it
is too late for it to do much good for existing libraries that based their
event systems on the contest entries.
-Mike
[1] http://www.quirksmode.org/blog/archives/2005/09/addevent_recodi.html

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoPlainText>Leave it to Michael to leave the most indelible mark. I
now a see the subtle issues with "this" In fact I have a whole a new
take on jQuery since listening to Michael about "this" and trying to
get my tediously simple little toggle to work. <o:p></o:p>

<p class=MsoPlainText>It actually started in Javascript and was a lot more
code, so I appreciate that it's so more streamlined. <o:p></o:p>

<p class=MsoPlainText>However the abstraction leaves me a bit uneasy. Given
there is no simple way to tell a DOM "this" from a jQ "this",
I ended up doing this:<o:p></o:p>

<p class=MsoPlainText><span style='font-size:9.0pt'>function toggleVis(element)
{ <o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') { <o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'visible'; <o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'hidden'; <o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'>Contrasting this with
Michael G's code<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> jQuery.fn.toggleVis =
function() {<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> return this.each(
function( index, element ) {<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') {<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'visible';<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'>
element.style.visibility = 'hidden';<o:p></o:p></span>

<p class=MsoPlainText>I think Rob's makes more sense to a beginner. <o:p></o:p>

<p class=MsoPlainText>---- called by this----<o:p></o:p>

<p class=MsoPlainText><span style='font-size:9.0pt'>
$("#toggle").click(function() { <o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> var $cat =
$('#cheshireCat'); <o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> if
($cat.length) { <o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> toggleVis($cat[0]);
<o:p></o:p></span>

<p class=MsoPlainText>This was advice from Rob, using a JS function and calling
it with from jQuery and sending it a DOM. I leave this here for the newbie's on
this list, as I know this is self evident to most people here. <o:p></o:p>

<p class=MsoPlainText><b><span style='color:#0070C0'>Now to muddle things
either further.<o:p></o:p></span></b>

<p class=MsoPlainText>I decided that I might be able to use jQuery’s ‘hover’ to
deal with the whole issue of flipping visibility and so I made this:<o:p></o:p>

<p class=MsoPlainText><span style='font-size:9.0pt'>.hidden {display: none;}<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'>.showPic {<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> position:absolute;<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> width:94px;<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> height:31px;<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> z-index:1;<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'>$(document).ready(function(){<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> $("#showPic").hover(function()
{<o:p></o:p></span>

<p class=MsoPlainText><span style='font-size:9.0pt'> $("#hover,
#normal").toggleClass("hidden");<o:p></o:p></span>

<p class=MsoPlainText>Ya think that could be more simple. It works right?<o:p></o:p>

<p class=MsoPlainText>Check it out, it does something much different then what
I expected.<o:p></o:p>

<p class=MsoPlainText><a
href="http://www.whatbird.com/wwwroot/3statebutton_2.html">http://www.whatbird.com/wwwroot/3statebutton_2.html</a><o:p></o:p>

<p class=MsoPlainText>So is hover not a good solution?<o:p></o:p>

<p class=MsoPlainText>Mitch<o:p></o:p>

<p class=MsoPlainText>-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On Behalf
Of Michael Geary
Sent: Wednesday, July 25, 2007 10:10 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p>

<p class=MsoPlainText>Rob, I think you left out the return statement that you
meant to put in. :-)<o:p></o:p>

<p class=MsoPlainText>(Outstanding explanation, BTW!)<o:p></o:p>

<p class=MsoPlainText>For clarity, it could be:<o:p></o:p>

<p class=MsoPlainText> jQuery.fn.toggleVis = function() {<o:p></o:p>

<p class=MsoPlainText> this.each(function() {<o:p></o:p>

<p class=MsoPlainText> if (this.style.visibility == 'hidden') {<o:p></o:p>

<p class=MsoPlainText> this.style.visibility = 'visible';<o:p></o:p>

<p class=MsoPlainText> this.style.visibility = 'hidden';<o:p></o:p>

<p class=MsoPlainText> return this;<o:p></o:p>

</div>
</body>
</html>

brandon_a..

Re: [jQuery] Enable / disable submit button not working

14 years ago

The hover method takes two functions. One for the mouseover and one for the mouseout. Here are the docs for the hover method: <a href="http://jquery.bassistance.de/api-browser/#hoverFunctionFunction">http://jquery.bassistance.de/api-browser/#hoverFunctionFunction
</a>
Here is the proper way to code the example.
<span style="font-size: 9pt;">$("#showPic").hover(function()
{
</span><span style="font-size: 9pt;">$("#hover,
#normal").addClass("hidden");</span><span style="font-size: 9pt;">
}, function() {
</span><span style="font-size: 9pt;"></span><span style="font-size: 9pt;">$("#hover,
#normal").removeClass("hidden");</span>
<span style="font-size: 9pt;">}); </span>
--
Brandon Aaron
<div><span class="gmail_quote">On 7/25/07, <b class="gmail_sendername">Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div link="blue" vlink="purple" lang="EN-US">
<div>

Leave it to Michael to leave the most indelible mark. I
now a see the subtle issues with "this" In fact I have a whole a new
take on jQuery since listening to Michael about "this" and trying to
get my tediously simple little toggle to work.

It actually started in Javascript and was a lot more
code, so I appreciate that it's so more streamlined.

However the abstraction leaves me a bit uneasy. Given
there is no simple way to tell a DOM "this" from a jQ "this",
I ended up doing this:

<span style="font-size: 9pt;">function toggleVis(element)
{ </span>

<span style="font-size: 9pt;"> if
(element.style.visibility == 'hidden') { </span>

<span style="font-size: 9pt;">
element.style.visibility = 'visible'; </span>

<span style="font-size: 9pt;">
element.style.visibility = 'hidden'; </span>

</span>

<span style="font-size: 9pt;">Contrasting this with
Michael G's code</span>

<span style="font-size: 9pt;"> jQuery.fn.toggleVis =
function() {</span>

<span style="font-size: 9pt;"> return this.each(
function( index, element ) {</span>

<span style="font-size: 9pt;"> if
(element.style.visibility == 'hidden') {</span>

<span style="font-size: 9pt;">
element.style.visibility = 'visible';</span>

<span style="font-size: 9pt;">
element.style.visibility = 'hidden';</span>

</span>

I think Rob's makes more sense to a beginner.

---- called by this----

<span style="font-size: 9pt;">
$("#toggle").click(function() { </span>

<span style="font-size: 9pt;"> var $cat =
$('#cheshireCat'); </span>

<span style="font-size: 9pt;"> if
($cat.length) { </span>

<span style="font-size: 9pt;"> toggleVis($cat[0]);
</span>

This was advice from Rob, using a JS function and calling
it with from jQuery and sending it a DOM. I leave this here for the newbie's on
this list, as I know this is self evident to most people here.

<b><span style="color: rgb(0, 112, 192);">Now to muddle things
either further.</span></b>

I decided that I might be able to use jQuery's 'hover' to
deal with the whole issue of flipping visibility and so I made this:

<span style="font-size: 9pt;">.hidden {display: none;}</span>

<span style="font-size: 9pt;">.showPic {</span>

<span style="font-size: 9pt;"> position:absolute;</span>

<span style="font-size: 9pt;"> width:94px;</span>

<span style="font-size: 9pt;"> height:31px;</span>

<span style="font-size: 9pt;"> z-index:1;</span>

<span style="font-size: 9pt;">$(document).ready(function(){</span>

<span style="font-size: 9pt;"> $("#showPic").hover(function()
{</span>

<span style="font-size: 9pt;"> $("#hover,
#normal").toggleClass("hidden");</span>

Ya think that could be more simple. It works right?

Check it out, it does something much different then what
I expected.

<a href="http://www.whatbird.com/wwwroot/3statebutton_2.html" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://www.whatbird.com/wwwroot/3statebutton_2.html</a>

So is hover not a good solution?

Mitch

<span class="q">-----Original Message-----
From: <a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a> [mailto:<a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
jquery-en@googlegroups.com</a>] On Behalf
Of Michael Geary
Sent: Wednesday, July 25, 2007 10:10 AM
To: <a href="mailto:jquery-en@googlegroups.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">jquery-en@googlegroups.com</a>
</span><span class="q">
Subject: [jQuery] Re: Toggling an objects visiblty without show and hide</span>

Rob, I think you left out the return statement that you
meant to put in. :-)

(Outstanding explanation, BTW!)

For clarity, it could be:

jQuery.fn.toggleVis = function() {

this.each(function() {

if (this.style.visibility == 'hidden') {

this.style.visibility = 'visible';

} else {

this.style.visibility = 'hidden';

}

});

return this;

};

</span></div>
</div>
</blockquote></div>

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple style='word-wrap: break-word;
-khtml-nbsp-mode: space;-khtml-line-break: after-white-space'>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Gosh the author speaks! <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Having authored about 25 computer books on programming and
published about 200 (www.mitchwaite.com), I find Learning jQuery a real
treasure. The way you guys tell the store is very well thought out, and shows
an immense understanding of the person coming to jQuery. You go out of your way
to help understand what makes it so different.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I just hit chapter 4 page 67 were you introduce css positioning
so I can being to see the use of styles better. The link on page 67 is broken. <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Is there source code for the examples anywhere. It would be so
helpful to be able to run each example and modify it.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>My only quibble and this is more the publisher in me, is that
the book suffers on the illustration end. I think there are a lot of places
where a drawing or two would have hammered the idea home. <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>I am really enjoying myself.<o:p></o:p></span>

<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Karl
Swedberg
<b>Sent:</b> Wednesday, July 25, 2007 10:15 AM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
</div>
<p class=MsoNormal><o:p> </o:p>

<div>
<div>
<p class=MsoNormal>On Jul 25, 2007, at 12:26 PM, Rob Desbois wrote:<o:p></o:p>

</div>
<blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'>
<blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;
margin-left:4.8pt;margin-right:0in'>
<div>
<div>

<span style='color:#1F497D'>I see now that an object in jQuery does not have
a visibility directly, it needs a class assigned to it, so that is why example
2 doesn't work.</span><o:p></o:p>

</div>
</div>
</blockquote>
<div>
<p class=MsoNormal>Not entirely sure what you mean by this..? <o:p></o:p>

</div>
</blockquote>
</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>
</span><span class=apple-style-span><span style='font-size:9.0pt;font-family:
"Helvetica","sans-serif";color:black'><o:p></o:p></span></span>

<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Well, the main point is that the jQuery object is not the same as
a DOM element. It doesn't necessarily need a class assigned to it to change the
visibility, but that's the approach we took in the early chapters of the book
to demonstrate basic jQuery components: $('someSelector').addClass('class')
and $('someSelector').removeClass('class')</span><o:p></o:p>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>jQuery has its own method to access and modify CSS properties:
.css(). <o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>So, $('#myDiv').css('visibility') would return the same value as
document.getElementById('myDiv').style.visibility<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Except, I think, .css('visibility') will return
"visible" if the element is visible, even if its style attribute
isn't explicitly set to "visiblity: visible" whereas the
.style.visibility will return "visible" only if that's what the
element's style attribute says.<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>I hope I'm not clouding the issue here. Ideally, modifying
presentation based on class as its defined in a stylesheet is the way to go.
But, Mitchell, I think you'll see later in the book (chapter 5?) that there are
times when it's necessary to calculate a css value in your script, so .css()
works great for those occasions.<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>--Karl<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>_________________<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>Karl Swedberg<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>www.englishrules.com<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>www.learningjquery.com<o:p></o:p></span>

</div>
<div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'><o:p> </o:p></span>

</div>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Helvetica","sans-serif";
color:black'>
</span><o:p></o:p>

</div>
<p class=MsoNormal><o:p> </o:p>

</div>
</body>
</html>

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>That won’t work, it makes both buttons disappear and reappear
instead of the effect I want which is to make the hover button appear when the
mouse is in and disappear when the mouse is out.<o:p></o:p></span>

<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Brandon
Aaron
<b>Sent:</b> Wednesday, July 25, 2007 5:17 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>

</div>
<p class=MsoNormal><o:p> </o:p>

<p class=MsoNormal style='margin-bottom:12.0pt'>The hover method takes two
functions. One for the mouseover and one for the mouseout. Here are the docs
for the hover method: <a
href="http://jquery.bassistance.de/api-browser/#hoverFunctionFunction">http://jquery.bassistance.de/api-browser/#hoverFunctionFunction
</a>
Here is the proper way to code the example.
<span style='font-size:9.0pt'>$("#showPic").hover(function() {
$("#hover, #normal").addClass("hidden");
}, function() {
$("#hover,
#normal").removeClass("hidden");</span>
<span style='font-size:9.0pt'>}); </span>
--
Brandon Aaron<o:p></o:p>

<div>
<p class=MsoNormal><span class=gmailquote>On 7/25/07, <b>Mitchell Waite</b>
<<a href="mailto:mitch@mitchwaite.com">mitch@mitchwaite.com</a>> wrote:</span><o:p></o:p>

Leave it to Michael to leave the most indelible mark. I now a see the subtle
issues with "this" In fact I have a whole a new take on jQuery since
listening to Michael about "this" and trying to get my tediously
simple little toggle to work. <o:p></o:p>

<o:p></o:p>

It actually started in Javascript and was a lot more code, so I appreciate
that it's so more streamlined. <o:p></o:p>

<o:p></o:p>

However the abstraction leaves me a bit uneasy. Given there is no simple way
to tell a DOM "this" from a jQ "this", I ended up doing
this:<o:p></o:p>

<o:p></o:p>

<span style='font-size:9.0pt'>function toggleVis(element) { </span><o:p></o:p>

<span style='font-size:9.0pt'> if
(element.style.visibility == 'hidden') { </span><o:p></o:p>

<span style='font-size:9.0pt'>
element.style.visibility = 'visible'; </span><o:p></o:p>

<span style='font-size:9.0pt'>
element.style.visibility = 'hidden'; </span><o:p></o:p>

<span style='font-size:9.0pt'>Contrasting this with Michael G's code</span><o:p></o:p>

<span style='font-size:9.0pt'> jQuery.fn.toggleVis = function()
{</span><o:p></o:p>

<span style='font-size:9.0pt'> return
this.each( function( index, element ) {</span><o:p></o:p>

<span style='font-size:9.0pt'>
if (element.style.visibility == 'hidden') {</span><o:p></o:p>

<span style='font-size:9.0pt'>
element.style.visibility = 'visible';</span><o:p></o:p>

<span style='font-size:9.0pt'>
element.style.visibility = 'hidden';</span><o:p></o:p>

<o:p></o:p>

I think Rob's makes more sense to a beginner. <o:p></o:p>

<o:p></o:p>

---- called by this----<o:p></o:p>

<o:p></o:p>

<span style='font-size:9.0pt'>
$("#toggle").click(function() { </span><o:p></o:p>

<span style='font-size:9.0pt'>
var $cat = $('#cheshireCat'); </span><o:p></o:p>

<span style='font-size:9.0pt'>
if ($cat.length) { </span><o:p></o:p>

<span style='font-size:9.0pt'>
toggleVis($cat[0]); </span><o:p></o:p>

<o:p></o:p>

This was advice from Rob, using a JS function and calling it with from
jQuery and sending it a DOM. I leave this here for the newbie's on this list,
as I know this is self evident to most people here. <o:p></o:p>

<o:p></o:p>

<b><span style='color:#0070C0'>Now to muddle things either further.</span></b><o:p></o:p>

<o:p></o:p>

I decided that I might be able to use jQuery's 'hover' to deal with the
whole issue of flipping visibility and so I made this:<o:p></o:p>

<o:p></o:p>

<span style='font-size:9.0pt'>.hidden {display: none;}</span><o:p></o:p>

<span style='font-size:9.0pt'>.showPic {</span><o:p></o:p>

<span style='font-size:9.0pt'>
position:absolute;</span><o:p></o:p>

<span style='font-size:9.0pt'>
width:94px;</span><o:p></o:p>

<span style='font-size:9.0pt'>
height:31px;</span><o:p></o:p>

<span style='font-size:9.0pt'>
z-index:1;</span><o:p></o:p>

<span style='font-size:9.0pt'>$(document).ready(function(){</span><o:p></o:p>

<span style='font-size:9.0pt'>
$("#showPic").hover(function() {</span><o:p></o:p>

<span style='font-size:9.0pt'>
$("#hover, #normal").toggleClass("hidden");</span><o:p></o:p>

<o:p></o:p>

Ya think that could be more simple. It works right?<o:p></o:p>

<o:p></o:p>

Check it out, it does something much different then what I expected.<o:p></o:p>

<o:p></o:p>

<a href="http://www.whatbird.com/wwwroot/3statebutton_2.html" target="_blank">http://www.whatbird.com/wwwroot/3statebutton_2.html</a><o:p></o:p>

<o:p></o:p>

So is hover not a good solution?<o:p></o:p>

<o:p></o:p>

Mitch<o:p></o:p>

<o:p></o:p>

<span class=q>-----Original Message-----</span>
<span class=q>From: <a href="mailto:jquery-en@googlegroups.com" target="_blank">jquery-en@googlegroups.com</a>
[mailto:<a href="mailto:jquery-en@googlegroups.com" target="_blank">
jquery-en@googlegroups.com</a>] On Behalf Of Michael Geary</span>
<span class=q>Sent: Wednesday, July 25, 2007 10:10 AM</span>
<span class=q>To: <a href="mailto:jquery-en@googlegroups.com" target="_blank">jquery-en@googlegroups.com</a></span>
<span class=q>Subject: [jQuery] Re: Toggling an objects visiblty without show
and hide</span><o:p></o:p>

<o:p></o:p>

Rob, I think you left out the return statement that you meant to put in. :-)<o:p></o:p>

<o:p></o:p>

(Outstanding explanation, BTW!)<o:p></o:p>

<o:p></o:p>

For clarity, it could be:<o:p></o:p>

<o:p></o:p>

jQuery.fn.toggleVis = function() {<o:p></o:p>

this.each(function() {<o:p></o:p>

if (this.style.visibility
== 'hidden') {<o:p></o:p>

this.style.visibility = 'visible';<o:p></o:p>

} else {<o:p></o:p>

this.style.visibility = 'hidden';<o:p></o:p>

}<o:p></o:p>

});<o:p></o:p>

return this;<o:p></o:p>

};<o:p></o:p>

<o:p></o:p>

</div>
</div>
</div>
<p class=MsoNormal><o:p> </o:p>

</div>
</body>
</html>

goofy166

Re: [jQuery] Enable / disable submit button not working

14 years ago

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Ok here is the skinny (I think I am getting this down)<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_3.html">http://www.whatbird.com/wwwroot/3statebutton_3.html</a>
(uses layers)<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>The hover button is under the normal button layer so all we have
to do is hide and unhide the normal button.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'><a href="http://www.whatbird.com/wwwroot/3statebutton_4.html">http://www.whatbird.com/wwwroot/3statebutton_4.html</a>
(no layers)<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>$(document).ready(function(){ <o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#showPic").hover(function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").removeClass("hidden");<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").addClass("hidden");<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> }, function() {<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#hover").addClass("hidden");<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'> $("#normal").removeClass("hidden");<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Since both bottons are in the same div they can’t both be on at
the same , or you would see them side by side. So you hide and unhide both
buttons. More processing but less divs.<o:p></o:p></span>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";
color:#1F497D'>Mitch<o:p></o:p></span>

<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span
style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> jquery-en@googlegroups.com
[mailto:jquery-en@googlegroups.com] <b>On Behalf Of </b>Brandon Aaron
<b>Sent:</b> Wednesday, July 25, 2007 5:17 PM
<b>To:</b> jquery-en@googlegroups.com
<b>Subject:</b> [jQuery] Re: Toggling an objects visiblty without show and hide<o:p></o:p></span>