Dynamic content for modal popup

Hi -

I want to change the contents of a modal popup dynamically through client side script. For that purpose, I've included a div element and change it's innerhtml property. When I test whether the change got done I can read the new value through javascript but the modal popup extender shows the old html (which loaded when the page was loaded). I think I may have to call a method to let the modal popup extender know I updated the content, but I don't know how to do that.

Any help is greatly appreciated!!

Oliver

I thought I'd add some code so you know what I am talking about.

Thanks,

Oliver

 function showpopup() { event.bubble = false; var d = document.getElementById("popupcontent"); d.innerhtml='<img src="images/spinner.gif" alt="Please wait ..." />'; var popup =$find('BMPNoShow'); popup.show(); alert(d.innerhtml); }<ajaxToolkit:ModalPopupExtender ID="MPNoShow" BehaviorID="BMPNoShow" runat="server" CancelControlID="BNoShowCancel" DropShadow="true" PopupControlID="PNoShow" PopupDragHandleControlID="PNoShow" TargetControlID="PNoShow"> </ajaxToolkit:ModalPopupExtender> <asp:Panel ID="PNoShow" runat="server" Style="background: white; border-color: Gray; border-style: solid; width: auto; padding: 10px" EnableViewState="false"> <div id="popupcontent"> </div> <br /> <asp:Button ID="BNoShowCancel" runat="server" Text="Cancel" UseSubmitBehavior="false" /> <asp:Button ID="BNoShowConfirm" runat="server" Text="Mark as no-show" UseSubmitBehavior="false" /> <asp:HiddenField ID="HFNoShowRequest" runat="server" /> </asp:Panel>

Take a look at the Dynamic* properties of the modalpopup, which allow you to load the content of a modalpopup dynamically using a web service. This will automatically load the content into the modalpopup when it is shown without you having to do anything.

Thanks - that's even better than what I was trying to do :)

Dynamic Ajax Content rendering in a div tag

Hi All,

I had a requirement like, where i will do asynchrounous get of data, and load the data say 10 records in a div tag. if user scroll through the div and reaches teh end of the div tag, i will remove all conents from div and load fresh contents from 11-20 in div. Like this it goes...

Now my problem,

Step 1:- 1-10 records show in div (now user scroll to end of div)

Step 2:- Remove 1-10 records show 11-20 records in div. My Question is if user wants to see 1-10 records back, i am not able to take the user to the top since the first record is at the top of the div. I can't fire any event here.

Can anyone help on this?

Thanks in advance,

Karthikeyan.

Can you poste some code? I get the idea but I want to see what even handler you are using to track the scrolling in conjunction with the records being scrolled. Perhaps also you might want to use hidden fields that put the value of the previous set of pages (in your case 1-10).

Hi,

Thank you for your post!

I suggest you keep 20 records in the div, and just display half of them.

Then, when you want get the pre 10 records, just do it like you get the next 10 Records because you can fire some events of the scroll.

If you have further questions,let me know.

Best Regards,

Dropshadow extender for DIV doesnt resize

Hello! This is my first post and I am new to AJAX . I have a few questions about the dropshadow extender:

1. Does it only work with server-side controls (with runat="server" attribute)?

2. I am trying to fetch XML data from a file using the XMLHttpRequest object and putting the rsult in a div. The div resizes according to the volume of content. However, if I try to extend it using the DropShadow extender, the drop shadow doesn't resize. Am I missing something here?

Thanks in advance.

Added later:

Hi,

1. Yes, it can only be used to extend server side controls.

2. Please set TrackPosition to true to make the extender change its size according to the size of its target. You may find this in the sample web site of the AjaxControlToolkit.

Hope this helps.

Thanks Raymond!

I know how to make it work now.

DropDownExtender positioning error

If the target control of a DropDownExtender is used in a control or div tag that has absolute, relative or fixed positioning the dropdownlist will incorrectly position below the target control.

The actual context menu will be displayed in the correct place but the hover panel that looks like a standard dropdownlist control will be displayed incorrectly. See the following link for more information and screenshot of the problemhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=10075

Here is an arbitrary example. The real problem is when this control is used in third party grids that make use of relative positioning of some of their outer elements.

Has anybody else encountered this problem? Anybody know how the DropDownExtender javascript/CSS could be updated to correct this issue?

Example code

<div style="position:fixed">
<asp:Label ID="Label2" runat="server" Text="Select action"
Style="display: block; width: 100px; padding:2px; padding-right: 50px;" />
</div
<asp:Panel ID="Panel1" runat="server" CssClass="ContextMenuPanel"
Style="display :none; visibility: hidden;">
<asp:LinkButton runat="server" ID="LB1" Text="Mocha" CssClass="ContextMenuItem" />
<asp:LinkButton runat="server" ID="LB2" Text="Java" CssClass="ContextMenuItem" />
<asp:LinkButton runat="server" ID="LB3" Text="None" CssClass="ContextMenuItem" />
</asp:Panel
<ajaxToolkit:DropDownExtender runat="server" ID="DropDownExtender1" TargetControlID="Label2" DropDownControlID="Panel1" />

I'm having the same problem. It started after installing the latest build. The problem is not limited to 3rd party controls. Even the slightest modification of the Ajax dropdown example to position the target element creates this problem

Example code: -- same as dropdown example in the AJAX Samples: (For the sample, the problem occurs with either "relative" or "absolute")

<divstyle="position: relative"><asp:LabelID="TextLabel"runat="server"Text="Hover Over Me"Font-Names="Tahoma"Font-Size="11px"Style="display: block; width: 300px; padding:2px; padding-right: 50px;"/></div><asp:PanelID="DropPanel"runat="server"CssClass="ContextMenuPanel"Style="display:none;visibility:hidden;"><asp:LinkButtonrunat="server"ID="Option1"Text="Option 1"CssClass="ContextMenuItem"/><asp:LinkButtonrunat="server"ID="Option2"Text="Option 2"CssClass="ContextMenuItem"/><asp:LinkButtonrunat="server"ID="Option3"Text="Option 3 (Click Me!)"CssClass="ContextMenuItem"/></asp:Panel><ajaxToolkit:DropDownExtenderrunat="server"ID="DDE"TargetControlID="TextLabel"DropDownControlID="DropPanel"/>