I want to hide the textboxes in the Updatepanel according to the user's choice in the Combo boxes. It works well outside of the UpdatePanel but it stops working and no longer hiding textboxes when I put inside the UpdatePanel. Could you please help me about this? Thanks.
My Codings are as follow:
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(BindControls);
$().ready(function () {
BindControls();
$("#<%= ddlType.ClientID %>").change();
});
function BindControls() {
$("#<%= ddlType.ClientID %>").change(function () {
ShowHideCalendars();
});
}
function ShowHideCalendars() {
$("#trDates").toggle($("#<%= ddlType.ClientID %>").val() == "T1");
}
</script>
<asp:UpdatePanel runat="server">
<contenttemplate>
<asp:DropDownList runat="server" id="ddlType" AutoPostBack="True"
onselectedindexchanged="ddlType_SelectedIndexChanged">
<asp:ListItem>T1</asp:ListItem>
<asp:ListItem>T2</asp:ListItem>
</asp:DropDownList>
<table>
<tr>
<td>Row 1</td>
</tr>
<tr id="trDates">
<td>From: <asp:TextBox ID="TextBox1" runat="server" CssClass="dtpicker"></asp:TextBox> To: <asp:TextBox ID="TextBox2" runat="server" CssClass="dtpicker"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Literal ID="ltStatus" runat="server" Text="You haven't selected."></asp:Literal></td>
</tr>
</table>
</contenttemplate>
</asp:UpdatePanel>
Usually, it's safer to use live() jQuery method when adding handlers for controls inside updatepanel
However, I'm not sure whether it will solve your problem
What happens is as follows - you are toggling the textboxes visibility in the client side, but then a postback occurs. When the textboxes are inside an UpdatePanel, they are being rendered again and that toggling action is lost.
Two things you can do:
1) If you all you are doing when the drop-down value is change is toggling the textbox visibility, you can lose the AutoPostBack="True" and the OnSelectedIndexChanged event.
2) If you are doing more than that and need the server side call, you can set the textbox visibility in the server side event.
Related
I am using Visual Studio 2015 to create a ASP.NET web site. I have a DIV that is hidden by default and I am trying to display it if the user checks a check box. I am wondering if there is a way using C# to immediately display the DIV as soon as the user checks the box. I can't seem to find a way to recognize the change in state without the form being first submitted. I can easily achieve this using JavaScript however this is for a uni assignment and requires functionality to be implemented in C#.
This is the HTML for the checkBox:
<form id="form1" runat="server">
Limit Stations To My Location<asp:CheckBox ID="limitOptions" runat="server" onClick="toggleOptions()" />
<br /><br />
<div id="locationOptions" runat="server" hidden="hidden">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
<asp:Button ID="updateList" runat="server" Text="Button" OnClick="updateList_Click"/>
</div>
Any help would be greatly appreciated.
You can do this with C# in code behind. Add a OnCheckedChanged event to the CheckBox and set the AutoPostBack to true and handle the change. Note that a Panel becomes a div in HTML.
<asp:CheckBox ID="limitOptions" runat="server" OnCheckedChanged="limitOptions_CheckedChanged" AutoPostBack="true" />
<asp:Panel ID="locationOptions" runat="server" Visible="false">
Radius (KM) <asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</asp:Panel>
However this causes a PostBack, so just using JavaScript could be a better option.
<asp:CheckBox ID="limitOptions" runat="server" onclick="toggleOptions()" />
<div id="locationOptions" runat="server" style="display: none">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</div>
<script type="text/javascript">
function toggleOptions() {
var id = '#<% =locationOptions.ClientID %>';
if ($(id).css('display') == 'none') {
$(id).slideDown('fast', function () { });
} else {
$(id).slideUp('fast', function () { });
}
}
</script>
I have a data grid, which contains a call to a javascript function as follows.
<asp:UpdatePanel id="panel1" runat="server">
<ContentTemplate>
<DataGrid id="dg" runat="server">
<Columns>
<TemplateColumns>
<ItemTemplate>
<table>
<tr>
<td>
<script type="text/javascript">doStuff('<%# Container.ItemIndex %>', '<%# Eval("Count")%>');</script>
</td>
</tr>
</table>
</ItemTemplate>
</TemplateColumns>
</Columns>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
function doStuff(A, B){...};
</script>
It was working previously without the update panel. After the datagrid is included within the update panel, the javascript is not being called. I have looked at various solutions but none of them worked. Can anyone suggest how to solve this?
Thanks.
I've been banging my head against the wall for the last couple of days trying to get this scenario to work.
I have an <asp:UpdatePanel> on a page which has an external trigger and contains a Telerik RadListView:
<asp:UpdatePanel runat="server" ID="RationUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<telerik:RadListView ID="RationListView runat="server"
DataSourceId="RationDataSource"
OnItemCanceling="ItemCancelingHandler"
OnItemEditing="ItemEditingHandler"
OnItemUpdating="ItemUpdateHandler">
<LayoutTemplate>
<table>
<thead>
<tr>...</tr>
</thead>
<tbody>
<tr id="itemPlaceHolder" runat="server"/>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" ToolTip="Edit" />
<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" ToolTip="Delete" />
</td>
<td>...</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
<asp:LinkButton ID="SaveButton" runat="server" CausesValidation="False" CommandName="Save" Text="Save" ToolTip="Save" />
<asp:LinkButton ID="CancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" ToolTip="Update" />
</td>
<td>...</td>
</tr>
</EditItemTemplate>
</telerik:RadListView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UseRationButton" EventName="Click" />
</Triggers>
</UpdatePanel>
Code behind looks like this:
protected void RationListView_ItemEditing(object sender, RadListViewCommandEventArgs e)
{
((RadListViewDataItem)e.ListViewItem).Edit = true;
}
protected void RationListView_ItemCanceling(object sender, RadListViewCommandEventArgs e)
{
RationListView.ClearEditItems();
((RadListViewDataItem)e.ListViewItem).Edit = false;
}
Clicking on the EditButton or CancelButton produced the expected events and the ObjectDataSource routine to rebind the list is called, yet the update panel is not refreshed. Calling RationUpdatePanel.Update() from the event handlers does not change the situation. The code works properly outside of an update panel: the mode changes and the buttons from the other template are displayed.
In either scenario clicking on the external trigger causes the list to be displayed.
Update: I added a couple of javascript callbacks to the PageManager class in the browser for beginRequest and endRequest. These just display an alert when the event occurs.
The page contains several elements which basically look like this (details omitted):
<div>
<div>
<asp:DropDownList ID="RationDdl"/>
<asp:Button ID="UseRationButton"/>
</div>
<div>
<asp:DropDownList ID="AnimalGroupDdl"/>
<asp:UpdatePanel ID="AnimalWeightUpdatePanel"/>
<ContentTemplate>
<asp:DropDownList ID="AnimalWeightDdl"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div>
<telerik:RadListBox>
</telerik:RadListBox>
</div>
<div>
<asp:UpdatePanel ID="FeedPreviewUpdatePanel">
<ContentTemplate>
<asp:Repeater>
</asp:Repeater>
</ContentPanel>
</asp:UpdatePanel>
</div>
<div>
<!-- this contains the update panel shown above -->
</div>
The UseFeedRationButton in the first div is an external trigger for the RationUpdatePanel. AnimalGroupDdl is an external trigger for AnimalWeightUpdatePanel. The handler for the SelectedIndexChanged event on AnimalGroupDdl populates AnimalWeightDdl with available weight classes for the
selected group. It has no interaction with RationUpdatePanel or FeedPreviewUpdatePanel.
Here is the markup for UseRationButton:
<asp:Button ID="UseRationButton" runat="server"
Text="Use This Ration"
OnClick="UseRationButton_Click"
CausesValidation="true"
ValidationGroup="UseRation"
UseSubmitBehavior="false">
</asp:Button>
And here is the code behind:
protected void UseRationButton_Click(object sender, EventArgs e)
{
string text = this.RationDdl.SelectedItem.Text;
this.RationNameLabel.Text = text;
this.RationDataSource.SelectParameters["RationId"].DefaultValue = this.RationDdl.SelectedValue;
}
There are two scenarios I have been testing:
1) Choose a ration from RationDdl and click UseRationButton
2) Choose an animal group and then execute scenario 1.
In scenario 1 an async postback is initiated by the client side asp.net code and the button event is handled server side. The RationListView is populated but the client side endRequest code is never executed (the alert is not displayed). Subsequent clicks on the controls in the RadListView trigger an async postback but the state of the list is not changed and the client side endRequest code is not executed.
In scenario 2 an async postback is initiated, the event is handled on the server side and AnimalWeightDdl is populated. The client side endRequest code is executed in this case (the alert IS displayed). Subsequent to this selecting a ration and clicking on the use ration button initiates a postback, the list view is populated and the endRequest code is executed. At his point clicking on buttons in the list view causes an async postback to be initiated, the state of the list is changed and the endRequest code is executed.
My working theory is that something is causing the state of the page request manager class on the client to become fubared, but I can't figure out what might be causing it.
Firstly , If you use telerik rad control , I suggest you to change your asp:button to telerik:RadButton .
Here is example
<telerik:RadButton ID="v" runat="server" Text="Use This Ration"
AutoPostBack="true"
ValidationGroup="UseRation" OnClick="UseRationButton_Click">
</telerik:RadButton>
protected void UseRationButton_Click(object sender, EventArgs e)
{
string text = this.RationDdl.SelectedItem.Text;
this.RationNameLabel.Text = text;
this.RationDataSource.SelectParameters["RationId"].DefaultValue = this.RationDdl.SelectedValue;
}
Note that , you should add AutoPostBack="true" into your radButton .
And this links , MSDN Reference1 and MSDN Reference2 will show details of using update Panel .
The research I did late Friday and Saturday morning provided the answer to this one.
I had some code attached to the Sys.WebForms.PageRequestManager endRequest event which updated a text box which contained a temporary title for a new ration. The code looked like this:
///
/// reregister the change handlers after reloading the animal weight ddl and create a
/// temporary name for the ration based on animal choice and weight.
///
function animalWeightDdlOnLoad() {
var ddl = document.getElementById("<%= AnimalWeightDdl.ClientID %>");
//
// add event handler in a browser agnostic fashion
//
if (ddl.addEventListener) {
ddl.addEventListener("change", animalWeightDdlOnChange);
}
else if (ddl.attachEvent) {
ddl.attachEvent("onchange", animalWeightDdlOnChange);
}
else {
ddl.onchange = animalWeightDdlOnChange;
}
animalWeightDdlOnChange();
}
animalWeightDdlOnChange() referenced the options list of the animal weight ddl:
///
/// create a temporary name for the ration
///
function animalWeightDdlOnChange() {
var ddl1 = document.getElementById("<%= AnimalGroupDdl.ClientID %>");
var ddl2 = document.getElementById("<%= AnimalWeightDdl.ClientID %>");
var text = document.getElementById("<%= RationNameText.ClientID %>");
text.value = ddl1.options[ddl1.selectedIndex].text + ' ' + ddl2.options[ddl2.selectedIndex].text + ' - Copy';
}
However if the list had not yet been populated the reference to options caused a fault which halted endRequest processing. Rather than having this code run on every async request I changed it to be a handler for the change event on the animal group ddl, like this:
function animalGroupDdlOnSelectedChanged() {
//
// add a handler for the endRequest event which will be triggered by
// fetching the contents of the weight ddl.
//
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(animalWeightDdlOnLoad);
}
Then in animalWeightDdlOnLoad() I added a line to remove the handler once the request had
run. This ensured that the change handler for the weight ddl would only run once the list had been populated. Problem solved. But just in case, I added a check on the length of the animal weight ddl's options list.
So even seemingly innocent javascript can mess up your async request handling in the browser.
I have a simple JQuery enabled ASP.NET page:
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="accordion">
<h3><a id="Accordion1" href="#">Accordion Panel 1</a></h3>
<div>
A form input...
<asp:Button id="btnSubmit" runat="server" onclick="btnSubmit_Click" />
</div>
<h3><a id="Accordion2" href="#">Accordion Panel 2</a></h3>
<div>
Some content...
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
If you'll notice, I'm using an UpdatePanel also.
btnSubmit_Click event does something like this:
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Some MySql INSERT, etc.
}
Now what I want to do is for server-side btnSubmit_Click to trigger JQuery to "click" Accordion Panel 2 (so it will open Accordion Panel 2 and close 1). How to do this?
UPDATE: Sorry guys I forgot to mention earlier that It's got an UpdatePanel
Oh well, I just used the "change the value of a hiddenfield after postback then let jquery read that hiddenfield" approach. Thanks guys!
Jquery:
var tag = $("#contentBody_hfTag1").val();
if (tag=="1") { $(".Accordion").accordion({ active: 1 }); }
else { $(".Accordion").accordion({ active: 0 }); }
.aspx
<asp:HiddenField ID="hfTag1" ClientIDMode="Predictable" Value="0" runat="server" />
C#
protected void btnMyButton_Click(object sender, EventArgs e)
{
hfTag1.Value = "1";
}
You can't. Jquery runs on the client, your handler is on the server. You will need to trigger the event on the client when the page reloads after the post back.
You can't do that as Jquery works on client side, from a server side event, as the page reloads. And the state of the accordion will be lost. So what you can do is, instead of making a post back, you can do the same work in a Jquery AJAX call on the button click to do whatever you want and then close the accordion 1 and show accordion 2.
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<i88:InlineScript runat="server">
<script type="text/javascript">
$('Accordion2').click()
</script>
</i88:InlineScript>
<asp:Button ID="cmd" runat="server" Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
You can put inlineScript which will get Executed every time you update the Panel.
You can also use jQuery.Trigger(); for other event's.
I am trying to create a basic video and text chat web site.In the room page I have the video as flash and a textbox(multiline) which shows all the messages sent to the room and one textbox for users to type and send by clicking the button beside it
<tr>
<td>
<asp:UpdatePanel ID="UpdtPnlMesajlar" runat="server" EnableViewState="true">
<ContentTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="TxtBxOdaMesajlari"
runat="server" ReadOnly="true"
TextMode="MultiLine"
Width="475" Height="100" >
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TxtBxMesaj" runat="server"
Width="412"></asp:TextBox>
<asp:Button ID="BttnGonder" runat="server"
Text="Gönder" Width="55"
OnClick="BttnGonder_click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
Above is my code, all those controls are in an UpdatePanel so when user clicks BttnGonder that no flickers happens.
When user presses the button what he typed is concataned to TxtBxOdaMesajlari in the below method called BttnGonder_click.
protected void BttnGonder_click(object sender, EventArgs e)
{
string uyeId = Session["UyeId"].ToString();
string mesaj = uyeId + " : " + TxtBxMesaj.Text;
TxtBxOdaMesajlari.Text = TxtBxOdaMesajlari.Text + Environment.NewLine + mesaj;
ScriptManager.RegisterStartupScript(this, this.GetType(), "txtbxmesajlarslide", "buttonClicked();", true);
}
Well after a number of messages scrollbars appear TxtBxOdaMesajlari can be seen , however the new messages cannot be seen because TxtBxOdaMesajlari does not slide/scroll down automatically.I searched about this and found this example Multi User Chat Room Using ASP.NET 2.0 and AJAX it uses Javascript's scrollIntoView() so I decided to use it but the page gets flickered and scrolling does not work at all.Maybe I am using the wrong control or the wrong way to do is.
I am using ASP.NET 4.0 if that matters a lot.
On aspx file
<script language="javascript" type="text/javascript">
function buttonClicked() {
$get("TxtBxOdaMesajlari").scrollIntoView("true");
}
</script>
I am using ScriptManager.RegisterStartupScript because the controls are in an UpdatePanel as it was suggested and worked fine at Accepted answer by user:3742 of JavaScript function is not working.
scrollIntoView is used to scroll the textbox itself into view, not its contents.
In order to scroll to the end of the textbox, you can use:
function buttonClicked() {
var textBox = $get("TxtBxOdaMesajlari");
textBox.scrollTop = textBox.scrollHeight;
}