SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Feb 22, 2008, 12:26 #1
- Join Date
- Jan 2005
- Location
- Baltimore, MD
- Posts
- 173
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
jQuery: Beginning question (didn't find answer elsewhere)
Hi,
Just started using jQuery this morning and love it. I would be shocked if this hasn't been asked before but I have Googled and searched for about an hour and haven't found anything.
I have a checkout system. I have a div for shipping information, and a checkbox above it that allows a user to specify in-store pickup. When you check the checkbox, the div with shipping information disappears. It works great and looks even better!
The functionality works exactly as it should -- my only problem is, the checkbox doesn't get checked!
Here's my code:
Code:$(document).ready(function(){ $("#CheckoutChurchPickup").toggle(function(){ $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast'); },function(){ $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast'); }); });
Thank you very much!
-
Feb 22, 2008, 12:36 #2
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
.attr('checked', true) perhaps? And are you sure you have the right ID on the input, and you're doing this after the dom has been loaded?
-
Feb 22, 2008, 12:56 #3
- Join Date
- Jan 2005
- Location
- Baltimore, MD
- Posts
- 173
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the reply!
I had tried that also, and it didn't work. I know I have the ID right and I'm doing it after the DOM loads because adding this:
Code:$("#CheckoutChurchPickup").attr('disabled', 'disabled');
However, replacing that line with this:
Code:$("#CheckoutChurchPickup").attr('checked', 'checked');
-
Feb 22, 2008, 13:39 #4
- Join Date
- Jan 2005
- Location
- Baltimore, MD
- Posts
- 173
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
BTW, I see you're from MD also. Enjoying the weather this week?
-
Feb 22, 2008, 13:54 #5
- Join Date
- Oct 2006
- Location
- Alexandria, VA
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm with SoulScratch on the .attr("checked",true)
Code:<html> <head> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript"> function toggleCheckboxes() { if($("#isChecked").attr("checked") == true) { $("#isChecked").attr("checked",false); $("#isNotChecked").attr("checked",true); } else { $("#isChecked").attr("checked",true); $("#isNotChecked").attr("checked",false); } } </script> </head> <body> Start Checked:<input type="checkbox" id="isChecked" value="100" checked> <br> Start Unchecked:<input type="checkbox"id="isNotChecked" value="200"> <br> <input type="button" onClick="toggleCheckboxes()" value="uncheck/check";> </body> </html>
-
Feb 22, 2008, 14:22 #6
- Join Date
- Jan 2005
- Location
- Baltimore, MD
- Posts
- 173
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That works with a different attribute --
Code:$("#CheckoutChurchPickup").attr("disabled",true);
Code:$("#CheckoutChurchPickup").attr("checked",true);
Is there anything that could be causing 'checked' to not be recognized?
I even extracted it from my site and put it in a test file just to make sure. Here is the full code:
Code:<html> <head> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h2>Shipping Information</h2> <script type="text/javascript"> $(document).ready(function(){ $("#CheckoutChurchPickup").toggle(function(){ $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast'); $("#CheckoutChurchPickup").attr("checked",true); },function(){ $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast'); }); }); </script> <p> <input type="checkbox" name="data[Checkout][church_pickup]" style="float: left;" id="CheckoutChurchPickup" /> <label for="CheckoutChurchPickup">I attend RCC and would like to pick my order up on Sunday morning</label> </p> <div id="shippingInformation"> <p>form was here...</p> </div> </body> </html>
I also thought it might be something with IE doing something crazy, but I get the same results in Firefox.
-
Feb 22, 2008, 15:26 #7
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
toggle: function() {
// Save reference to arguments for access in closure
var args = arguments;
return this.click(function(event) {
// Figure out which function to execute
this.lastToggle = 0 == this.lastToggle ? 1 : 0;
// Make sure that clicks stop
event.preventDefault();
// and execute the function
return args[this.lastToggle].apply( this, arguments ) || false;
});
},
-
Feb 22, 2008, 15:31 #8
- Join Date
- Oct 2006
- Location
- Alexandria, VA
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Actually the .attr("checked",true) is working.
Stick an alert box right after it and you can see the check mark
$("#CheckoutChurchPickup").attr("checked",true);
alert("pause");
It looks like when it exits out of the toggle function it's resetting to unchecked.
Avoiding the problem might be easier than solving it
Code:<script type="text/javascript"> $(document).ready(function(){ $("#CheckoutChurchPickup").click(function(){ if( $("#CheckoutChurchPickup").attr("checked")==true) { $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast'); } else { $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast'); } }); }); </script>
Last edited by sequill; Feb 22, 2008 at 15:35. Reason: formatting
-
Feb 22, 2008, 15:32 #9
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This is probably a very, very dirty fix that could probably be avoided by correctly using the right methods.. but i think i found a way to get it to work..
Code:$.fn.toggleTwo = function() { var args = arguments; return this.click(function(event) { this.lastToggle = 0 == this.lastToggle ? 1 : 0; // and execute the function return args[this.lastToggle].apply( this, arguments ); }); }
Code:$(document).ready(function(){ $('#CheckoutChurchPickup').toggleTwo(function() { $('#shippingInformation').animate({height:'hide', opacity:'hide'}, 'fast'); }, function() { $('#shippingInformation').animate({height:'show', opacity:'show'}, 'fast'); }); });
-
Feb 22, 2008, 16:03 #10
- Join Date
- Jan 2005
- Location
- Baltimore, MD
- Posts
- 173
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sequill, I got it working with your code. Thank you so much!
And SoulScratch, that's a good workaround -- thank you for your help also.
Bookmarks