jquery popup not working in telerik WebApplication - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 26-Mar-2011 00:00

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 :

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Posted by Community Admin on 30-Mar-2011 00:00

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 27-Apr-2011 00:00

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

Posted by Community Admin on 02-May-2011 00:00

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

This thread is closed