Thursday, December 9, 2010

How to show the icon of your site in the browser tab

Add the following code in the head tag of your page

<link rel="icon" type="image/png" href="Image/logo.jpg" />

If using master pages then write this in the head tag of master page

Thursday, November 25, 2010

allowing only one radio button to be selected from all the radio buttons in Item template of Data List

I recently faced a problem in which I wanted that a user should be able to check only one Radiobutton from the RadioButton that was in the ItemTemplate of a DataList.I tried to use GroupName property of radiobutton but that didnot work because when DataList is rendered unique groupname is generated for each radiobutton which means that all the radiobuttons will have different GroupName and you can select any number of radiobuttons.I searched on the net and the answers were not satisfying.So i decided to find a workaround for this using jquery.For this all you have to do is instead of asp:RadioButton use <input type="radio" id="rd" name="rdGroup" /> , Remember to exclude runat="server" from the input tag,if you don't do so then the groupname will again be unique for each radio button

Tuesday, November 16, 2010

Enabling/Disabling asp validators with jquery/Javascript

Today I am going to discuss a situation in which we need the asp:validators to be enabled or disabled by using jquery/javascript.

-------------------------------------------------------------------------------------------------
Asp.net code
<asp:RadioButtonList ID="RblImage" runat="server">
                  <asp:ListItem Value="1">Keep the current Image</asp:ListItem>
                  <asp:ListItem Value="2">Upload new image</asp:ListItem>
                  </asp:RadioButtonList>

<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="btnLogo" runat="server" Text="Update Logo"
                          CssClass="blue_btn_cal" onclick="btnLogo_Click" />

<asp:RequiredFieldValidator ID="reqfile" runat="server" ControlToValidate="FileUpload1"
                  ErrorMessage=" Image required" Display="Dynamic"></asp:RequiredFieldValidator>


 I want the required field validator to be enabled only when I select the second option of the radio button list.
----------------------------------------------------------------------------------------------------
Jquery code

$(document).ready(function() {
//for disabling the validators on page load
         var name1 = $('#<%=RblImage.ClientID %> input[type=radio]:checked').val();
         if (name1 != 2) {
             ValidatorEnable(document.getElementById('<%= reqfile.ClientID %>'), false);
         }
         else {
            
             ValidatorEnable(document.getElementById('<%= reqfile.ClientID %>'), true);
         }
         //code for page load ends here
      
$('#<%=btnLogo.ClientID %>').click(function() {
var name = $('#<%=RblImage.ClientID %> input[type=radio]:checked').val();
             if (name == 2) {
        ValidatorEnable(document.getElementById('<%= reqfile.ClientID %>'), true);
}           
else {
                 ValidatorEnable(document.getElementById('<%= reqfile.ClientID %>'), false);
             }

         });
       
     });
------------------------------------------------------------------------------------------------------------
 Here we have checked the value of the radiobuttonlist on button click and then enabled or disabled the validator. On page load we have to check the selected value of the radiobuttonlist and then enable/disable the
valiator because when we click on the button the page will postback and then the validator will be set its initial state which is enabled.

Wednesday, November 10, 2010

Radiobutton List with jquery with callback also explained.

In my earlier post  fetching value from radiobutton list ,I explained how to fetch value from radiobuttonlist using jquery.I this blog we will see how we can check a particular value of a radiobuttonlist using jquery.In addition we will also use callback in this example

Here we have two radiobuttonlists List1 and List2, on checking no option of first radio buttonlist the div containing the radiobuttonlist is hidden and the div containing the second radiobuttonlist is shown.When we check the no option of second radiobuttonlist second div is hidden and first div is made visible.

The purpose of using callback is to make sure that first the hide effect is completed and then the show effect starts.This is code  for callback
$('#div1').hide('slow', function() {
                    $('#div2').show('slow');
                   });
 This makes sure that show effect will start after the hide effect is copmleted.



I wanted to make sure that every time a radiobuttonlist shows its first option should be checked for that I have used this piece of code
$('#<%=List2.ClientID %>').find("input[value='1']").attr('checked', 'checked');
it checks the value specified.

 Below is the complete code.



----------------------------------------------------------------------------------------------------
asp.net code

<div id="div1">
    This div contains first radio button list<br />
    <asp:RadioButtonList ID="List1" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Text="yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="no" Value="2"></asp:ListItem>
    </asp:RadioButtonList>
    </div>
    <div id="div2">
    This div contains the second radio buttyon list.<br />
    <asp:RadioButtonList ID="List2" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Text="yes2" Value="1"></asp:ListItem>
    <asp:ListItem Text="no2" Value="2"></asp:ListItem>
    </asp:RadioButtonList>
    </div>
--------------------------------------------------------------------------------------------------------
Jquery code

$(document).ready(function() {
            $('#div2').hide();
            $(('#<%=List1.ClientID %>')).click(function() {
                var value1 = $('#<%=List1.ClientID %> input[type=radio]:checked').val();
                if (value1 == 2) {
                    $('#div1').hide('slow', function() {
                    $('#div2').show('slow');
                    $('#<%=List2.ClientID %>').find("input[value='1']").attr('checked', 'checked');
                    })
                }
            });
            $(('#<%=List2.ClientID %>')).click(function() {
                var value2 = $('#<%=List2.ClientID %> input[type=radio]:checked').val();
                if (value2 == 2) {
                    $('#div2').hide('slow', function() {
                        $('#div1').show('slow');
                        $('#<%=List1.ClientID %>').find("input[value='1']").attr('checked', 'checked');
                    });
                }
            });
        });
----------------------------------------------------------------------------------------------------

Monday, November 1, 2010

Fetching value of radiobuttonlist using jquery

Mostly situations arise in which we want to hide or show something based on the value selected from a radiobuttonlist.Using server side code for this purpose is not a good option as it causes postback and is slow.
Lets see how this can be done using jquery.
__________________________________________________________________________________
This is the script:
 <script type="text/javascript">
        $(document).ready(function() {
 $(('#<%=RdlTest.ClientID %>')).click(function() {
var name = $('#<%=RdlTest.ClientID %> input[type=radio]:checked').val();
 if (name == 1) {
 $('#test').hide('slow');
 }
 else if (name == 2) {
  $('#test').show('slow');
 }
  });
  });
    </script>
This is the asp.net code:
<asp:RadioButtonList ID="RdlTest" runat="server">
    <asp:ListItem Value="1" Text="first"></asp:ListItem>
    <asp:ListItem Value="2" Text="second"></asp:ListItem>
    </asp:RadioButtonList>

     <div id="test">
     This div will hide if you select first option<br />
     and show if you if you select second option.
     </div>
__________________________________________________________________________________
I have tested this code and it works for me. Hope that it works for you too.