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.
Related
I have a dropdownlist in a table with a blank item in it, I want a error message showed in a label if a button is pressed while that blank item is selected in the dropdrownlist
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownListParedesinteriores_ItemChanged">
<asp:ListItem Text="" Value="-1"></asp:ListItem>
<asp:ListItem Value='5'>Excellent</asp:ListItem>
<asp:ListItem Value="4">Very good</asp:ListItem>
<asp:ListItem Value="3">Good</asp:ListItem>
<asp:ListItem Value="2">Bad</asp:ListItem>
<asp:ListItem Value="1">Very bad</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Label ID="Label9" runat="server" Text=""></asp:Label>
This is my Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function ()
{
$("#Button1").click(function ()
{
var a = $("#<%= DropDownList1.ClientID %>");
if (a.val() === "-1")
{
document.getElementById("Label9").innerHTML = "<b>Please select an option</b>";
document.getElementById("Label9").style.color = "red";
}
else
{
document.getElementById("Label9").innerHTML = "<b>Comfirmed</b>";
document.getElementById("Label9").style.color = "green";
}
})
})
</script>
First of all this button is a server side button you have to disable postaback to make it work on client side by using onClientClick="return false" .Secondly in order to use Button1 as id($("#Button1")) you need to change ClientIDMode to static same goes for the label
<asp:Button ID="Button1" runat="server" Text="Button" onClientClick="return false" ClientIDMode="Static" />
<asp:Label ID="Label9" runat="server" Text="" ClientIDMode="Static"></asp:Label>
if you dont want to use static client id you have to replace
$("#Button1") with $("#<%= Button1.ClientID %>")
document.getElementById("Label9") with document.getElementById("<%= Label9.ClientID %>")
Your button 1 selector "$("#Button1).click" click event does not consider the client ID like your dropdown list does. That may be causing the issue if jquery finds nothing for button 1 and the click event never gets triggered.
A possible fix is to change the selector to the same as you do in the line where you use jquery to get the dropdown list.
I am attempting to get a <div> to appear when a specific ListItem is selected.
In my code behind I have:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (reportedBefore.SelectedItem.Text=="yes")
{
reportedBeforePanel.Visible = true;
}
else
{
reportedBeforePanel.Visible = false;
}
}
I referred to this article here initially, which stated I needed a few things:
You need to Enable the AutoPostBack of the dropdownlist for raising the OnSelectedIndexChanged event on server side.
AutoPostBack="true"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged
Admittedly, I did not have an AutoPostBack before. After adding it, I am afraid for some reason the requested div still does not show.
<asp:DropDownList ID="reportedBefore" CssClass="larger-drop-2" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="Select" Value="Select"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
<asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
<asp:ListItem Text="Unsure" Value="Unsure"></asp:ListItem>
</asp:DropDownList>
<asp:Panel ID="reportedBeforePanel" runat="server" Visible="false">
<div id="showDiv">
<label for="yesDetails">
Please provide details
</label>
<asp:TextBox ID="yesDetails" CssClass="third-w-form" runat="server"/>
</div>
</asp:Panel>
Would someone be so kind to help me out here?
The problem is in the following if-condition:
reportedBefore.SelectedItem.Text=="yes"
By this, you are doing a case-sensitive string comparison (this is the default in .NET), but the values in your dropdownlist are written in a different way ("Yes" vs. "yes").
In order to fix this, either perform a case-insensitive string comparison
string.Compare(reportedBefore.SelectedItem.Text, "yes", true) == 0
or change the casing in the if-statement.
C# is case sensitive, so it's "Yes" not "yes":
reportedBeforePanel.Visible = reportedBefore.SelectedItem.Text == "Yes";
Alternatievely you can use this:
reportedBeforePanel.Visible = reportedBefore.SelectedItem.Text.Equals("yes", StringComparison.InvariantCultureIgnoreCase);
I've got an asp:Label and a asp:DropDownList that I want to be able to switch back and forth between visible and invisible when clicking on some buttons. Right now, my code looks like
aspx file
<asp:Label AssociatedControlID="statusFilter" id="statusFilterLabel" runat="server" CssClass="filterLabel">Status
<asp:DropDownList ID="statusFilter" runat="server" CssClass="filterInput" AutoPostBack="true" OnSelectedIndexChanged="anyFilter_SelectedIndexChanged" AppendDataBoundItems="True">
<asp:ListItem Selected="True" Value=" 0"><All></asp:ListItem>
</asp:DropDownList>
</asp:Label>
<asp:Button Text="ALL" ID="AllTabButton" CssClass="tabButton" runat="server" OnClick="AllTab_Click" />
<asp:Button Text="Arrived" ID="ArrivedTabButton" CssClass="tabButton" runat="server" OnClick="ArrivedTab_Click" />
code behind
protected void AllTab_Click(object sender, EventArgs e)
{
AllTabButton.CssClass = "tabButtonClicked";
ArrivedTabButton.CssClass = "tabButton";
statusFilter.Visible = true;
statusFilterLabel.Visible = true;
}
protected void ArrivedTab_Click(object sender, EventArgs e)
{
AllTabButton.CssClass = "tabButton";
ArrivedTabButton.CssClass = "tabButtonClicked";
statusFilter.Visible = false;
statusFilterLabel.Visible = false;
}
The only problem is that if I try to set Visible=true after setting Visible=false it would give me an error Unable to find control with id 'statusFilter' that is associated with the Label 'statusFilterLabel'.
I tried doing some other things instead of using Visible, like setting the style: statusFilter.Style.Add("display", "block") and setting the cssclass: statusFilter.CssClass = "displayBlock"but the resulting error always showed up.
An asp:Panel would work, but I'm avoiding using that because I want my asp:Label and asp:DropDownList to line up with several other labels and dropdownlists; putting in a panel would make them not line up properly.
I'm guessing there is something I'm missing, something I just don't get, but I can't seem to figure out what that is. If anybody has any clue as to what's happening, I would really appreciate the help!
It's not able to always find the control on postback because it's a child of statusFilter. Move the input field outside of the label:
<asp:Label AssociatedControlID="statusFilter" id="statusFilterLabel" runat="server" CssClass="filterLabel">Status
</asp:Label>
<asp:DropDownList ID="statusFilter" runat="server" CssClass="filterInput" AutoPostBack="true" OnSelectedIndexChanged="anyFilter_SelectedIndexChanged" AppendDataBoundItems="True">
<asp:ListItem Selected="True" Value=" 0"><All></asp:ListItem>
</asp:DropDownList>
I'm using google charts to draw a set of charts changing chart type with a dropdownlist.
however, after wrapping the dropdownlist in an updatepanel, the javascript is no longer being fired. first line in javascript is an alert to confirm.
the code that's supposed to fire the javascript:
protected void Unnamed_SelectedIndexChanged(object sender, EventArgs e) {
DropDownList ddl = (DropDownList)sender;
if (ddl.SelectedItem != null) {
ClientScriptManager cs = Page.ClientScript;
string script = String.Format("drawChart(\'{0}\',\'{1}\',\'{2}\',\'{3}\',\'{4}\');", chart.ClientID, ddl.SelectedValue.ToString(), "i en kage i gram", "string,NOGETTEKST;number,Mængde", "Mel,500;Sukker,500;Smør,100;Salt,32;Vand,400;Cola,150");
cs.RegisterStartupScript(typeof(Page), "isActive", script, true);
}
}
this worked fine before i put the updatepanel around the dropdownlist.
<asp:UpdatePanel runat="server" ID="hejbamse" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList runat="server" OnSelectedIndexChanged="Unnamed_SelectedIndexChanged" ID="ddl" AutoPostBack="true">
<asp:ListItem Text="" />
<asp:ListItem Text="LineChart" />
<asp:ListItem Text="PieChart" />
<asp:ListItem Text="BarChart" />
<asp:ListItem Text="ColumnChart" />
</asp:DropDownList>
<div id="chart" style="width: 900px; height: 500px;" runat="server"></div>
</ContentTemplate>
i've tried different approaches using scriptmanager instead of clientscript inspired from different answers on SO, but with no luck.
EDIT:
replacing:
cs.RegisterStartupScript(typeof(Page), "isActive", script, true);
with:
ScriptManager.RegisterStartupScript(updatepanelid, updatepanelid.GetType(), Guid.NewGuid().ToString(), script, true);
fixied it.
You can try put the script in a Literal, instead of
cs.RegisterStartupScript(typeof(Page), "isActive", script, true);
PS. I haven't test it.
I creating an ASP.net online application with C# background. I am also using AJAX MaskEditExtender. I'm pretty new to AJAX and don't know Javascript. What I need to do is have the textbox AJAX mask change based on the selection of the radio buttons.
In this example they are choosing salary or hourly. I need the salary to be "999,999" and the hourly to be "99.99".
<asp:TextBox ID="finalwage" runat="server" Width="80px">$</asp:TextBox>
<!-- Salary Mask -->
<asp:MaskedEditExtender
ID="MaskedEditExtender1"
runat="server"
TargetControlID="finalwage"
Mask="999,999"
MessageValidatorTip="true"
MaskType="Number"
InputDirection="RightToLeft"
AcceptNegative="None"
ErrorTooltipEnabled="true">
</asp:MaskedEditExtender>
<asp:MaskedEditValidator
ID="MaskedEditValidator1"
runat="server"
ControlExtender="MaskedEditExtender1"
IsValidEmpty="true"
MinimumValue="0"
MaximumValueMessage="Must enter a number"
ControlToValidate="finalwage" >
</asp:MaskedEditValidator>
<!-- Hourly Mask -->
<asp:MaskedEditExtender
ID="MaskedEditExtender2"
runat="server"
TargetControlID="finalwage"
Mask="99.99"
MessageValidatorTip="true"
MaskType="Number"
InputDirection="RightToLeft"
AcceptNegative="None"
ErrorTooltipEnabled="true">
</asp:MaskedEditExtender>
<asp:MaskedEditValidator
ID="MaskedEditValidator2"
runat="server"
ControlExtender="MaskedEditExtender1"
IsValidEmpty="true"
MinimumValue="0"
MaximumValueMessage="Must enter a number"
ControlToValidate="finalwage" >
</asp:MaskedEditValidator>
.......
<asp:RadioButtonList
ID="RadioButtonList1"
runat="server"
AutoPostBack="true"
RepeatDirection="Horizontal"
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem Text="Hourly" Value="Hourly"
<asp:ListItem Text="Salary" Value="Salary" />
</asp:RadioButtonList>
Heres the C# code that I thought would work:
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedValue = "Hourly")
{
MaskedEditExtender1.Mask = "99.99";
}
if (RadioButtonList1.SelectedValue == "Salary")
{
MaskedEditExtender1.Mask = "999,999";
}
}
Try to move the RadioButtonList1_SelectedIndexChanged code to Page_Init. I believe RadioButtonList1_SelectedIndexChanged is too late in the lifecycle process to change the mask.