Solved

jquery removeAttr("checked") - not resetting selectedindex

Posted on 2010-11-25
24
1,213 Views
Last Modified: 2012-05-10
hi,

i am using jquery on an asp.net 3.5 site.


i have 2 radio button lists

listA and listB

when the 3rd radio button in listA is checked - listB becomes enabled.

when the 3rd radio button in listA is checked - you must select an item in listB. (or you see an serverside - error message)

I am using an asp:customValidator   - which calls a serverside method

the method does the following:

public void ValidateListB(object o, ServerValidateEventArgs e)
{

      if (listA.SelectedIndex == 2)
      {
               
            if (listB.SelectedIndex == -1)
              {
                  e.IsValid = false;
              }
      }
}


Quite straightforward!

This works the first time round, but when i do the following:

1. I selected a radio button in listB, save it down to the database.
2/ Then select the 2nd radio button in listA (so listB becomes disabled/ and the checked attribute is removed)
3. Then reselect the 3rd radio button in listB (so listB becomes enabled again)
4. But i do not select anything in listB - so the customvalidator should see this and raise an error

But it does not raise an error because for some reason:

listB.SelectedIndex == 0  and not -1

so server side - listB still thinks that its 1st radio button is selected - despite the jquery removeAttr("checked")

How can i resolve this problem?

thanks
0
Comment
Question by:MrKevorkian
  • 12
  • 7
  • 5
24 Comments
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34212705
just checked the source - and even after removeAttr("checked")  -

this is still in the page -  checked="checked"
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34212720
how would the codebehind OR the source viewer understand you removed an html attribute with javascript??

The view-source would only show initial state. You need firebug to see what jQuery did

Instead set it to false
0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34212793
well presumably - the code behind figures out the selected index from the checked attribute in the html?

anyway, just looked in firebug and it the checked attribute is still there after the removeAttr("checked") is run.
0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34212890
my mistake - the checked attribute - IS removed by the removeAttr("checked").

however, when the page is posted back - the listB.SelectedIndex is still = 1.  not -1??


0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34212902
So uncheck it.

.attr('checked', false);
0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34212968
the removeAttr("checked") - does seem to be removing the checked attribute.


but when i post this back to server side - listB.selectedValue is still = to 1, when it should be = -1 (i.e nothing is selected). thats the problem.
i would have thought listB.SelectedValue - would see that there is no "checked" attribute on any of the radio buttons and show a -1.  
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34213317
maybe undefined is not handled
The correct way is to uncheck it
0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34216885
thanks.
i tried the checked, false - but when i post back - on the server side - the radio button still thinks it is selected?
It seems you can truly uncheck a radio button list - once you have checked it. - regardless of what you do with jquery - your last checked button will show up in the "SelectedValue" or "SelectedIndex".

So i have got no way of telling if everything has been unchecked or not.  
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34228161
Sounds very strange. I am afraid I do not do asp so I cannot help you further.
Perhaps delete this and re-ask it with the new information about the unchecking
0
 
LVL 6

Expert Comment

by:ventaur
ID: 34234025
Try resorting to the element's native checked property via jQuery's each method.

$('yourRadioSelector').each(function () {
  this.checked = false;
});

Open in new window

0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34240029
hi thanks for replying.

i tried this but still the selectedindex  server side is = 0  not = -1 (as it is the first time it is posted back with no radio selection).
I guess its a bug, you cant unselect a radio button list once you have checked one of them.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 175 total points
ID: 34240234
That is the nature of radios. Use a checkbox instead
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 6

Assisted Solution

by:ventaur
ventaur earned 175 total points
ID: 34240505
It does seem like a bug. That is not really the nature of radio buttons in standard HTML. The button is either checked or not and you can clear them all via JavaScript. This has to be an issue with ASP.NET server-side.
0
 
LVL 6

Expert Comment

by:ventaur
ID: 34240555
As a possible alternative, you could try detaching the radio button from the DOM, then reattaching it back.

var radio = $('yourselector');
var target = radio.prev();
radio.detach();
radio.insertAfter(target);

Open in new window

0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34240591
thanks i will give it a go
0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34246478
hi, my radio buttons are in a radiobutton list - so i am finding it hard to do this:

var radio = $('yourselector');

i tried doing a for each round my inputs -

 $('#mydivinput').each(function() {

          var target = $(this).prev()
                        $(this).detach();
                        $(this).insertAfter(target);
             });      

but  var target = $(this).prev() did not run - this object does not support this method.

do you have any ideas?

thanks
0
 
LVL 6

Expert Comment

by:ventaur
ID: 34248389
Your each is actually working on the single mydivinput element with that id. You'll want to get at the radios inside that element to try the detach out. Give this a go (assuming there is a div with id="mydivinput" that your RadioButtonList is within).

$('#mydivinput input:radio').each(function () {
  var $this = $(this);
  var $target = $(this).prev();
  $this.detach();
  $this.insertAfter($target);
});

Open in new window

0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34256338
hi,

i tried that new code but im still getting "object doesnt support this property" on the line

   $this.detach();
0
 
LVL 6

Expert Comment

by:ventaur
ID: 34257692
We'll give it one last shot:

$('#mydivinput input:radio').each(function () {
  var $radio = $(this);
  var $target = $radio.prev();
  $radio.detach();
  $radio.insertAfter($target);
});

Open in new window

0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34265721
Im still getting "this object does not support this method" on $radio.detach();

i give up!


0
 
LVL 6

Expert Comment

by:ventaur
ID: 34266469
What version of jQuery are you using currently?
0
 
LVL 1

Author Comment

by:MrKevorkian
ID: 34266791
1.3.2  
- do more recent versions still work with i.e 7?
0
 
LVL 6

Expert Comment

by:ventaur
ID: 34269898
Yes. The latest version still supports back to IE 6. The detach method was added in version 1.4 and that is why you are getting that error.

I'm not even sure detaching the elements from the DOM will work, so it may all be for nothing.
0
 
LVL 1

Author Closing Comment

by:MrKevorkian
ID: 34281505
thanks everyong for trying - at least i know it isnt going to work now.  it looks like checkboxes would be solution, only the user doesnt want these. so they are going to stay as they are for the time being.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now