AjaxToolKit Issues in Modal Popup in IE 10 - asp.net

I have a following implementation in an asp.net application.
In abc.aspx i have this tag:
<ajaxToolkit:ModalPopUpExtender popupControlId="pnl">
<asp:Panel id="pnl">
<iframe src="example.aspx" id="fr2">
</asp:Panel>
Now the example.aspx has a PopUp Control Extender as like this
<asp:Textbox id="txt">
<asp:UpdatePanel id=udp>
<ContentTemplate>
<asp:Button/>
<asp:CheckBoxList>
<asp:Button/> .
</ContentTemplate>
</asp:UpdatePanel>
<ajaxToolkit:PopUpControlExtender targetControlId="txt">
</ajaxToolkit>
Now that PopupControlExtender in example.aspx runs fine when it is normally rendered as an aspx page.When the Page is Implemented as above in an iframe,in IE10, the PopUp Control Extender Doesnot Work as Desired.But it Works Fine In compatibility modes of IE as Well as Normal modes in Firefox,Chrome and Safari.
Please Help on this ..

Related

ASP.NET update panel nested refreshing

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

Listbox not causing post back in Chrome and Safari

In chrome and safari I am having problems with a list box I have. The data is loaded on the backend initially which works fine. But then on the event SelectedIndexChange I want to figure out what they selected and update my panel with that info. Problem is chrome and safari is not calling the event. Ive checked for script erros and get none. IE and FF work just fine, so I am just wondering what is wrong with those browsers and what I can do to fix this. Basically this is a control that sits inside a sharepoint 2007 page.
<asp:UpdatePanel ID="ISudpl" runat="server">
<ContentTemplate>
<strong>Product</strong><br /><asp:ListBox runat="server" ID="Product"
OnSelectedIndexChanged="Filter_SelectedIndexChanged" EnableViewState="true" AutoPostBack="true"
SelectionMode="Multiple" Rows="15" CssClass="designIntent"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Product" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
I think this is a documented issue with Microsoft AJAX and webkit based browsers check here http://blog.turlov.com/2009/01/aspnet-ajax-compatibility-patch-for.html and here Asp.Net, DropDownList, AutoPostBack and Google Chrome for a possible solution
You do not need Trigger because your control(ListBox) is inside same UpdatePanel. Please remove the complete <Triggers></Triggers> block from your code and check if it works in Chrome?

ASP.NET - Ajax Control Toolkit - TabContainer always hidden

I used the following code to add TabContainer to page
<asp:TabContainer ID="TabContainer1" runat="server">
<asp:TabPanel runat="server" HeaderText="tab one" ID="TabPanel0">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="tab two" ID="TabPanel1">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
but when the page is rendered TabPanel is always Hidden,I wateched the html code by Firebug and found visibility is hidden... what is the problem?
http://i.stack.imgur.com/m1eSW.jpg
Have you tried to set the ActiveTab-Property(from codebehind) or the ActiveTabIndex from codebehind or aspx?
You could also check if it works if you explicitly set the display to visible:
ActiveTabIndex="0" style="display:block;visibility:visible;"
Are you sure that the Ajax libraries are loaded correctly? Do you have other Ajax-Controls inside of your TabContainer? Check if all of your html in that page is valid.
Are you using the latest AjaxToolkit and the ToolkitScriptManager instead of the ScriptManger?
You need to use the Script Manager from the Ajax Control Toolkit, add it after the form tag.
i had the same issue and after 2 hours of googling i found a solution. In my case I had to change asp:ScriptManager to ajaxToolkit:ToolkitScriptManager.
You may want check that you have used ToolkitScriptManager instead of ScriptManager. This will solve your problem.
We've solved this problem at our company, after trying everything found on websites by changing the website's appPool from Classic to Integrated.
In my case: The active tab was hidden (server side: Visible="false").
It seems if you activate in server side a hidden tab, it'll add visibilty:hidden to the tabcontainer!
Try setting ActiveTabIndex="0" on the TabContainer

UpdatePanel not working in IE or Chrome

I have an updatepanel on my masterpage. Within the contentplace holder I have my update progress control. When a user clicks on the button I load some data into a gridview. This works perfectly in FireFox. User clicks the button, the loading image in my updateprogress fires and loads the gridview. When I test this in IE 6 or 7 or in Chrome. It does a full postback and the updateprogress is never shown. So the updatepanel doesnt seem to be working in these two browsers. Code is below. Again...it works perfect in FireFox.
***From Masterpage ***
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<contenttemplate>
<asp:contentplaceholder id="holder" runat="server" />
</contenttemplate>
</asp:UpdatePanel>
**From aspx page ****
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img src="ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
We had some namespace and dll issues with this.

asp.net toggle button extender and modal popup extender collision

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.

Resources