It struck me the other day that it is so easy to use AJAX with ASP.NET it can make you lazy. I was working on a project where I had some radio boxes and based in the selection of the radio boxes another fields was displayed or hidden. I didn't want the page to post back so initially it though I'll just pop it in a AJAX UpdatePanel and write some code to show or hide the fields after the selection is made on the RadioButtonList.
I paused for a moment and thought for a moment, its all good, its easy so why not.
I'm being lazy, I really shouldn't do a post back at all. I should write a bit of JavaScript to achieve this client side as the post back only serves to show or hide the fields.
So in the project I'm already using JQuery so its my first choice to implement my snippet of functionality.
Implementing a client side action for a RadioButtonList with JQuery
I wanted to take an action based on the selection of only one of the radio buttons. I wanted to find the selected index of the RadioButtonList. I cam up with the The functionality involved a RadioButtonList with the class 'Options' applied, which was only to save me have to get the ClientID property. If the third item is selected the FieldPanel div is shown otherwise it is hidden.
| function setPanelVis(){ |
| $(".Options input:radio").each(function(index) { |
| if($(this).val()==$(".Options input:radio:checked").val()){ |
| if(index==2){ |
| $("div.FieldPanel").show("fast"); |
| } |
| else{ |
| $("div.FieldPanel").hide("fast"); |
| $("div.FieldPanel input").val(""); |
| } |
| } |
| }); |
| } |
| //bind to radio button click |
| $(document).ready(function() { |
| setPanelVis(); |
| $(".Options input:radio").click(setPanelVis); |
| }); |
So it works well and is all client side without any post backs.