ASP.NET radiobuttonlist onclientclick - asp.net

I've noticed there is no OnClientClick() property for the radiobuttonlist in the ASP.NET control set. Is this a purposeful omissiong on Microsoft's part?
Anyway, I've tried to add OnClick to the radio button list like so:
For Each li As ListItem In rblSearch.Items
li.Attributes.Add("OnClick", "javascript:alert('jon');")
Next
But alas, it doesn't work. I've even checked the source in firebug, and there is no javascript shown in the radiobuttonlist. Does anyone know how to get this very simple thing working? I'm using ASP.NET control adpaters so don't know if that has anything to do with it.
(I wish asp.net/javascript would just work out the box!!!)

I found I could just add a onclick attribute to the RadioButtonList and it would fire the javascript client side as expected.
<asp:RadioButtonList ID="RadioButtonList1" runat="server" onclick="alert('RadioButtonListSelectChange');">
<asp:ListItem Text="One" Value="1"/>
<asp:ListItem Text="Two" Value="2"/>
</asp:RadioButtonList>
You could then write a client script that could determine the currently selected list item.

The onclick attribute function very good in ListItem object. Try in this way:
li.Attributes.Add("onclick", "javascript:showDiv()")
That function to me.

Not really an answer but a few weird observations on the other suggestions. I'll preface this by saying this is a RadioButtonList in an ASP.Net 4.0 app with RepeatDirection=Vertical
1) Adding onclick='myJsFunction(this);' attributes to the ListItems worked fine for me except after a different item on the page causes a post back (a button action for example), the attributes on the ListItems don't get rendered in the result of the postback. They get rendered to start, but not when there's a button action. Go figure.
2) Apparently our legacy code was relying on some murky, less than canonical behavior on the RadioButtonList/ListItem that gets very muddy on postback. If you put an id attribute on a ListItem, ASP.Net 2.0+ will add a span tag around the radio button and put your id value there. If you add an onclick attribute on it, that will go on the radio button - at least when Page.IsPostBack == false.
<asp:RadioButtonList ID="proceedChoice" runat="server" RepeatDirection="Vertical">
<asp:ListItem id="Close_Case_Y" Value="Y" onclick="SelectResolveType(this);" Text="I want to close this case." runat="server" />
<asp:ListItem id="Close_Case_N" Value="N" onclick="SelectResolveType(this);" Text="I want to cancel this and start over." runat="server" />
</asp:RadioButtonList>
renders as
<table id="...proceedChoice" border="0">
<tr>
<td><span id="Close_Case_Y"><input id="..._proceedChoice_0" type="radio" value="Y" onclick="SelectResolveType(this);" /><label for="..._proceedChoice_0">I want to close this case.</label></span></td>
</tr><tr>
<td><span id="Close_Case_N"><input id="..._proceedChoice_1" type="radio" value="N" onclick="SelectResolveType(this);" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></span></td>
</tr>
</table>
After a postback from some other button, though the same template renders as
<table id="...proceedChoice" border="0">
<tr>
<td><input id="..._proceedChoice_0" type="radio" value="Y" /><label for="..._proceedChoice_0">I want to close this case.</label></td>
</tr><tr>
<td><input id="..._proceedChoice_1" type="radio" value="N" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></td>
</tr>
</table>
But here's where it gets really weird: if you tack on other attributes to ListItem other than id and onclick, just those attributes get preserved. For example if I add hidden="hidden" to one of the ListItems, it gets rendered like this after postback
<table id="...proceedChoice" border="0">
<tr>
<td><span hidden="hidden"><input id="..._proceedChoice_0" type="radio" value="Y" /><label for="..._proceedChoice_0">I want to close this case.</label></span></td>
</tr><tr>
<td><input id="..._proceedChoice_1" type="radio" value="N" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></td>
</tr>
</table>

Because it's a list control, there isn't a OnClientClick event. Either use a postback (SelectedIndexChange) or write javascript to grab the click for each radio button.

foreach (PlaceType t in query.ToList())
{
ListItem li = new ListItem(#"<img src=""" + t.ImageRelativePath + #"""/><br/>" + t.PlaceTypeText, t.PlaceTypeID.ToString());
li.Attributes.Add("onclick", "javascript:placeTypeChange('" + t.ImageRelativePath + "')");
rblPlaceTypes.Items.Add(li);
}
So in there I'm
a) Iterating over the results of a EF query.
b) Creating a new list item, and adding it to my radio button list (rblPlaceTypes).
c) The constructor is putting an image in so that displays.
d) the li.Attributs.Add is putting the javascript wireup in.

Related

Checkbox list Style

