I have the markup below, there is no triggers section and no setting of the triggers in the code behind. When I click on the checkbox, the page does update and show the hidden div (server side code sets visible), but page loading spinner in the page tab doesn't spin in chrome. If I remove the update and template tags, the page seems to act the same except that the page loading spinner spins.
What is actually happening? Is the page being reloaded or not? If the update panel is loading the page, why is it doing so without a defined AsyncPostBackTrigger?
<asp:UpdatePanel runat="server" ID="pnlMain">
<ContentTemplate>
<div class="control-group">
Hide Div
<div class="controls">
<asp:CheckBox ID="chkbx" CssClass="Input" runat="server" AutoPostBack="true" />
</div>
</div>
<div id="divToHide" runat="server">
stuff to hide when div is clicked
</div>
<div class="form-actions">
<asp:LinkButton ID="btnSubmit" runat="server" Text="Submit" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Page is loaded in both cases. With Update Panel only Partial Page(Content inside the Content Template is updated) whereas in normal case entire page is re-rendered.
Related
I have an async page load that fetches data from an API and binds it to a repeater inside an update panel, separate to local search results.
There is a script manager in the master page.
<div class="searchResultContainer" runat="server" id="divApiResults">
<div class="searchResult">
<asp:UpdatePanel ID="udpApiResults" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:UpdateProgress ID="updateProgress" DisplayAfter="1000" runat="server">
<ProgressTemplate>
<div id="lblLoadingApi" runat="server">
Loading...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Label runat="server" CssClass="label searchResultLabel" Text="EXTERNAL SEARCH RESULTS" />
<asp:Repeater ID="rptApiResults" runat="server">
<!-- template in here -->
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
However, the update progress control is never shown on page load or when the repeater is sorted or the page changes. How do I get it to show "loading" until all data is loaded in the repeater?
I was doing things wrong. The update progress modal will never appear on an asynchronous page load, due to it being already loaded before the page has rendered. As it was posting back when it was paging and sorting that's when the UpdateProgress appeared.
My solution was load it asynchronously after the page load (as it's in an update panel it doesn't affect the rest of the page), by using a piece of jQuery to click a "trigger" button on $(document).ready(...), which then went off to fetch the API results. This also set the UpdateProgress to visible which disappeared after the results had finished loading.
I have a user control with three Views inside MultiView, first two views contains different controls and each have a button to submit the form, both are working as expected. Third one has two asp image button both are not attached with any validation group, causes validation is also false but post back is not happening on clicking the button, there is no javascript error i already checked that, any help is appreciated. Following is markup.
<asp:View runat="server" ID="vwPayAsGuest">
<asp:Panel ID="divButtons" runat="server" CssClass="creditcardbuttons-container">
<div class="creditcardbuttons-container-left">
</div>
<div id="divRegularPayment" class="f-left">
<asp:ImageButton runat="server" ID="lbtnRegularCheckout" ToolTip="Pay with credit card"
AlternateText="Pay with credit card" OnClick="lbtnRegularCheckout_OnClick" CausesValidation="false"/>
</div>
<div id="divPayByPayPal" class="f-left padding-left15">
<asp:ImageButton runat="server" ID="submit" CausesValidation="false"
ImageUrl="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&buttontype=ec-mark"
AlternateText="Pay via PayPal" ToolTip="Pay via PayPal (Express Checkout)" OnClick="lnkButPayPal_Click" />
</div>
</asp:Panel>
</asp:View>
I am opening dialog using Jquery Mobile. Problem is that btnSend_Click event is not firing. What I am trying to do that keeping button and textbox in update panel and do post back and close dialog after ruining on code on serverside.
Sample here
Parent Page Button HTML
<a href="/Kiosk/RetrieveTickets/RetrieveTicketsBySms.aspx" data-role="button" data-inline="true" data-theme="c" class="MyBigButton"
data-inline="true" data-rel="dialog" data-transition="pop">Via SMS
<br />
<br />
<img src="/Kiosk/images/mobile.png" />
</a>
Dialog Page HTML
<div id="dlgSms" data-role="dialog" data-theme="b">
<div data-role="header" data-theme="d">
<h1>
Retrieve Tickets By SMS</h1>
</div>
<div data-role="content" data-theme="c">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>
Please type here your mobile number. You will get your ticket on your mobile via
SMS.</p>
<asp:TextBox runat="server" ID="txtMobileNumber" placeholder="Enter Mobile Number" />
<asp:Button ID="btnSend" Text="Send SMS Now" runat="server" data-theme="b" OnClick="btnSend_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Cancel
</div>
</div>
I will describe you the main issue here.
When you click on the "Via SMS" button you open a dialog, and the script is load one diferent aspx page, the RetrieveTicketsBySms.aspx and renders it in the DOM of the previous. So the button and the update panel and the script of the RetrieveTicketsBySms.aspx is now history.
So the button its fire, but is call the RetrieveTicketsOptions.aspx page, that is not even have it, but also the hash validation is also fails, so its not fired. You also have it inside the update panel, so from what I see is not even make any post back.
The possible solution here is to place the content of the dialog, that loads the RetrieveTicketsBySms.aspx inside an iframe -if this is possible. and remove the UpdatePanel.
Our problem/question revolves around an upload control that loses the selected file (goes blank) when a postback control is used (in this case, the dropdown list posts). Any insight into what we are doing wrong or how we can fix this? Below is our code and a summary of the problem.
Any help would be greatly appreciated.
Thank you!
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="row">
<asp:DropDownList runat="server" AutoPostBack="true" ID="CategorySelection" OnSelectedIndexChanged="CategorySelection_IndexChanged" CssClass="drop-down-list" />
</div>
<div id="SubCategory" class="row" runat="server" visible="false">
<asp:DropDownList runat="server" ID="SubCategorySelection" CssClass="drop-down-list" />
</div>
<div class="row">
<asp:FileUpload runat="server" ID="FileUpload" CssClass="file-upload" />
</div>
<div class="row">
<asp:Button ID="submit" runat="server" Text="Submit" CssClass="button" OnClick="submit_ButtonClick" />
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="submit" />
</Triggers>
</asp:updatepanel>
In this form we have 2 DropDownList, 1 FileUpload and 1 submit button. Every time that the user selects one category, the subcategories are loaded (AutoPostBack=”true”).
The primary user flow works fine: User selects one category, subcategory and selects a file to be uploaded (submitted). HOWEVER, if the user selects a file first, and then selects a category, the screen will do a partial refresh and the selected file will disappear (field goes blank). As a result, the user needs to select the file again. This causes an issue because the fact that the file is no longer selected can easily be overlooked.
Seems straighforward --- but causing us a lot of grief. Any experts out there that can help?
BIG thanks!
That is the behavior of the input type=file i.e. it can't be pre-populated. Move the FileUpload outside of the UpdatePanel. In your markup, you could move both FileUpload and the submit Button outside of the UpdatePanel.
I am using the code from How to create a stunning and smooth popup using jQuery. When I click the button to activate the Ajax popup, it does appear, but the page is reloading on the button click.
How do I get around this?
Hard to say without seeing your code, but whatever link/button you are using to launch the dialog, make sure it is returning false from its click event handler (or submit event handler on a form)
Is your modal wired up to an ASP.NET button? If so, this will be set to postback on a click. Perhaps wire the modal to a regular HTML button instead?
Most likely your button is a post back button. You might want to change that configuration so that it does not automatically post back.
Since I'm using an ASP.NET button control, it wanted to post back, so I created an update panel with the AsyncPostBackTrigger ControlID=[my button id].
So the code to make it all work (with loading the jQuery library) is as follows:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="button">
<asp:Button ID="Save1" runat="server" Text="Button" onclick="Save1_Click" />
</div>
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Save1" />
</Triggers>
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
<br/><br/>
We can use it for popup-forms and more... just experiment!
<br/><br/>
Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
<br/><br/>
</p>
</div>
<div id="backgroundPopup"></div>
</div>
</form>