I just want to ask what's the problem in my codes here? The OnSelectedIndexChanged event in #cbList is working fine but the ondrop event in #sortable2 is not working. I tried placing it inside and outside the update panel. The code that is being called in the ondrop is in code behind. It just change the dummyText's text.
Here's my code:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<input type="hidden" runat="server" id="hdnSelectedValue" />
<asp:CheckBoxList ID="cbList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="cbList_SelectedIndexChanged">
<asp:ListItem Text="One" Value="1">
</asp:ListItem>
<asp:ListItem Text="Two" Value="2">
</asp:ListItem>
<asp:ListItem Text="Three" Value="3">
</asp:ListItem>
<asp:ListItem Text="Four" Value="4">
</asp:ListItem>
<asp:ListItem Text="Five" Value="5">
</asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:Label ID="lblSelection" runat="server"></asp:Label>
<asp:Label ID="dummyText" runat="server" Text="Here"></asp:Label>
<ul id="sortable2" runat="server" class="connectedSortable" ondrop="Change_Text"></ul>
</ContentTemplate>
</asp:UpdatePanel>
</form>
ondrop="" is client side event. You cannot wired up this event in code behind.
Check this link for more information on OnDrop event
Related
I want to populate a second dropdownlist based on the index of the first.
<asp:ScriptManager ID="sm" runat="server" />
<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl1_SelectedIndexChanged">
<asp:ListItem Value="1" />
<asp:ListItem Value="2" />
</asp:DropDownList>
<asp:UpdatePanel ID="up" runat="server">
<Triggers >
<asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate >
<asp:DropDownList ID="ddl2" runat="server">
<asp:ListItem Value="1" />
<asp:ListItem Value="2" />
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
Code Behind:
protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
{
ddl2.SelectedIndex = ddl1.SelectedIndex;
}
I am getting a complete post back. No ajax at work.
I am having trouble with asp:UpdatePanel and Trigger of ASP.NET WebForms. Trigger could not find the event on my UpdatePanel. I've seen a lot of examples and I copied their implementations but could not get it right. I'm totally new in WebForms. Please help. Thank you.
<tr>
<td class="label1">Will use ETL?</td>
<td>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1">
<ContentTemplate>
<asp:RadioButtonList ID="useEtl" runat="server" RepeatDirection="Horizontal" Width="120" OnSelectedIndexChanged="useEtl_SelectedIndexChanged">
<asp:ListItem Text="Yes" Value="1" />
<asp:ListItem Text="No" Value="0" />
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td class="label1">ETL Box</td>
<td>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel2">
<ContentTemplate>
<asp:TextBox ID="etlBox" runat="server"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="useEtl" EventName="OnSelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
change your code as follows:
<asp:AsyncPostBackTrigger ControlID="useEtl" EventName="SelectedIndexChanged" />
the event name you mentioned was wrong that's the reason for not working.
you can also try the following code for the same
UpdatePanel1.Triggers.Add(new AsyncPostBackTrigger()
{
ControlID = useEtl,
EventName = "SelectedIndexChanged", // this may be optional
}
td>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1">
<ContentTemplate>
<asp:RadioButtonList ID="useEtl" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" Width="120" OnSelectedIndexChanged="useEtl_SelectedIndexChanged">
<asp:ListItem Text="Yes" Value="1" />
<asp:ListItem Text="No" Value="0" />
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td class="label1">ETL Box</td>
<td>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel2">
<ContentTemplate>
<asp:TextBox ID="etlBox" runat="server" Enabled="false"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="useEtl" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
I have a drop down list named "DropDownList1". Any value picked from the drop down list must not refresh the page, but only refresh the panel My code is as follows.
<asp:DropDownList ID="DropDownList1" runat="server" Width="200px" autopostback="true" OnSelectedIndexChanged="DropDownList1sel">
<asp:ListItem Text="abc" Value="0"></asp:ListItem>
<asp:ListItem Text="a" Value="1"></asp:ListItem>
<asp:ListItem Text="b" Value="2"></asp:ListItem>
<asp:ListItem Text="c" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
When i run this code, it must call the function named "DropDownList1sel" in the ascx.cs where "Label1" is populated. Now the page is refreshed and the values are populated. I want to have the panel refreshed without the page being reloaded. Please help.
Few things to do
Set UpdateMode=conditional then add Trigger as DropDownList1
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="conditional" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Why not add the DropDown inside your UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" Width="200px"
AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_OnSelectedIndexChanged">
<asp:ListItem Text="abc" Value="0"></asp:ListItem>
<asp:ListItem Text="a" Value="1"></asp:ListItem>
<asp:ListItem Text="b" Value="2"></asp:ListItem>
<asp:ListItem Text="c" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="DropDownList1"/>
</Triggers>
</asp:UpdatePanel>
You must place that panel inside an update panel..
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<panel id="panel1">
</panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" />
</Triggers>
</asp:UpdatePanel>
I have to dynamically populate a checkbox inside an update panel in a Sharepoint site.
The problem is that eventhough i clear the selections after a button is clicked,the checkbox somehow remembers the previous selections and and shows checkbox.items[i].selected as true even for the previous selections
This issue is resolved if i remove the update panel.However i cant remove the update panel coz the whole page reloads every time a selection is made
Below is my code
<div align="left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" >
<ContentTemplate>
<asp:CheckBoxList BackColor="White" AutoPostBack="true" ID="cbHideTabs"
runat="server" isCheckable="true" ForeColor="#0072bc" Width="300px" >
</asp:CheckBoxList>
<input type ="button" Visible ="true" ID="HideShowTabButton" value="HideShowTab" title="HideShowTab" runat="server" style="background-color: #0072bc; color: #FFFFFF;" enableviewstate="False" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
<br />
<asp:PopupControlExtender ID="PopupControlExtender1" Enableviewstate="false" runat="server" CommitProperty="value"
PopupControlID="Panel1"
Position="Bottom" TargetControlID="ShowHideLabel">
</asp:PopupControlExtender>
Can you share the code which you are using for Clearing the selection.
I modified your code and its working for me.
Code for aspx page
<%# Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="UpdateCheckbox._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:updatepanel ID="Updatepanel1" runat="server">
<ContentTemplate>
<asp:CheckBoxList ID="chkAll" BackColor="White" AutoPostBack="true"
runat="server" isCheckable="true" ForeColor="#0072bc" Width="300px" >
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
<asp:ListItem Enabled="true" Text="1"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button runat="server" Text="HideShowTab" runat="server" OnClick="Clear_Click" style="background-color: #0072bc; color: #FFFFFF;" enableviewstate="False" />
</ContentTemplate>
</asp:updatepanel>
</div>
</asp:Content>
Code in vb.net
Protected Sub Clear_Click(ByVal sender As Object, ByVal e As System.EventArgs)
chkAll.ClearSelection()
End Sub
Please cosider this scenario:
I have a form with 3 drop down list.I place these controls in an update panel.when my users select an Item with value greater that 2 in first drop down list I disable second and third drop down list with jQuery. My problem is after any post back all drop down list are enable.I know this is normal but how I can check the form again and disable controls that should be disable?
thanks
Edit 1)
this is my code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" Width="100px">
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="DropDownList2" runat="server" Width="100px">
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="DropDownList3" runat="server" Width="100px">
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
<br />
</td>
</tr>
</table>
<div>
<asp:Button ID="Button1" runat="server" Text="Cause Post Back" Width="200px"
onclick="Button1_Click"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and javascript:
$(document).ready(function () {
function Disable(item) {
item.attr('disabled', 'disabled');
}
$('#DropDownList1').change(function () {
if ($(this).val() > 2) {
Disable($('#DropDownList2'));
Disable($('#DropDownList3'));
}
else {
Enable($('#DropDownList2'));
Enable($('#DropDownList3'));
}
}).change();
function Enable(item) {
item.removeAttr('disabled');
}
});
Am I missing something?
$('#dropdown1').change(function()
{
if ( $(this).val() > 2 )
{
$('#dropdown2, #dropdown3').prop('disabled', true);
}
else
{
$('#dropdown2, #dropdown3').prop('disabled', false);
}
})
.change();
The problem is due to updatepanel, because it is partialy post back your page.
Please put your Jquery inside a function pageLoad()
function pageLoad() {
// Put your code here...
}
Hope it will solve your issue.
try this
AutoPostBack="true"
as
<asp:DropDownList ID="DropDownList1" runat="server" Width="100px"
AutoPostBack="true">
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
Add a hidden field, which stores the state of the dropdowns..for example 0=disabled, 1=enabled...when you disable the dropdown set the value of the hidden field as 0..when enabled set it as 1. Then when the form is posted and reloaded, read the value of the hidden fields and enable/disable the dropdowns accordingly.
$(function(){
if($("#hiddenFieldID").val()=="0")
//disable
else
//enable
});