JQuery with ASP.NET WebForms for bad old dev server
OK, being a server developer, this Javascript voodoo on an ASP.NET page (based on the master page) displayed on the client seems too much for me, it seems :-)
I decided to try using jQuery to handle some client side UI.
I have two switches ( rbnDoLimit
and rbnDontLimit
) and three check boxes ( months12
, months24
, months36
) - if I click on rbnDoLimit
, I would like to include all three of them, if I click on rbnDontLimit
, I like to clean and turn off the three check boxes. Seems simple enough, right?
So I downloaded and included jQuery 1.3.2 in my ASP.NET 3.5 webform - works fine, I can display a "warning" in the $ (document) .ready event.
My two radio buttons appear on the page as:
<input id="ctl01_cphContent_pnlBasicInfo_rbnDontLimit"
type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD"
value="False" checked="checked" />
<input id="ctl01_cphContent_pnlBasicInfo_rbnDoLimit"
type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD"
value="True" />
and my three checkboxes:
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months12"
type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months12" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months24"
type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months24" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months36"
type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months36" /></span>
I've decorated them with a CSS class dcDetails
(which doesn't exist, but is meant to be selected in jQuery). The first thing I noticed was that the CSS class was not being applied to my <input>
elements as expected, but to the element <span>
around <input>
...... (first puzzle for me .....). Anyway.....
My first attempt at jQuery looks like this:
<script type="text/javascript">
$(document).ready(
$("#<%= rbnDontLimit.ClientID %>").click(function() {
$(".dcDetails").attr('disabled','false');
},
$("#<%= rbnDoLimit.ClientID %>").click(function() {
$(".dcDetails").attr('disabled','true');
});
</script>
No luck - I can click on the two radio buttons that I need - nothing happens. I'm guessing it's because the dcDetails
CSS class is in <span>
around the checkboxes, right?
OK - it turned out a little dirtier, but it should work !! Now I select three checkboxes on purpose, theirs ClientID
- this should be exact and get the items I want, I thought:
<script type="text/javascript">
$(document).ready(
$("#<%= rbnDontLimit.ClientID %>").click(function() {
$("#<%= months12.ClientID %>").attr('disabled','false');
$("#<%= months24.ClientID %>").attr('disabled','false');
$("#<%= months36.ClientID %>").attr('disabled','false');
},
$("#<%= rbnDoLimit.ClientID %>").click(function() {
$("#<%= months12.ClientID %>").attr('disabled','true');
$("#<%= months24.ClientID %>").attr('disabled','true');
$("#<%= months36.ClientID %>").attr('disabled','true');
});
</script>
Again, no luck ......
So what the hell am I missing? All these awesome demos can't help me figure out why it doesn't work - not even a little ... I think I don't have something very basic, very fundamental, but I just can't seem to think what it is! :-)
Mark
UPDATE:
Haven't got much luck yet :-( I deleted my sample on the HTML butterflies page, but I keep repeating this error over and over again, no matter which of the various tips I try:
Web page error details
Message: Object does not support this property or method Line: 3032 Char: 6 Code: 0 URI: file: /// D: /projects/JQuery1/jquery-1.3.2.js
It looks like there is a bug inside jQuery ... any ideas?
UPDATE 2:
I am starting to think that I am doing something fundamentally wrong here ... I assumed that in the document.ready () function I could hook up click events on the two radio buttons. Am I missing something? Do I need to create a function that I call from a click on the client? No matter what I try to do, even in my HTML editor (TopStyle 4) - this error "object does not support this property or method" keeps popping up - neither conveniently telling me that the object it is referencing and telling me which property or method is not supported ........
Or am I doing something wrong while trying to hook up two click event handler functions in document.ready () ??
A minified version of HTML is available at http://jquery.bluenose.ch/jquerydemo.html for anyone interested - I expected to be able to click on the "Do Limit" radio button and uncheck the three checkboxes below it - don't go: --(
source to share
I took a look at your example and ran into some syntax problems.
Your example:
$(document).ready(
$('#rbnDontLimit').click(function() {
$(".dcDetails :input").removeAttr('disabled');
}),
$("#rbnDoLimit").click(function() {
$('.dcDetails :input').attr('disabled', 'true');
}));
You were missing the () {"function after it was ready and the corresponding"} "at the end. The comma between the click events must be a semicolon. Remove the": input "from the jQuery selectors. This should work for you:
$(document).ready(function() {
$('#rbnDontLimit').click(function() {
$(".dcDetails").removeAttr('disabled');
});
$("#rbnDoLimit").click(function() {
$('.dcDetails').attr('disabled', true);
});
});
source to share
To disable a checkbox (any control) I use the following
$("#chkSomething").attr("disabled", "true")
To enable a checkbox (any control) I use the following
$("#chkSomething").removeAttr("disabled")
To answer your question,
<script type="text/javascript">
$(document).ready(
$("#<%= rbnDontLimit.ClientID %>").click(function() {
$("#<%= months12.ClientID %>").removeAttr("disabled");
$("#<%= months24.ClientID %>").removeAttr("disabled");
$("#<%= months36.ClientID %>").removeAttr("disabled");
},
$("#<%= rbnDoLimit.ClientID %>").click(function() {
$("#<%= months12.ClientID %>").attr('disabled','true');
$("#<%= months24.ClientID %>").attr('disabled','true');
$("#<%= months36.ClientID %>").attr('disabled','true');
});
</script>
source to share