Page with 2 Listboxes OnSelectedIndexChanged is firing the same listbox - asp.net

I have web page which is ContentPage of MasterPages and it has 2 ListBoxes with many items inside.
The code for the 1st Listbox is
<div id="electrics" class="panel-collapse collapse">
<div class="panel-body">
<asp:UpdatePanel ID="UpdatePanel7" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListBox ID="ListBox5" runat="server" CssClass="form-control" Font-Size="12pt" AutoPostBack="True" OnSelectedIndexChanged="ListBox5_SelectedIndexChanged"></asp:ListBox>
<asp:UpdateProgress ID="UpdateProgress3" runat="server" AssociatedUpdatePanelID="UpdatePanel7">
<ProgressTemplate>
<asp:Image ID="Image1112" runat="server" ImageUrl="images/ajax.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ListBox5" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
The code for the second is the same only change the ID.
When i click the listbox the code open a webpage with parameters from the selected listbox.
The page shows OK and the parameters are showing correct.
When I press back and select the second Listbox, it fires again the first listbox so the new webpage shows the same parameters from the first listbox.
This is the problem, the second listbox is not firing, its only fires the first clicked.
I have to reload the page to be able to click the second listbox.

Related

Asp.net Data list paging without page refresh

I want to apply paging using datalist with out page refresh in asp.net
My Code Structure is below.
<asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
<ProgressTemplate>
<div id="something">
<img alt="progress" src="loader.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Paging Items
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="dlPagingg" EventName="ItemCommand" />
</Triggers>
</asp:UpdatePanel>
<asp:DataList ID="DataListProducts" runat="server" OnItemDataBound="DataListProducts_ItemDataBound">
<ItemStyle CssClass="listing-pro-img-main" VerticalAlign="Top" />
<ItemTemplate>
Product List Here
</ItemTemplate>
</asp:DataList>
Issue: When user click on page number in paging list, paging change with appropriate page number , but products in datalist product not refresh.
i have also debug that all code file getting product and assign to datasource property of DataListProducts like,
DataListProducts.DataSource = {New Product List}
DataListProducts.DataBind();
Can you please advise me where issue is?
You can use Jquery DataTable
To wrap your table on the client side and then get the option to page, sort and filter you columns.
No refresh, no postback and no url changes.

change control outside UpdatePanel

