[Solved] Ajax On My Dynamic Page

[Dave]

I have a website that I am creating that is constructed dynamically.  The setup is fairly basic:

        <div id="container">
            <div id="top"></div>
            <div id="leftnav">
                <Telerik:RadPanelBar ID="RadPanelBar1" Runat="server" DataFieldID="menu_Title"
                    DataFieldParentID="menu_parent" DataNavigateUrlField="menu_NavURL"
                    DataSourceID="SqlDataSource1" DataTextField="menu_Text"
                    DataValueField="menu_Title" Height="100%" Skin="Panel" Width="100%"
                    DataMember="DefaultView" ExpandMode="SingleExpandedItem" EnableEmbeddedSkins="False"
                    OnClientItemClicked="CollapseAllItems">
                    <CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
                    <ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
                </Telerik:RadPanelBar>
                <telerik:RadRotator ID="RadRotator1" runat="server"
                    DataSourceID="XmlDataSource1" Width="100%" FrameDuration="6000"
                    ScrollDirection="Left" ScrollDuration="800" Height="300px"
                    PauseOnMouseOver="False" ItemWidth="200px">
                    <ItemTemplate>
                        <div class="tickdetail">
                            <div class="clogo"><img src="<%# XPath("LogoFile") %>" alt=""/></div>
                            <div class="tickdesc" style="text-align:center">
                                <telerik:RadTicker ID="Ticker1" runat="server" TickSpeed="50">
                                    <Items>
                                        <telerik:RadTickerItem Text='<%# XPath("Description") %>' />
                                    </Items>
                                </telerik:RadTicker>
                            </div>
                        </div>
                    </ItemTemplate>
                    <SlideShowAnimation Duration="1000" Type="Fade" />
                </telerik:RadRotator>
                <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Ticker.xml">
                </asp:XmlDataSource>
            </div>
            <div id="content" runat="server"></div>
            <div id="SubmitDiv" runat="server"></div>
            <div id="footer">
                <p>© Copyright 2009</p>
            </div>
        </div>

The important parts are the radPanelBar and the content div.  When you select an item on the rad panel it dynamically formats the HTML into a StringBuilder  then injects that HTML into the InnerHTML of the content div.  I have the prototype for this working perfectly and now I would like to Ajaxify my application and went for the simple, AjaxManager on page with RadPanelBar1 as the control that initiates the request and the content div as the control that gets updated.

Well, it doesn't seem to work like ajax magic, so I figure I will have to do it the hard way.  Problem is I am not sure exactly what the hard way is.  Any guidance how I can achieve ajax for this?

[Dave]

After reading everything I could find from support on Ajax I think I know what needs to be done following some of the examples for creating a custom Ajax request.  In fact, I did just this and it still did not work.  In creating the custom request I moved everything that loads the page to my custom AjaxRequest function and entered a If Not IsPostback() check to page load so I still spark the functions that load the page for my new visitors.

The problem is that I am using the RadPanel for navigation on the page and when it uses the NavigationUrl to append the query string to the URL, it loads the page fresh and my custom ajax stuff never runs.  If you like you can see the page I am creating and maybe help me come up with a solution.

http://www.outsource-inc.com:801

[Sebastian]

Hello Sam,

Unfortunately the url you provided is not accessible and I am not able to test your live sample.

Nevertheless, since you specified that you navigate through the RadPanelBar instance and append values to the query string of the page, you may need to modify your logic to determine whether a change in the url has been made and execute your ajax code.

Additionally, note that RadAjaxManager and RadAjaxPanel have IsAjaxRequest boolean property which designates whether the request sent to the server is triggered by one of these controls or not.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.