We Keep Coding

RadioButtonList won't change after doPostBack - ASP.NET JS C#

I have a radioButtonList inside a Panel. The panel uses UpdatePanel to update its panel.
<asp:UpdatePanel ID="upnlTeacherDismissal" runat="server" UpdateMode="Conditional" OnLoad="tmrRefreshTeacher_OnTick">
<asp:Panel ID="pnlDismissalTeacher" runat="server"; color:White; width:100%;">
<asp:RadioButtonList ID="rbtnStatusDismissal" AutoPostBack="true"
runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="rbtnStatusDismissal_OnSelectedIndexChanged" >
<asp:ListItem ID="id1" Text="In Class" Value="1" />
<asp:ListItem ID="id2" Text="Dismiss" Value="4" />
<asp:ListItem ID="id3" Text="Field Trip" Value="5" />
</asp:RadioButtonList>
The updatepanel refreshes every 5 seconds which is trigerred by Javascript function (I know there's timer from System.Class.UI but for some reason I have to use JS function). Here is the refresh function:
function refresh() {
//update teacher panel
__doPostBack('<%=upnlTeacherDismissal.UniqueID%>', '');
}
setInterval(refresh, 5000);
When doPostBack, on behind code, I want to set the radio button value to the updated value from database but there's no any change from the UI (radiobutton value is still 1). The program will execute this function every 5 seconds (not from rbtnStatusDismissal_OnSelectedIndexChanged).
protected void tmrRefreshTeacher_OnTick(object sender, EventArgs e)
{
//... few lines to check the database if table changes
rbtnStatusDismissal.SelectedValue = (int)data.statusID;
//let's say (int)data.statusID equals 5
upnlTeacherDismissal.Update();
}
I've tried to debug and see that .SelectedValue has been set to the value of the data.statusID (let's say 5). But the radio button's value in UI still equals 1 (instead of 5).
What's wrong and what should I do?

its work perfectly for me you are missing something i edited and replace that
<asp:UpdatePanel ID="upnlTeacherDismissal" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Panel ID="pnlDismissalTeacher" runat="server" style="color:White; width:100%;">
<asp:RadioButtonList ID="rbtnStatusDismissal" AutoPostBack="true" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="rbtnStatusDismissal_OnSelectedIndexChanged">
<asp:ListItem ID="id1" Text="In Class" Value="1" />
<asp:ListItem ID="id2" Text="Dismiss" Value="4" />
<asp:ListItem ID="id3" Text="Field Trip" Value="5" />
</asp:RadioButtonList>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
on server side
protected void rbtnStatusDismissal_OnSelectedIndexChanged(object sender, EventArgs e)
{
rbtnStatusDismissal.SelectedValue = "5";
upnlTeacherDismissal.Update();
}
and this js function
<script type="text/javascript">
function refresh() {
//update teacher panel
__doPostBack('<%=upnlTeacherDismissal.UniqueID%>', '');
}
setInterval(refresh, 5000);
</script>
if you have any question and will not get answer then ask in comments.

How to show-or-hide image loader in the row that button clicked on it in jquery?

I have a grid view with update panel and I set an image loader when the post back occur, But when I click on one button in for example row 5, all of loader display inline,but i just need to show the exactly image loader near my button that i click on it,How can I do that in j query or java script?
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//$(".load").show();
$('.btn').live("click", function () {
//$('tr [type="checkbox"]:checked').parent().parent().each(function () {
//if ($(this).find('input[id*="txtSalaryHead"]').length > 0) {
//alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
//}
$(".load").show();
});
//});
}
function EndRequestHandler(sender, args) {
$(".load").hide();
}
</script>
and this my code:
<asp:Panel runat="server" ID="pnl1">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="Label6" runat="server" Font-Bold="True" ForeColor="#D53B22"
Text="تعداد : " Width="42px"></asp:Label>
<asp:DropDownList ID="ddl_no" runat="server" CssClass="ddlno">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
<asp:ListItem Value="5"></asp:ListItem>
<asp:ListItem Value="6"></asp:ListItem>
<asp:ListItem Value="7"></asp:ListItem>
<asp:ListItem Value="8"></asp:ListItem>
<asp:ListItem Value="9"></asp:ListItem>
<asp:ListItem Value="10"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btn_addBasket" runat="server" CssClass="btn" Text="اضافه به سبد" OnClick="btn_addBasket_Click" />
<img src="images/ajax-loader.gif" class="load" style="display:none;"/>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//$(".load").show();
$('.btn').live("click", function () {
//$('tr [type="checkbox"]:checked').parent().parent().each(function () {
//if ($(this).find('input[id*="txtSalaryHead"]').length > 0) {
//alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
//}
$(".load").show();
});
//});
}
function EndRequestHandler(sender, args) {
$(".load").hide();
}
</script>
</asp:Panel>
this code in my grid view template and i want show img with id=loader when my button(id=btn_addbasket) click