In short: I want to enable a button i.e. outside UpdatePanel when I click on a button from inside UpdatePanel.
Problem: The button enables but tags i and asp:Localize are not showing in the rendered code after button click from UpdatePanel updPnlOfferings
Detail:
I have a DataList inside UpdatePanel which contains delete button for every item in the list. delete button is firing an event on server which deletes the record and disables a button (i.e. outside of the UpdatePanel.
As someone suggested I kept my button(which need to be disabled) in UpdatePanel below
<asp:UpdatePanel ID="updPnlCourse" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="lnkDeleteCourseDetails" runat="server" OnClick="lnkDeleteCourseDetails_Click">
<i class="icon-remove-sign"></i>
<asp:Localize ID="Localize6" runat="server" Text="<%$ Resources:CBLabels, LBL_DeleteDetails %>" />
</asp:LinkButton>
<asp:ConfirmButtonExtender ID="lnkDeleteCourseDetails_ConfirmButtonExtender" runat="server"
ConfirmText='Are you sure you want to delete this course?' Enabled="True" TargetControlID="lnkDeleteCourseDetails">
</asp:ConfirmButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
The Main UpdatePanel which is firing the event is below
<asp:UpdatePanel ID="updPnlOfferings" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlDSOfferings" runat="server">
<asp:DataList ID="dtlstOfferings" runat="server" OnItemCommand="dtlstOfferings_ItemCommand" EnableViewState="true">
</asp:DataList></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
on dtlstOfferings_ItemCommand event I coded this
lnkDeleteCourseDetails.Enabled = true;
lnkDeleteCourseDetails.ToolTip = "";
lnkDeleteCourseDetails_ConfirmButtonExtender.Enabled = true;
updPnlCourse.Update();
This is a known problem as specified in this link.
The solution is to put all your content that are there inside the LinkButton, within a place holder like below, or make all the child controls as server controls.
<asp:LinkButton ID="lnkDeleteCourseDetails" runat="server" OnClick="lnkDeleteCourseDetails_Click">
<asp:PlaceHolder runat="server">
<i class="icon-remove-sign"></i>
<asp:Localize ID="Localize6" runat="server" Text="<%$ Resources:CBLabels, LBL_DeleteDetails %>" />
</asp:PlaceHolder>
</asp:LinkButton>

How to reload a image on button click without refreshing the page in asp.net

I want to reload the image on a button click without refreshing the page. For now, the image is changing when i click on "Refresh Image" link button. But the PAGE REFRESHES..
Code :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtCaptchaInput" BorderStyle="Solid" Style="vertical-align: top" runat="server" Width="106px" BorderWidth="1px"></asp:TextBox>
<asp:Image ID="img_captcha" runat="server" Height="32px" ImageUrl="~/captchaJPEG.aspx" Width="108px" />
<asp:LinkButton ID="captcha_refresh" runat="server">Refresh Image</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="captcha_refresh" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
What am i doing wrong with this code ? I am using asncpostbacktrigger and assigning a control id and event name to it. Which to my knowledge is a correct approach. Please advice.
Remove Triggers from UpdatePanel1, Add Click event handler to captcha_refresh Link button. Inside that event call UpdatePanel1.Update();

Creating Multiple Hidden Div's in ASP.Net |Ajax | JQuery

i'm kinda new in web programming,
i'm trying to design a search page.
i want to creating few radio buttons where each click on a radio button will show a div
contains the related search div's.
and from there to do the query to the database(not related to the post)
how can i do that ?
tried to search for it , and didn't get good answer.
i want that the change of the page will be in server side and not the client side.
p.s.
i have been working with ajax control kit so far..
thanks for the help.
You just need an UpdatePanel, radio buttons and a MultiView control.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:RadioButton ...
<asp:RadioButton ...
</div>
<asp:MultiView ID="mvAll" runat="server" ActiveViewIndex="-1">
<asp:View ID="vwFirst" runat="server">
</asp:View>
<asp:View ID="vwSecond" runat="server">
</asp:View>
...
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
When the selected radio button changed you just set the View related to be active,
mvAll.SetActiveView(ViewIDYouNeed);
You can accomplish this with Panels and an Update Panel.
<asp:RadioButton ID="rdo1" AutoPostBack="true" GroupName="radios" runat="server" OnCheckedChanged="ShowDivs" />
<asp:RadioButton ID="rdo2" AutoPostBack="true" GroupName="radio2" runat="server" OnCheckedChanged="ShowDivs" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false"></asp:Panel>
<asp:Panel ID="pnl2" runat="server" Visible="false"></asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rdo1" />
<asp:AsyncPostBackTrigger ControlID="rdo2" />
</Triggers>
</asp:UpdatePanel>
You would then handle setting the Visible property of the panels in your ShowDivs method in your code behind.
Or, you could use jquery/javascript to accomplish this.
<input type="radio" onClick="ShowDiv(1)" />
function ShowDiv(id) {
HideDivs();
$(id).show('slow');
}

Multiple Update Panels In a Datalist. Can't Add Trigger

My issues here is that this does not compile. I get "A control with ID 'LinkButtonRemove' could not be found for the trigger in UpdatePanel 'UpdatePanelFiles'."
What I am trying to do is have two buttons in the item template. One that updates just the ITEM and one that updates the entire DataList. "LinkButtonRemove" is what I want to update the entire datalist. Any ideas on why this isnt working? Or how to do what I want to do?
THE SHORT VERSION:
UPDATEPANEL1
-DATALIST
--ITEM
---UPDATEPANEL2
----CONTROLS
I want one control to update the item updatepanel only and the other to update the entire datalist.
<asp:UpdatePanel ID="UpdatePanelFiles" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButtonRemove" />
</Triggers>
<ContentTemplate>
<asp:DataList ID="DataListFiles" class="MediaManagerDataList" runat="server" ItemStyle-BackColor="#ffffff" AlternatingItemStyle-BackColor="#E7F4FF" OnItemCommand="DataListFiles_ItemCommand">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanelItem" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="item">
<asp:LinkButton ID="LinkButtonRemove" CommandName="remove" runat="server">Remove</asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
The updatepanel can't see the button, but it can see the list. You can skip the trigger part and just call updatepanel.update() in your codebehind when you handle the click event.
You can do this by putting the DataList's Id instead of the linkbutton

Resources