My listbox is appearing differently in Chrome, Firefox and IE.
How can I make them look alike. I want 1px border
<asp:CheckBoxList ID="cbStatus" runat="server" RepeatColumns="4">
<asp:ListItem Text="Approved" Value="A"></asp:ListItem>
<asp:ListItem Text="Declined" Value="D"></asp:ListItem>
</asp:CheckBoxList>
Checkbox is one of those elements that will always render differently by different browsers. If you want the look to be unified I suggest one of jQuery plugins that turns ordinary checkboxes into styled controls.
For example your checkboxlist renders this HTML to browser:
<table id="cbStatus" border="0">
<tr>
<td><input id="cbStatus_0" type="checkbox" name="cbStatus$0" /><label for="cbStatus_0">Approved</label></td>
<td><input id="cbStatus_1" type="checkbox" name="cbStatus$1" /><label for="cbStatus_1">Approved w/ Requirements</label></td>
<td><input id="cbStatus_2" type="checkbox" name="cbStatus$2" /><label for="cbStatus_2">Declined</label></td><td></td>
</tr>
</table>
Using PrettyCheckable plugin you can issue a single command to style it::
$('input[type="checkbox"]').prettyCheckable();
And here is what it looks like after: http://jsfiddle.net/WuFg9/
You can adjust the styles to whatever you want, borders, colors etc. etc.

.NET/html, element does not exist error when selecting dropdown.ClientID

