I am currently moving some form fields on an existing webform into a modal popup window using the asp.net toolkit extender. One of the fields uses the toolkit's toggle button extender on a checkbox a works quite well. When I move the checkbox and extender into the modal popup div, the toggle button extender stops working.
After confirming the problem, I decided to try using a jquery plug-in called checkbox that provides the same function. Again this plugin worked as advertised until I moved it into the modal window div. I had hoped to avoid hand rolling a solution.
I am guessing that the problem has something to to with css positioning. I would love to hear possible fixes before I build a solution from scratch.
Edit
Here is my original approach with toggle button extender:
<!-- works fine here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<asp:Panel ID="pnlAddTransaction" runat="server" Width="600px" Height="300px" CssClass="ModalWindow">
<!-- doesn't work here - outside UpdatePanel but inside modal window div-->
<asp:UpdatePanel ID="udpAddTransaction" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<!-- This is the desired location but doesnt work here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<!-- etc-->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hdnInvestmentID" />
</Triggers>
</asp:UpdatePanel>
<asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeAddTransaction" runat="server"
TargetControlID="pnlAddTransaction" PopupControlID="pnlAddTransaction"
CancelControlID="btnCancel" OnCancelScript="hideAddTransactionPopup()"
BackgroundCssClass="modalBackground" />
I have also now tried placing a hidden field and an image and writing jquery click function. This also results in the same issue (stops working inside modal div).I can get code to run by hard coding onclick event attribute. I would love to understand why and if there are any more elegant ways to work around this. I guess I could try a jquery modal popup plugin, but I didn't plan to rewrite this whole page.
Take a look at your ModalPopupExtender Attributes. TargetControlID and PopupControlID are the same panel "pnlAddTransaction". The TargetControlID is the control that triggers the control at PopupControlID to display.
Related
This code is in a user control . and i am providing a sample code structure to get an overview .
<Update Panel UpdateMode= "Conditional">
<panel></panel>
<panel>
<button></button>
</panel>
<updatepanel UpdateMode="Conditional"></updatepanel>
</Updatepanel>
so when i click a button in the second panel , i am supposed to hide that panel and it is happening but simultaneously the other panels are getting refreshed . what could be the possible reason for that ?
Based on the code snippet you may have a couple issues to fix:
Make sure you have a ScriptManager on the page with EnablePartialRendering="true"
Correct your markup by making the <UpdatePanel> elements ASP.NET UpdatePanel controls by prefixing them with "asp:".
Add UpdateMode="Conditional" to both of your UpdatePanel controls
Move the sections you want to update asynchronously into the UpdatePanel controls.
Example
<asp:ScriptManager ID="MyScriptManager" EnablePartialRendering="true" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="MyUpdatePanel" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" />
</ContentTemplate>
</asp:UpdatePanel>
The following article is a great resource to learn more about the UpdatePanel with details on it's capabilities.
Understanding Partial Page Updates with ASP.NET AJAX
I have a webform with an asp button that when clicked, needs to perform a function in c#. The function does not affect anything on the page so I do not need a refresh of the page.Is there any way to prevent an asp button from doing a postback? I am not familiar at all with JavaScript so I need to perform this function in c#. Surely there is a way. I have researched but nothing works. CausesValidation="false"' does not work. UseSubmitBehavior=false does not work. And neither does setting the OnClientClick to return false. Keep in mind I am not using JavaScript. Anyone know how?
Add a ScriptManager in your Page first,
Then add an update panel which will have all the controls. This will prevent the entire page being posted back.
here goes an example
<asp:ScriptManager ID="MainScriptManager" runat="server" />
<asp:UpdatePanel ID="pnlHelloWorld" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lblHelloWorld" Text="Click the button!" />
<asp:Button runat="server" ID="btnHelloWorld" OnClick="btnHelloWorld_Click" Text="Update label!" />
</ContentTemplate>
</asp:UpdatePanel>
If you do not want to monkey with the ScriptManager or the server side stuff, you can always use an HTML control as in:
<input type="button" id="myButton" value="Do Something" onclick="doSomeFunction(); return false;" />
OR
<button id="myButton" onclick="doSomeFunction(); return false;">Do Something</button>
I did discover that attaching the click event to a button element via jQuery will result in a postback (at least that's what happened to me), so I switched to the tried and true input element.
I want to develop a registration form with 2 panels. One panel is personal information and another is address details. In these panels the user fills in all details of personal information and after completion of this, the user clicks on Add Address Details. If the user clicks on that, the second panel should be visible without page refresh. How can I accomplish this?
you would use javascript to append the append the second form to to the div of the first form. Or however you have it setup. So in jquery it would look something like this:
<script type="text/javascript">
$('#buttonid').click(function() {
$('#divid').append("<form><input />etc etc etc</form>");
});
</script>
You should use the ASP.NET Wizard control. It is the perfect tool for these scenarios. Scott Gu has a post with some links explaining how to use it. I recommend you look at it.There's a video linked that walks you through a full example.
I don't know, but hiding/showing panels based on certain conditions on the same page feels inelegant and hacky to me.
You should look into using an UpdatePanel. Within there you could place to Panels with different form information. Tie in a few button clicks and hide/show the different panels.
Edit with a simple example
<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
<asp:UpdatePanel id="upnl" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server">
<!--personal info-->
<asp:Button ID="btn1" runat="server" Text="this button could validate personal info, hide pnl1 and show pnl2" />
</asp:Panel>
<asp:Panel ID="pn2" runat="server" Visible="false">
<!--address info-->
<asp:Button id="btn2" runat="server" Text="this button could validate address information and finally submit the form." />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I've got a web form using asp.net. In this form I have a lot of inputs.
For one of the drop downs whenever you press it, the focus jumps to the next text box.
This is in a update panel, because there is some server side work required for filtering, hiding, etc.
If the User chooses Australia from visaType_filter then it hides visaType_dd and shows visaType_tb. If they choose NZ its the other way around.
Now my question:
Is there a bug or something that makes focus jump off of a drop down when you click on it to go to the next input (or control)?
Code:
<fieldset>
<asp:UpdatePanel ID="visaTypeUpdatePanel" runat="server">
<ContentTemplate>
<label>Visa Type Number</label>
<label>
<asp:DropDownList ID="visaType_filter" runat="server" Width="40%" OnSelectedIndexChanged="visaType_filter_SelectedIndexChanged" AutoPostBack="true"/>
<asp:TextBox ID="visaType_tb" runat="server" Width="40%" OnTextChanged="visaType_tb_blur" AutoPostBack="true"/>
<asp:DropDownList ID="visaType_dd" runat="server" Width="40%"/>
<asp:Literal ID="visaType_literal" runat="server" />
</label>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
<fieldset>
I resolved my problem by using jQuery and Ajax in place of UpdatePanels.
AFAIK, when UpdatePanel gets triggered, the focus does not get maintained. So ideally, you shouldn't be getting any focus at all.
Regardless of reason, you can work-around the issue using ScriptManager.SetFocus method to maintain focus on the drop-down.
You can also have client side solutions for maintaining focus - they essentially work by hooking into AJAX requests to remember the focused control before update panel is triggered and then restoring it back when update panel post-back is completed: see this link for one such solution.
I have a rather complex custom control - the custom control has a couple of update panels in it.
I am trying to use the control like this inside of an update panel:
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="btn1" runat="server" Text="Sample Button" /> <asp:Label ID="lblTime" runat="server"></asp:Label>
<cc1:MyCustomControl ID="MyCustomControl1" runat="server" >
</cc1:MyCustomControl>
</ContentTemplate>
</asp:UpdatePanel>
When I click the button in the update panel, it does an async post back and there is no screen "flicker" When I click a button in my custom control the page flickers and does a full post back.
Inside the custom control, there are update panels that are trying to do full postbacks (based on triggers).
How can I make the page level UpdatePanel not do a full postback no matter what is going in inside of the custom control?
Have you thought about explicitly setting an asp:AsyncPostBackTrigger with the btn1 control in the up1 UpdatePanel control.
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btn1" runat="server" Text="Sample Button" />
<asp:Label ID="lblTime" runat="server"></asp:Label>
<cc1:MyCustomControl ID="MyCustomControl1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Edit: How you tried to explicitly call the Update method in the button's OnClick event for the Update Panel? This includes the Update panels embedded within the custom control.
Figured out the solution similar issue to this: How can I get an UpdatePanel to intercept a CompositeControl's DropDownList
Except my control causing the postback was in an updatepanel with a full postback trigger. I was able to pull that control out so it was not nested with in update panels and that resolved it.
I would first look if there is some other issue with the custom control causing the full page postback, as in any case what should be happening is that the whole update panel refreshes (still with ajax).
After that, just look at the Nesting UpdatePanel Controls section of this:
http://msdn.microsoft.com/en-us/library/bb398867.aspx#
Also make sure to have the ScriptManager control with the property EnablePartialRendering set to true.
On the UpdatePanel, set the property ChildrenAsTriggers="true". This tells the UpdatePanel to intercept all PostBack invocations that originate from inside the UpdatePanel.
You may want to also explore the UpdateMode property, which determines what kinds of events trigger an update. (By default, an UpdatePanel will refresh if any other panel on the screen gets refreshed. This threw me for awhile until I realized what was going on.)