1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / jquery popup not working in telerik WebApplication

jquery popup not working in telerik WebApplication

4 posts, 0 answered
  1. JP
    JP avatar
    7 posts
    Registered:
    03 Feb 2011
    26 Mar 2011
    Link to this post
    Hi ,
    I haved used a jquery Library (from Jquery.net I think ) few times , It worked flawlessly with standard ASP sites and webApplications  but it didn't work with a telerik webApplication.

    I think it is a coming from Radscript manager but i don't know how to fix it.

    here a sample code with a popup window that shows a DIV control

    <head runat="server">
        <title></title>
        <link href="css/vader/jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js" ></script>
        <script type="text/javascript" src="Scripts/jquery-ui-1.8rc3.custom.min.js" ></script>
    </head>
    <body>
        <form id="form1" runat="server">
       <div id="dicTest" class="dialog" >
            some content
        </div>
        </form>
      
         <script type="text/javascript" >
             $(document).ready(function () {
                 var dlg6 = $("#dicTest").dialog({
                     autoOpen: false,
                     modal: true,
                     width: 400,
                     height: 200
                 });
      
                 $(".dialog").dialog('open');
             });
             
        </script>
    </body>
    </html>


    and here my telerikWebApplication page :

    <head id="Head1" runat="server">
        <title></title>
        <link href="css/vader/jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js" ></script>
        <script type="text/javascript" src="Scripts/jquery-ui-1.8rc3.custom.min.js" ></script>
        <%--<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />--%>
    </head>
    <body>
        <form id="form1" runat="server">
         <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <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>
        </telerik:RadScriptManager>
         
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Vista">
        </telerik:RadSkinManager>
        <div style="float: left; padding: 0 6px 0 10px; margin-right: auto; margin-left: auto">
            <h2 style="color: #666666">
                Courses
            </h2>
            <telerik:RadGrid ID="CourseRadGrid" runat="server" OnItemCommand="CourseRadGrid_itemCommand"
                AllowPaging="True" AllowSorting="True" GridLines="None" Height="337px" AutoGenerateColumns="False"
                Width="817px">
                <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true" AllowKeyboardNavigation="true">
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                    <Selecting AllowRowSelect="True" />
                </ClientSettings>
                <PagerStyle Mode="NextPrevAndNumeric" />
                <MasterTableView DataKeyNames="ID">
                    <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" FilterControlAltText="Filter ID column" HeaderText="ID"
                            UniqueName="ID">
                            <HeaderStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Code" FilterControlAltText="Filter Code column"
                            HeaderText="Code" UniqueName="Code">
                            <HeaderStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Titre" FilterControlAltText="Filter Titre column"
                            HeaderText="Titre" UniqueName="Titre">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn>
                            <ItemTemplate>
                                <asp:Button ID="imgbtnToggle" runat="server" CausesValidation="false" Text="aaa"
                                    CommandArgument='<%#Eval("ID") %>' CommandName="editCourse" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
    <%--                <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>--%>
                </MasterTableView>
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
                </HeaderContextMenu>
            </telerik:RadGrid>
            <br />
            <asp:Panel ID="pnlEditCourse" runat="server" Visible="false" >
                <uc1:uc_course ID="uc_course1" runat="server" />  
                <telerik:RadButton ID="RadButton1" runat="server">
                </telerik:RadButton>  
            </asp:Panel>
            <br />
        </div>
        <div style="float: left; padding: 0 10px 0 6px;">
            <h2 style="color: #666666">
                Session Cours
            </h2>
            <telerik:RadButton ID="RadButton2" runat="server" Text="Create Session" OnClick="RadButton1_Click">
            </telerik:RadButton>
            <telerik:RadGrid ID="RadGrid2" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                GridLines="None" Height="300px" Style="margin-right: 0px; margin-top: 10px;"
                Width="405px">
                <ClientSettings>
                    <Selecting AllowRowSelect="True" />
                </ClientSettings>
                <MasterTableView>
                    <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" FilterControlAltText="Filter ID column" HeaderText="ID"
                            UniqueName="ID">
                            <HeaderStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Code" FilterControlAltText="Filter Code column"
                            HeaderText="Code" UniqueName="Code">
                            <HeaderStyle Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CoursID" FilterControlAltText="Filter CoursID column"
                            HeaderText="CoursID" UniqueName="CoursID">
                            <HeaderStyle Width="100px" />
                        </telerik:GridBoundColumn>
                    </Columns>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                </MasterTableView>
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
                </HeaderContextMenu>
            </telerik:RadGrid>
        </div>
        <div style="float: none; top: 10px;">
            <telerik:RadComboBox ID="RadComboBox1" runat="server" DataTextField="Nom" DataValueField="Id"
                EnableAutomaticLoadOnDemand="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true"
                Width="401px" Height="180px">
            </telerik:RadComboBox>
        </div>s
        <script type="text/javascript">
            $(document).ready(function () {
                var dlg6 = $("#dicTest").dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400,
                    height: 20
                });
     
                $(".dialog").dialog('open');
            });
        </script>
        <div id="dicTest" class="dialog" >
            some content
        </div>
        
         
        </form>
    </body>
    </html>

    Thanks for your suggestions.

    JP
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    30 Mar 2011
    Link to this post
    Hello JP,

    Try using the built-in version of jQuery

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

    <sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    </sf:ResourceLinks>



    or register the scripts you have right before the closing forms tag.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
  3. Jeniffer
    Jeniffer avatar
    5 posts
    Registered:
    21 Dec 2010
    27 Apr 2011
    Link to this post
    Hi Sir Ivan,

    I'm new in Sitefinity 4 (as well as ASP) and I'd like to know where I can place the code you indicated:

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

    <sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    </sf:ResourceLinks>

    Shall I use a javascript control for this? If so, it has a selection saying where to place the code.

    Lastly, I'd like to know where I could place other javascript code. As you know, am not familiar with using Master files and other types of files such as ascx..and so on. So i really need your guidance. Thank you
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    02 May 2011
    Link to this post
    Hi JP,

    You can add the code I sent you to a control template of a built-in or custom control. Another option is using our Java Script control

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
4 posts, 0 answered