I can't be more specific without seeing your markup, but in general it looks like something like this is happening:
<div>
<div>
<span class="load">something</span>
<button class="btn">click here</button>
</div>
<div>
<span class="load">something</span>
<button class="btn">click here</button>
</div>
<div>
<span class="load">something</span>
<button class="btn">click here</button>
</div>
</div>
So in your JavaScript code, when you reference $('.load'), you're referencing every element with that class. But you only want to reference the nearest element to the button that was clicked. Perhaps instead of this:
$(".load").show();
Try something more like this:
$(this).closest('div').find('.load').show();
Again, without seeing your markup, I can't be specific. This is a general concept, not code to be copied/pasted to solve your problem. But what this is essentially doing is:
Referencing the button which was clicked: $(this)
Referencing the parent div (or whatever element you use) to that button: $(this).closest('div')
Referencing children of that parent with the class load: $(this).closest('div').find('.load')
This way only the elements of class load which share that common parent element with the specific button (I'm guessing there should be only one for each button) are referenced when calling show().

open a new window on click and without page being postback

i have a page that has a grid with rows of data and it has url hidden in each row n when a row is clicked it opens new tabed window and the parent page still stays open with the grid data. i want to have a button that does the same . my aspx is
<script type="text/javascript" id="igClientScript">
function NavigateOnClick(sender, eventArgs) {
try {
var row = eventArgs.get_item().get_row().get_index();
var url = sender.get_rows().get_row(row).get_cell(0).get_text();
window.open(url);
}
catch (e) {
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Entity"></asp:Label>
<asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Select Entity</asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" ID="EntityName"></asp:Label>
<asp:Button ID="newEntity" runat="server" Visible="false" OnClick="newEntity_Click" OnClientClick="aspnetForm.target ='_blank';" />
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>
<ig:WebDataGrid ID="EntityGrid" runat="server" Width="100%" Height="50%" StyleSetName="Claymation" >
<Columns>
</Columns>
<ClientEvents Click="NavigateOnClick" />
</ig:WebDataGrid>
</div>
I want something like window.open =(entity,_newtab) without doing a page post back how can i get this?

Just use
window.open(url, 'random_name');
Refer this: http://www.w3schools.com/jsref/met_win_open.asp

Add an attribute to your button:
target="_blank"
button.attributes.add("target","_blank");

here is what worked part of my problem was that the url is dynamic i created a label that is updated on dropdown selection and pass the label text while creating the url instead of asp button went with html button function opentab(sender, eventArgs) {
try {
var name = document.getElementById('EntityName');
var url = name.textContent;
window.open(url+"Edit.aspx");
}catch(e){
}
}which wont cause a postback

handle dropdownlist selected index in javascript

i have a drop downlist. When Selected Index changes I wanted to handle it in javascript. So, as starting step , I tried to print the value of list item text in a textbox through javascript. But could not accomplish it successfully. Here is the dropdownlist:
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
AppendDataBoundItems="True" TabIndex="3" AutoPostBack="True"
OnSelectedIndexChanged = "PlaceHoldersDropDownList_SelectedIndexChanged" >
<asp:ListItem Value="">Select</asp:ListItem>
<asp:ListItem Value="ContactName">[Contact Name]</asp:ListItem>
<asp:ListItem Value="ProductName">[Product Name]</asp:ListItem>
<asp:ListItem Value="ProductShortName">[Product Short Name]</asp:ListItem>
<asp:ListItem Value="CurrentTime">[Current Time]</asp:ListItem>
<asp:ListItem Value="EventStartTime">[Event Start Time]</asp:ListItem>
<asp:ListItem Value="EventStopTime">[Event Stop Time]</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="tb" runat="server"></asp:TextBox>
Here is the C# code
protected void PlaceHoldersDropDownList_SelectedIndexChanged(object sender,
EventArgs e)
{
var text = PlaceHoldersDropDownList.SelectedItem.Text;
string x = text;
PlaceHoldersDropDownList.Attributes.Add("onchange", "javscript:PasteTextInEditor
('"+text+"')");
}
Here is the javascript
function PasteTextInEditor(text) {
var x = document.getElementById("<%= tb.ClientID %>");
x.value = text; }
Can you please let me know the mistake I've been doing?

first you have to set AutoPostBack to false to handle it in client side(javascript) and you don't need to add onchange event programatically, you can just write it in the <asp:DrobDownList> something like that
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
AppendDataBoundItems="True" TabIndex="3" AutoPostBack="false"
onchange="PasteTextInEditor()">
and the PasteTextInEditor method will become
function PasteTextInEditor() {
var text = $("#<%= PlaceHoldersDropDownList.ClientID %> option:selected").text();
$("#<%= tb.ClientID %>").val(text);
}
note I am using jquery syntax

Using jQuery you can make the following:
1- turn off AutoPostBack and don't handle the OnSelectedIndexChanged event:
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server" AppendDataBoundItems="True" TabIndex="3" >
2- add a reference to jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
3- add a "startup" script to hook the onchanged event for the dropdown list, read the javascripts comments for more details.
<script type="text/javascript">
$(function () {
var ddl = $("#<%= PlaceHoldersDropDownList.ClientID %>");
var txt = $("#<%= tb.ClientID %>");
// hook the change event for the drop down list
$(ddl).change(function (e) {
var selectedValue = $(ddl).val();
// set the selectedValue into the textBox
$(txt).val(selectedValue);
});
});
</script>

How can i make a disabled control back to enable using Javascript

I have done a code to disable a control when user clicks on a control. On my form i am having a TextBox and a DropDown. When user clicks on a TextBox i will disable the DropDown like that when click on DropDown i will disable the TextBox which works fine.
But when the user clicks on Disabled control i would like to enable that control. Means if i click on TextBox which was disabled i would like to Enable it like that for dropdown too..
My sample Script is as follows
<script type="text/javascript">
function toggleDropDownList1()
{
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
</script>
Design
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>

Apparently Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled, and any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree.
So, if you want to achieve something like that, you will probably have to do it with a workaround.
Instead of actually disabling the field try to style the fields to look as if they are disabled, that way you can still capture the click event.

The idea is to place a div in front of dropdown list, and this div accept the onclick event.
The issue here is that the div can not place so easy in front of dropdown list. To place it you need to do that dynamically and use the absolut position.
I make here a small code, and test it and working. I have left the background color RED on div to see where it is. Some details I left it to you, eg to find the width and height of your control list, I place the onclick, you can place back the double click, And just remove the red background.
<script type="text/javascript">
function toggleDropDownList1()
{
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "none";
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>");
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "block";
MyDiv.style.left = MyDdl.style.left;
MyDiv.style.top = MyDdl.style.top;
// need to find the height/width
// MyDiv.style.height = MyDdl.style.height;
// MyDiv.style.width = MyDdl.style.width;
}
</script>
and the asp code.
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<br /><br />
<div id="DivForClick" onclick="toggleDropDownList1();" style="z-index:999;position:absolute;left:0;top:0;height:20px;width:40px;background-color:Red;display:none;">
</div>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();" style="z-index:2;">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>

Do you mean
function toggleIt() {
var d=document.getElementById("<%= DropDownList4.ClientID %>");
var t =document.getElementById("<%= TextBox1.ClientID %>");
d.disabled=!d.disabled
t.disabled=!t.disabled
}
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleIt();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" disabled="disabled" onclick="toggleIt();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>