Pure MVC / Jquery

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? 

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.

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.

This is what I do

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)

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. 

[quote]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.

[/quote]

Hi,

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

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="ajax.googleapis.com/.../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!

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="code.jquery.com/.../script>                  else                      <script src="code.jquery.com/.../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.

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. :)

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

<body>
    @Html.Section("top")
    @if (!SystemManager.IsDesignMode && !SystemManager.IsPreviewMode)
   
        <script src="code.jquery.com/.../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)
   

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. 

Thanks very much Darrin for the additional info. I've moved this to <head> as well and it is working.