More in this section
Forums / General Discussions / Pure MVC / Jquery

Pure MVC / Jquery

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
11 posts, 0 answered
  1. Ruth
    Ruth avatar
    25 posts
    Registered:
    17 May 2012
    15 Sep 2015
    Link to this post

    Including jquery on a Pure MVC layout page breaks backend editing when using the prescribed method:

    @Html.Script(ScriptRef.JQuery)

    This is due to the followng script error:  

    TypeError: jQuery.validator is undefined

    Can anyone advise on how this can be done? Has anyone actually used Pure MVC on a real project? 

     

  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    15 Sep 2015 in reply to Ruth
    Link to this post

    Yeah on multiple projects, haven't had an issue

     Try @Html.Script(ScriptRef.JQuery, "top") ...or whatever all your other widgets views have it set to.

    Is it on a specific widget, you on the latest version...?
  3. Ruth
    Ruth avatar
    25 posts
    Registered:
    17 May 2012
    16 Sep 2015
    Link to this post

    Thanks for your response.

    I'm adding jquery to the template not widget, this all works as expected but its the fact that once I create a page based on the template I'm unable to edit in the backend due to the error mentioned above.

    I'm using the trial version of 8.1.5810.0 in order to evaluate Pure MVC with a view to using it on an upcoming project.

  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    16 Sep 2015 in reply to Ruth
    Link to this post

    This is what I do

     

    @if (!Util.IsEditMode)
    {
        @Html.Section("jquery")
        @Html.Script(ScriptRef.JQuery, "jquery")
    }
    @Html.Section("bottom")

    I then do a find\replace in my project for  @Html.Script(ScriptRef.JQuery, "top") to @Html.Script(ScriptRef.JQuery, "jquery")

     (this is the Util method)

    namespace SitefinityWebApp
    {
        public static class Util
        {
            public static bool IsEditMode
            {
                get
                {
                    return SystemManager.IsDesignMode;
                }
            }
        }
    }

    This puts jQuery right at the bottom of the page, by default it's gonna load at the top.  It's injected in page edit mode, so this loads the once I specify only in Live move where I want. 

     

    Ruth said:

    Thanks for your response.

    I'm adding jquery to the template not widget, this all works as expected but its the fact that once I create a page based on the template I'm unable to edit in the backend due to the error mentioned above.

    I'm using the trial version of 8.1.5810.0 in order to evaluate Pure MVC with a view to using it on an upcoming project.

  5. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    18 Sep 2017
    18 Sep 2015
    Link to this post
    Hi,

    Here's a simplified version of Steve's approach:

    @if (!SystemManager.IsDesignMode)
    {
        @Html.Script(ScriptRef.JQuery, "top")
    }

    And here's what we use in the default templates:

    @* Inline editing scripts and helpers. They should be available only when inline editing is possible. *@
    @if (Html.ShouldRenderInlineEditing())
    {
        @Html.Script(ScriptRef.MicrosoftAjax, "top")
        @Html.Script(ScriptRef.MicrosoftAjaxCore, "top")
        @Html.Script(ScriptRef.JQuery, "top")
     
        @Html.Script(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.jquery.ba-outside-events.min.js"), "top")
        @Html.Script(ScriptRef.KendoAll, "top")
        @Html.Script(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.RequireJS.require.min.js"), "top")
        @Html.InlineEditingManager(false)
    }

    Regards,
    Velizar Bishurov
    Telerik
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  6. Blair
    Blair avatar
    0 posts
    Registered:
    19 Jun 2017
    06 Dec 2017
    Link to this post

    Sorry if this has been answered anywhere else but I've been searching for days and am totally lost. Looking for some help if at all possible.

    I'm on Sitefinity version 10.1.6502 using pure MVC using a copy of the Bootstrap resource package. This version of Sitefinity comes with a built in JQuery version 1.12.1 which is considerably old now as JQuery is now at version 3.2.1. I'm trying to include the new version of JQuery (3.2.1) but it is conflicting with Sitefinity's version and corrupting the dashboard and of course the runtime. Is there anyone that has had success with including a later version of JQuery other than built in JQuery? Or am I doing something completely wrong? I've done the following steps with no success:
    - Make a copy of "ResourcePackages/Bootstrap" folder and rename the copy to "ResourcesPackages/MyProject" (example).

    - Created a Layout (default.cshtml) page within "ResourcePackages/MyProject/MVC/Views/Layouts".
    - in the default.cshtml page I had included the following reference to JQuery CDN:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">
    - I then wrapped my JavaScript with the noConflict wrapper.

    I can identify that the JQuery version is taking by typing in $.fn.jquery in the browser console but I'm getting the following error which breaks the Sitefinity backend:
    -------------------------------
    Uncaught TypeError: Cannot read property 'addMethod' of undefined
        at Telerik.Sitefinity.Web.UI.GenericCollectionBinder.initialize (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl13_TSM&compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%3aen%3a8446b584-fa8b-471b-825f-...........................

    Any help would be much appreciated!

  7. Darrin Robertson
    Darrin Robertson avatar
    105 posts
    Registered:
    18 Jul 2004
    06 Dec 2017
    Link to this post

    Hi Blair

    You are right. The backend does not work with Jquery 3. What I have done to get around this is in my layout page I put a condition check to load different versions. Version 3 for public pages and 1 for backend editing.

    @if (SystemManager.IsDesignMode || SystemManager.IsPreviewMode)         {             <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>         }         else         {             <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script   }

     

    The assumption is that when in your page editing mode you don't need Jquery 3 in particular.  (In my case I didn't )

    I hope the option helps you.

     

  8. Blair
    Blair avatar
    0 posts
    Registered:
    19 Jun 2017
    07 Dec 2017
    Link to this post

    Thank you very much Darrin, that solution is working - using JQuery version 1.12.1 while in dashboard and using 3.2.1 on the live site. I still see the error message "Cannot read property 'addMethod', while in the dashboard but all dashboard functionality seems to be working still. So I don't think its a problem.

     

    Thank you again for the solution, it has lowered the stress on this long struggle. :)

  9. Blair
    Blair avatar
    0 posts
    Registered:
    19 Jun 2017
    07 Dec 2017 in reply to Blair
    Link to this post

    I was able to resolve the error message, see my solution:

    <body>
        @Html.Section("top")
        @if (!SystemManager.IsDesignMode && !SystemManager.IsPreviewMode)
        {
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        }

        <header>
            @Html.SfPlaceHolder("header")
        </header>
        <main>
            @Html.SfPlaceHolder("content")
        </main>
        <footer>
            @Html.SfPlaceHolder("footer")
        </footer>

        @* Inline editing scripts and helpers. They should be available only when inline editing is possible. *@
        @if (Html.ShouldRenderInlineEditing())
        {
            @Html.Script(ScriptRef.MicrosoftAjax, "top")
            @Html.Script(ScriptRef.MicrosoftAjaxCore, "top")

            // This version is required for Sitefinity to dashboard to work properly.
            @Html.Script(ScriptRef.JQuery, "top")

            @Html.Script(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.jquery.ba-outside-events.min.js"), "top")
            @Html.Script(ScriptRef.KendoAll, "top")
            @Html.Script(ScriptRef.KendoTimezones, "top")
            @Html.Script(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.RequireJS.require.min.js"), "top")
            @Html.InlineEditingManager(false)
        }

  10. Darrin Robertson
    Darrin Robertson avatar
    105 posts
    Registered:
    18 Jul 2004
    07 Dec 2017 in reply to Blair
    Link to this post

    Hi Blair

    I should have mentioned. I put this in my <head> section  because that is where Sitefinity loads its jquery.

    I also remove and disable the "Inline Editing" stuff because it interferes with my scripts sometimes and overall, I prefer people to edit pages in the backend. So will only enable it on request. 

  11. Blair
    Blair avatar
    0 posts
    Registered:
    19 Jun 2017
    07 Dec 2017 in reply to Darrin Robertson
    Link to this post
    Thanks very much Darrin for the additional info. I've moved this to <head> as well and it is working.
11 posts, 0 answered