This is a migrated thread and some comments may be shown as answers.

$find fails for RadMultiPage

3 Answers 115 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Tom M
Top achievements
Rank 1
Tom M asked on 07 Sep 2011, 08:28 PM
$find() is failing miserably for me when I try to obtain a reference to the RadMultiPage control on my page. The following just returns null on the second statement of showPageView .Here is my markup... I've got the showPageView function bound to the OnClientItemClicked event of the RadMenu. I'm just trying to show a different multiPage when a RadMenuItem is clicked. Extremely simple, I know. Any thoughts? This is driving me crazy. I'm using VS2008 and v 2010.2.929.35

Thanks in advance for any help/insight!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    <link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </asp:ScriptManager>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            $(document).ready(function() {      // Wait for the HTML to finish loading.
                var resize = function() {
                    var height = $(window).height();  // Get the height of the browser window area.
                    var element = $("form");          // Find the element to resize.
                    element.height(height);           // Set the element's height.
                }
                resize();
                $(window).bind("resize", resize);
            });
 
            function showPageView(sender, eventArgs) {
                var clientId = "<%= RadMultiPage1.ClientID %>";
                var multipage = $find(clientId);
                if (eventArgs.get_item().get_value() != null) {
                    alert(eventArgs.get_item().get_value());
                    var pageView = multipage.findPageViewByID(eventArgs.get_item().get_value());
                    if (pageView)
                        pageView.set_selected(true);
                }
            }
    </script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div id="mainWrapper">
        <div id="pageWrapper">
            <div id="topWelcomeBanner">
                <div id="welcomebox">
                    <a target="_blank" href="http://www.mercer.com:80/regredirect.htm?siteLanguage=100">Register on our site</a
                    <font style="color:#0057A6">|</font>
                    <a target="_blank" href="https://clients.haifc.com">Log in to Client Portal</a>
                </div>
            </div>
            <div id="masthead">
                <a href="">
                    <img border="0" src="images/mercer_logo_175x24.gif" name="cmp_img_global_header_logo" alt="Mercer" title="Mercer"/>
                </a>
                <div align="right" style="font-size:10px" class="piller1">
                    <a href="">
                        <img border="0" src="images/mercer_pillars_new.gif" name="cmp_img_global_header_logo" alt="Consulting. Outsourcing. Investments."/>
                    </a>
                </div>
            </div>
            <div class="hnav">
                <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" OnClientItemClicked="showPageView" CssClass="menu">
                <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" />
                <CollapseAnimation Duration="200" Type="OutQuint" />
                <Items>
                    <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Home" Value="RadPageView6" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Bold="true">
                        <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Who We Are" Value="RadPageView1" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Bold="true">
                        <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Who We Serve" Value="RadPageView2" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Bold="true">
                        <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Research" Value="RadPageView3" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Bold="true">
                        <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Media Center" Value="RadPageView4" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Bold="true">
                        <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Contact Us" Value="RadPageView5" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Bold="true">
                        <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                    </telerik:RadMenuItem>
                </Items>
                <ExpandAnimation Type="OutQuart" />
            </telerik:RadMenu>              
            </div>
                    <div id="leftCol">
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server"
                                            SelectedIndex="0">
                            <telerik:RadPageView ID="RadPageView6" runat="server">                                           
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView1" runat="server">                                  
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView2" runat="server">                              
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView3" runat="server">
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView4" runat="server">
                                Media Center</telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView5" runat="server">
                                </telerik:RadPageView>
                        </telerik:RadMultiPage>
                    </div>
                <div id="rightCol">                 
                    <img src="images/DRH.gif" width="121px" height="212px" alt="Dennis R. Hammond"  />
                    <div id="overlay"></div>
                    <div id="dennis">Dennis Hammond</div>
                    <div style="margin-bottom:8px" class="hrboxForMercerInNewsRightBucket"></div>
                    <h3><font color="#000000"><strong>Research Weekly Update</strong></font></h3>
                    <br />
                    <asp:Button ID="btnWeekly" runat="server" Text="Get the Latest" CssClass="headerbutton" PostBackUrl="http://www.haifc.com/ResearchLibrary/weekly/2011/09062011.pdf"/>
                    <div style="margin-bottom:8px" class="hrboxForMercerInNewsRightBucket"></div>
                    <div id="connect">
                     <h3><font color="#000000"><strong>Connect with us</strong></font></h3>
                            <br />
                           <p style="font-size:12px; margin-bottom:10px;">
                          <span class="iconMercerInNews">
                            <a href="http://twitter.com/MercerInsights" target="_blank">
                            <img align="absmiddle" src="images/icn-share-twitter_14x14.gif"/>
                            </a>
                            </span>
                              <a href="http://twitter.com/MercerInsights" target="_blank" class="linksNoSize">Twitter</a>
                            </p>
                           <p style="font-size:12px; margin-bottom:10px;">
                          <span class="iconMercerInNews">
                            <a href="http://www.linkedin.com/groups?mostPopular=&;gid=113026" target="_blank">
                            <img align="absmiddle" src="images/icn-share-linkedin_14x14.gif"/>
                            </a>
                            </span>
                              <a href="http://www.linkedin.com/groups?mostPopular=&;gid=113026" target="_blank" class="linksNoSize">LinkedIn</a>
                            </p>
                           <p style="font-size:12px; margin-bottom:10px;">   
                          <span class="iconMercerInNews">
                            <a href="http://www.facebook.com/MercerInsights" target="_blank">
                            <img align="absmiddle" src="images/icn-share-facebook_14x14.gif"/>
                            </a>
                            </span>
                              <a href="http://www.facebook.com/MercerInsights" target="_blank" class="linksNoSize">Facebook</a>
                             </p>
                             <div style="margin-bottom:8px" class="hrboxForMercerInNewsRightBucket"></div>
                      </div>
                </div>
                <div id="footer">
                    <hr />
                    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                        <tbody><tr>
                            <td valign="top" align="left">
                            <p style="margin-bottom:20px;"><a href="http://www.mmc.com" title="Marsh & McLennan Companies" target="_blank">
                            <img border="0" src="images/parent_logo_199x27.gif" name="cmp_img_global_header_logo" alt="Consulting. Outsourcing. Investments."/>
                            </a></p>
                            </td>
                            <td valign="top">
                            <div id="footertable">
                                <a href="http://www.mercer.com:80/rsslisting.htm?siteLanguage=100"><img style="cursor: pointer" src="images/icon_rss.gif"></a> |  
                                <a href="http://www.mercer.com:80/termsofuse.htm?siteLanguage=100">Terms of use</a> | <a href="http://www.mercer.com:80/privacy.htm?siteLanguage=100">Privacy</a> | <a href="http://www.mercer.com:80/help.htm?siteLanguage=100">  
                                Help</a> | <a href="https://connectv7.mercer.com/eRoom">Mercer's Client Extranet</a><br />
                            ©2011 Mercer LLC, All Rights Reserved</div>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

