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

[Solved] Telerik and Jquery Problem

9 Answers 302 Views

General Discussions

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

This question is locked. New answers and comments are not allowed.

Gurbhej Singh asked on 24 Feb 2011, 08:53 AM

Hi,
I am new to jquery and Telerik. I am having the problem with jquery dialog box and telerik extensions installed in my project.
The problem is ...I cant open dialog box if this line exists in the code.
<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %>
Dialog box works fine without it. This dialog box is not a Telerik dialog box.
Any suggestions why its not working?

Code is below:

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
   $(document).ready(function () {
   $("#dialog").dialog();
   });
   </script>

      <%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.default.css").Combined(true).Compress(true))%>
</head>
<body>
   <div class="page">
   <div id="header">
   <div id="title">
   <h1>
   My MVC Application</h1>
   </div>
   <div id="logindisplay">
   <% Html.RenderPartial("LogOnUserControl"); %>
   </div>
   <div id="menucontainer">
   <ul id="menu">
   <li>
   <%: Html.ActionLink("Home", "Index", "Home")%></li>
   <li>
   <%: Html.ActionLink("About", "About", "Home")%></li>
   </ul>
   </div>
   </div>
   <div id="main">
   <asp:ContentPlaceHolder ID="MainContent" runat="server" />
   <div id="footer">
   </div>
   </div>
   </div>
<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %>
</body>
</html>

======================
Code in view File is:-
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
   Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div id="dialog" title="Dialog Title">I'm in a dialog</div>


</asp:Content>

9 Answers, 1 is accepted

answered on 26 May 2011, 08:30 AM

Hi,
This problem had been solved long time ago.
I think problem was with this line:-
<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %>

This line of code is not allowing you to register another jquery or javascript into your application.
Instead of this line, try to write this code:-
<%: Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group => group.Combined(true).Compress(true))%>

I hope this will work.Let me know the status.
Best of Luck
Sandhu

answered on 07 Mar 2012, 10:11 AM

Hi, thanks for the help, there you go..

    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../../Scripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../../Scripts/datepicker/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tablesorter.pager.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.form.js" type="text/javascript"></script>
    <% Html.Telerik().StyleSheetRegistrar()
                      .DefaultGroup(group => group.Add("/telerik/telerik.common.min.css")
                      .Add("/telerik/telerik.windows7.min.css"))
        .Render();
                     %>

answered on 07 Mar 2012, 10:53 AM

Normal css declarations should be before script declarations :

<html>

<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<% Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("/telerik/telerik.common.min.css")

.Add("/telerik/telerik.windows7.min.css"))

.Render();

%>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script src="../../Scripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>

<script src="../../Scripts/jquery-ui.min.js" type="text/javascript"></script>

<script src="../../Scripts/datepicker/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.tablesorter.pager.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>

</head>

<body>

<div class="page">

<div id="header">

<div id="Div1">

<h1>

My MVC Application</h1>

</div>

<div id="logindisplay">

<% Html.RenderPartial("LogOnUserControl"); %>

</div>

<div id="menucontainer">

<ul id="menu">

<li>

<%: Html.ActionLink("Home", "Index", "Home")%></li>

<li>

<%: Html.ActionLink("About", "About", "Home")%></li>

</ul>

</div>

<div id="Div2">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />

<div id="footer">

</div>

<% Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false).OnDocumentReady("$('#dialog').dialog();").Render(); %>

</body>

</html>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

Home Page

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

</asp:Content>

if it not work again, try to remove :

<script src="../../Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.tablesorter.pager.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>

External sorter, pager etc. could have some negative effect.