Since you're open to the idéa of moving the code to the client instead. Remove the OnSelectedIndexChange on your radiobutton to skip the postback. You should be able to do something like this instead:
// Put this in a script-tag.
$(document).ready(function(){
$('#<%=this.ClientID%>').change(function(){
var radioBtnId = this.id;
radconfirm('Are you sure you want to take leave?', function(arg){
if (arg == true) {
alert("User has selected Leave.")
}
else {
var rdlUser = docment.getElementById(radioBtnId);
var radioButtons = rdlUser.getElementsByTagName('input');
radioButtons[1].checked = true;
}
}
});
});
})
Below is a snippet that uses id's without server code.
$('#radio1').change(function(e){
var radioBtnId = this.id;
var $this = $(this);
radconfirm('Are you sure you want to take leave?', function(arg){
// Not really sure what you want to do here...
if (arg == true) {
alert("User has selected Leave.")
}
else {
// Select "Available instead".
$this.siblings('input').prop('checked',true);
// Unselect "Leave"
// With javascript
var rdlUser = document.getElementById(radioBtnId);
rdlUser.checked = false;
// With jQuery
$this.prop('checked', false);
}
});
});
// Mocked for now...
function radconfirm(value, callback){
var result = confirm(value);
callback(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radios" id="radio1" value="Leave"/> <label for="radio1" >Leave</label>
<input type="radio" name="radios" id="radio2" value="Available"/> <label for="radio2" >Available</label>
UPDATE:
I've updated the script to fit the new HTML. Here we bind the event to the monday control instead. Note that you might want to set a CssClass on your control instead of using ID. Then you can use the same script for all your controls (MyMonday, MyTuesday etc). It would look something like this:
<asp:MyControl CssClass="day-control" runat="server" id="MyMondayControl" />
If so, you should be able to change the script below to start with:
$('.day-control input').change....
Otherwise you need to use the clientID.
$('#<% MyMondayControl.ClientID %> input').change ....
Don't know why onclick="javascript:setTimeout" is getting added for
the HTML
That's because you are using server controls with AutoPostBack for your radiobuttons. Remove that and you should be fine. Read more about it in this question.
In the snippet below I've taken the liberty to assign to CSS-classes to the different radiobuttons. One will determine when to run the "check if leave"-script. And one is for knowing which radiobutton to select if the user chooses to stay. The css classes are leave-check and select-if-not-leave. You can add them with the CssClass property.
You might also want to check what HTML is rendered. The HTML you provided is using table with tr, so just make sure that the css-class is actually rendered on the input. Otherwise you will need to adjust the selector.
// Change to the id of the table instead. Something like:
// $('#<% MyMondayControl.ClientID %> input').change ....
// Here I just the ID generated in the HTML, but you shouldn't use that one.
$('#ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser span.leave input').change(function(e){
e.preventDefault();
var radioBtnId = this.id;
var $this = $(this);
radconfirm('Are you sure you want to take leave?', function(arg){
// Not really sure what you want to do here...
if (arg == true) {
alert("User has selected Leave.")
}
else {
// Select "Available instead".
// Here we use the css class "select-if-not-leave" to find the element which should be selected if the user decides to stay.
var $parent = $this.closest('table') // Get the table.
// Select the available input.
$parent.find('span.available input').prop('checked',true);
// Unselect "Leave" With javascript
var rdlUser = document.getElementById(radioBtnId);
rdlUser.checked = false;
// Unselect "Leave" With jQuery (You only need one)
$this.prop('checked', false);
}
});
});
// Mocked for now...
function radconfirm(value, callback){
var result = confirm(value);
callback(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser">
<tr>
<tr>
<td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT01" disabled="disabled" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0">Not Applicable</label></span></td>
<td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT02" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1">Not Available</label></span></td>
</tr><tr>
<td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT03"/><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2">Leave</label></span></td>
</tr><tr>
<td><span class="available"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3" class="Available" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT04" checked="checked" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3">Available</label></span></td>
</tr>
</table>
UPDATE 2:
- When I write jQuery script in Day UserControl, then I can use only .leave and .available classes but not .day-control. 2. When I write
the jQuery script in UserControl where MyMonday, MyTuesday,...
MyFriday are declared, then I can use only .day-control but not .leave
and .available classes. @smoksnes Please address this ambiguity.
Where you put you script does not matter, as long as the script looks the same. Preferably, you should put it in a js-file together with your other scripts. Here's a little info how the script and jQuery selectors works:
If you use .day-control span.available input it will first look for a some element with the css class day-control, and a element that is a span WITH css-class available, and lastly an input under the span. If there are several elements that fulfills the criterias I just mentioned it will return all these elements. This script should only be rendered once, since it will capture the events for all your DayUserControl, since they all share the same css class day-control.
However, if you use #<%=this.ClientID%> span.leave input it will start by looking for the element with the specific id (this.ClientID) and there should be only one of those. That is why you need to render that particular script once for every DayUserControl, since it will be unique for that specific user control.