3 Answers, 1 is accepted

Sort by
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 08 Sep 2011, 02:13 AM
Hmm weird

I'd do two things off the bat
1) Remove the RadScriptBlock definition around the script
2) Move the script to the bottom of the markup (browser stops rendering as it parses a script tag so let it parse at the bottom :)

Try this perhaps...
var clientId = $("[id$='RadMultiPage1']").attr('id');


0
Tom M
Top achievements
Rank 1
answered on 08 Sep 2011, 09:32 PM
Thanks for your reply Steve.

Removing the RadScriptBlock didn't work, that was actually something I did to try and resolve this issue. I tried using...
var clientId = $("[id$='RadMultiPage1']").attr('id');

and I was able to get the ID but unfortunately $find() stills doesn't return anything for me, just null. I tried placing the script at the bottom just inside the form tag, with no luck. I can handle this easily with a postback, but I'd rather not waste a round-trip to the server for something that should be SO easy.

Back to the drawing board.


0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 08 Sep 2011, 10:39 PM
Ok, one last try (keep the radscript block removed, and the code at the bottom just as a best prac)

Render the page...using firebug in the Console tab

1) Are there any script errors right off the bat on load?...are there any when you click a menu item?
2) In the Console tab, manually try something like this
var multipage = $find("whatever the ID is, use firebug");
alert(multipage);
...what does the alert tell us?

Steve
Tags
General Discussions
Asked by
Tom M
Top achievements
Rank 1
Answers by
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Tom M
Top achievements
Rank 1
Share this question
or