Update UpdatePanel using JavaScript

Hi Everybody,

i want to load dynamically content from some user controls (with forms,or some data-controls) using atlas. So i use an UpdatePanel for loadingthe user control into a placeholder.

Using buttons for loading new content works fine. But i still want touse a function which is callable per javascript. I think this way ismore flexable than using the Buttons, becaus every button needs it'sown Sub-Routine. But i want to have a function with an Parameter forloading the new content.

Has anybody a good idea how to realize this? Working with Update()-Function of UpdatePanel-Control doesn't logically work.

Here is some code:

At first my test-function

1 <WebMethod()> _
2Public Function Test(ByVal intIdAs String)As Boolean
3 Dim contentNameAs String = intId &".ascx"
4Dim contentControlAs Control = Page.LoadControl(contentName)
5
6 PlaceHolder.Controls.Add(contentControl)
7
8 UpdatePanel.Update()
9Return True
10 End Function

I called this per JS-Function ...

1function test(intId) {
2 PageMethods.Test(intId);
3}

... per onClick-Method of a Link

1<a href="#" onclick="test(1);">Test</a>
2
3 <atlas:UpdatePanel ID="UpdatePanel" runat="server">
4 <ContentTemplate>
5 <asp:PlaceHolder ID="PlaceHolder" runat="server">
6 </asp:PlaceHolder>
7 </ContentTemplate>
8 <Triggers>
9 <atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />
10 <atlas:ControlEventTrigger ControlID="Button2" EventName="Click" />
11 </Triggers>
12 </atlas:UpdatePanel>

But it doesn't work. I have tried so much.

Is there a possibilty to get User Controls generated HTML Code?
Or has anybody an idea for realizing this with an other way?

Thanks for all hints.

Regards,

AndréHi Andre,

The main problem with what you are attempting to do is that you are attempting to make a modification to the page without actually performing a postback. Executing the web service method "Test" from Atlas using the PageMethod.Test statement will execute your web method, but doesn't actually perform a postback and therefore you can't modify your page. The web method can really only return data, not have ASP.NET re-render part of the page.

A simple, but maybe not the best way of accomplishing this, is to use a hidden text field and a button to provide postback data. You set the value of the hidden text box to the data needed to create the user control (i.e. intId) and then click the button programmatically (i.e. button1.click). Then you have a common routine on the server, like your web method "test", that alters the page as necessary based upon the postback information.

HTH
Hi,

thank you. But isn't there another method for loadig content dynamically per ATLAS?
Or is there a possibility to create a new event, bind the UpdatePanel-Trigger and raise it with JavaScript?

I believe there must be a cleaner method than using a hidden textfield and call a button's sub.
How do you this?

Best regards,

André
Hi,

I am relatively new to ASP.NET and Atlas but have a similar question. Is there any way to generate an Update event on the UpdatePanel using client side Javascript?

I have a situation where I need to have two separate web applications for security reasons, but I want both applications to use a common search page. I can create a link on the first page (parent) to open the search page as a popup window easily enough. What I want to do is return the found item id back to the parent window and trigger an asynchronous update when the popup window is closed.

If I use javascript only, I can have a function in the parent window called 'Update()' and use it to create the xmlhttprequest object etc. I would prefer to use an Atlas UpdatePanel in the parent window and trigger an update from the popup window using the onunload event. (Note: the popup window page is not in the same application as the UpdatePanel)

Is this possible? Is there a better way to achieve this?

Regards,
Trevor.
OK, so I think we agree that a web method isn't going to do the trick for you as the page needs to go through its lifecycle and process the new UserControl and render it into Html.

There is no magic bullet in Atlas to load content dynamically. An UpdatePanel requires a postback to do any updating. You can use a web method to return an Html string to you and then parse it and place it where you want in the DOM, but that really is a lot of work and doesn't require an UpdatePanel.

That being said I'll assume that we agree that a postback needs to occur in order to load your user control into the page.

I believe you need a generalized method of posting back data that is not really related to a server control. The question remains; how to get the data back to the server on which control to load? The data has to be part of the post data. I suggest using a hidden text box as the transport mechanism as it's easy to work with and is fairly light weight and then telling that UpdatePanel to update through the use of clicking a hidden button. To be honest, I've used this pattern on a multi-million dollar application and have good success with it. I'm not saying it's perfect and maybe I'll see a better pattern that Ishould'veused, but it provides the flexibilty that you and I require.

Happy Coding
"Is there any way to generate an Update event on the UpdatePanel using client side Javascript?"

You need to have whatever is defined as a trigger of the UpdatePanel or a server control contained within the UpdatePanel cause a postback.

Happy Coding
Thanks for explaining that. I wasn't aware of the PageMethods collection until just now.

Trevor.

BUMP!!!

That worked Marvellously :)

I used it with a calendar control. I wanted to have different controls in a date cause a postback. WELL as far as I know adding sever controls doesn't work because they don't cause post backs when added inside a Day Cell.

SO dropped some anchors in the day. Had the onclick of the anchor fill a hidden field and click a button outside the updatepanel. Which triggered it :)

Works great.