On button click I want to get the value of a dropdown but for somereason when I go into the code it fails with error 'Exdd' does not exist in the current context. The ExTypeDD is in my listview as a dropdown and I'm just trying to get the value from it. The server side is generating this code and not my browser.
$('.Updt')
.click(function() {
var parent = $(this).parent().prev();
var TypeNode = parent.children("#<%=Exdd.ClientID %>").first();
<asp:ListView runat="server" id="ListView1" >
<LayoutTemplate>
<table id="tablesorter" style="border:solid 1px black;width:55%;">
<thead>
<tr>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
<tfoot>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<select id="Exdd"
class="Nbr1" style="width: 90px" >
<option value=""><%# Eval("Type")%></option>
<option value="0">Home</option></select>
</td>
<td>
<input type="button" id="btn_update" class="Updt" value="Update" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
You are in a ListView. You have as ExTypeDD as you have rows.
So you can not reference ExTypeDD successfully outside of the item template (there are more than one)
You may try ( after wrapping that up in a $(document).ready )
$('.Updt')
.click(function() {
var tr = $(this).closest('tr');
var TypeNode = tr.find("select.Nbr1").first();
//...
});
This is because you are trying to access an HTML element on the server side as a server side control. You could make your select element into a server side control by simply adding runat="server" to it like such:
<select id="ExTypeDD" runat="server" class="Nbr1" style="width:90px">
But after that you would still have the issue that this control, although accessible on the server side now, it does not have the id of ExTypeDD because it is dynamically created in the ItemTemplate of your ListView which generates a unique ID value for each newly created control . You can verify this by viewing source on the page rendered in the browser and checking the ID value on the select element.
To do what you're trying to do on the server side you would need to do something along the lines of this:
Add an onItemCreated event handler to your ListView:
<asp:ListView runat="server" id="ListView1" onItemCreated="ListView1ItemCreated">
Replace this:
<input type="button" id="btn_update" class="Updt" value="Update" />
With this:
<asp:button id="btn_update" text="Update" runat="server" />
Add the event handler to the code behind:
protected void ListView1ItemCreated(object sender, ListViewItemEventArgs e){
var myselect = (HtmlSelect)e.Item.FindControl("ExTypeDD");
var mybutton = (Button)e.Item.FindControl("btn_update");
mybutton.OnSubmit += (o,e) => {
// do something with myselect selected value
var selectedvalue = myselect.Value;
};
}
NOTE: the above code is not tested and probably won't compile, you will need to make necessary corrections, but it should give you the idea for a way to solve your problem. Hope it helps.

Popup with 3 buttons - Onclick event problem AJAX , ASP.net project

For Save button, I have a popup which has 3 buttons inside., Yes, No and Cancel. Yes should call a function and update 2 tables in the database and No should update just one table and cancel should not make any changes in the page.
Used code for popup
<table id="pnlPopupMerchantUpdate" runat="server" style="display:none">
<tr>
<td>
<asp:Panel runat="server" CssClass="modalPopup">
<table width="350" height="80" class="warningPopup">
<tr>
<td>
<!-- <img src="images/warning_blue.gif" alt="Warning" /> -->
</td>
<td colspan="2" align="left" style="padding-left: 75px; padding-top: 10px;">
Do you wish to update the Location Information as well.
</td>
</tr>
<tr>
<td align="center" colspan="4">
<input id="btnYesMerchant" type="button" value="Yes" class="popupButton" causesvalidation="true" onclick="btnYessave_Click"/>
<input id="btnNoMerchant" type="button" value="No" class="popupButton" causesvalidation="true" onclick="btnNosave_Click" />
<input id="btnCancel" type="button" value="Cancel" class="popupButton"/>
</tr>
</table>
</asp:Panel>
</td>
</tr>
Here if the user clicks Yes it has to update Location info along with COmpany Info. If No is clicked, just Company Info. Cancel will not modify anything. There is a function UpdateMerchantInfo() which has to modify according to what is called, i mean yes or No.
I have used Onclick events for both Yes and NO but the problem here is, Yes should call its onclick event before getting into UpdatemerchantInfo(), the same way with NO.
In UpdateMerchantInfo(), i want to use if loop and do accordingly.
I hope i am clear!!
Thank you much!
You can use popup control extender in ajax. Will find more details Here
It has sufficient tags to suport your requirements.
You have to just create a contol(using tags) and in popup controlid set id of popup. Using this method you can define different eventhandlers.

ASP.NET Dynamic Radiobutton - How to add validation

At the moment I have something like this
<asp:Repeater ID="rptEventsList" DataSourceID="srcQuestionList" runat="server">
<ItemTemplate>
<td><span><%# Eval("orderBy").ToString()%>)</span></td>
<td><%# Eval("question").ToString()%></td>
<td><asp:RadioButton ID="RadioButton1" runat="server" /></td>
<td><input name="question<%# Eval("orderBy").ToString()%>" type="radio" id="True" value="True" class="styled" /></td>
<td><input name="question<%# Eval("orderBy").ToString()%>" type="radio" id="False" value="False" class="styled" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
And in the code behind I capture the values as Request.Form("question1") for example and this all works fine.
Now I am wondering how to add validation to this, I think I have to apply changes to a RadioButton control but I can't see how I could add my dynamic RadioButton names in there with my id from stored procedure.
Also I would like to add the validation to the top of the screen as a validation summary.
Look into Validation Server Controls.

Getting value of Radio buttons with Master Pages

I have an aspx page that uses a master page. On this page I have a group of radio buttons. I need to get at the checked property for each of the elements in the radio button group in javascript. Before the page was converted to use a master page, the following javascript code worked just fine:
if((!f.rblRegUseVehicles[0].checked) && (!f.rblRegUseVehicles[1].checked))
{
isValid = "false";
}
f is the reference to the form. This worked just fine.
When the page was chanded to use a Master Page, I changed the javascript to the following:
if((!f.<%=rblRegUseVehicles.ClientID%>[0].checked) && (!f.<%=rblRegUseVehicles.ClientID%>[1].checked))
{
isValid = "false";
}
Now, the javascript is failing because it can't find the element. In the "View Source" I have elements with the name:
<input id="ctl00_cphContent_rblRegUseVehicles_0" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="Yes" />
<input id="ctl00_cphContent_rblRegUseVehicles_1" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="No" />
The only code that works is
document.<%=Form.ClientID%>.<%=rblRegUseVehicles.ClientID%>_0.checked
I want the javascript to reference the array like before the page was converted to use a Master Page. How can I do that?
This is a part of ASP.NET that has always been difficult. You need to have static javascript that references dynamically created element ids!
This is how I have always solved the problem:
Wrap your RadioButtonList in a div or p or whatever you want:
<div id="yourId">
<asp:RadioButtonList id="radiolist1" runat="server">
<!-- ... -->
</asp:RadioButtonList>
</div>
Which renders to something like this:
<div id="yourId">
<table id="radiolist1" border="0">
<tr>
<td>
<input id="radiolist1_0" type="radio" name="radiolist1" value="Item 1" checked="checked" />
<label for="radiolist1_0">Item 1</label>
</td>
</tr>
<tr>
<td>
<input id="radiolist1_1" type="radio" name="radiolist1" value="Item 2" />
<label for="radiolist1_1">Item 2</label>
</td>
</tr>
</table>
</div>
And this would allow you to have a static javascript function that targets yourId which doesn't get runat="server". Then your javascript would look something like this:
var rbl = document.getElementById("yourId");
isValid = (!rbl.getElementsByTagName("input")[0].checked
&& !rbl.getElementsByTagName("input")[1].checked);
If you want to explore the idea of using jQuery rather than straight javascript, this should do the trick for you.
if ( $('input[id*=rblRegUseVehicles]:checked').length < 0 ) isValid = "false";
The selector gets all checked radiobuttons who's id contains 'rblRegUseVehicles'.
Edit
If you want to stick with your original script,using UniqueID rather than ClientID may work
if((!f.<%=rblRegUseVehicles.UniqueID%>[0].checked) && (!f.<%=rblRegUseVehicles.UniqueID%>[1].checked))
{
isValid = "false";
}

Resources