-1

I'm struggling to get jQuery to work properly in Experience Editor.

I found this question and tried all the answers on that page, but none of those work for me.

So basically I have a clean page in Experience Editor. The markup for this page loads jQuery in <head>. Somewhere down in <body> I have the following code:

<script type="text/javascript">
    jQuery.noConflict();

    jQuery(document).ready(function() {
        DoStuff();
    });
</script>

DoStuff() is never reached or executed.

I've also tried this variant:

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

But still DoStuff() is not executed. I can debug this in developer tools and I can see that jQuery(document).ready(function() {}); and $(document).ready(function() {}); are reached, but they obviously do not attach themselves to the ready event.

What I'm doing now is this:

<script type="text/javascript">
    (function($) {
        DoStuff();
    }(jQuery));
</script>

and now my DoStuff() is executed, but I now have to make sure I place this code after the DOM elements it will later manipulate, which is sort of why we need $(document).ready() in the first place.

What must I do to make jQuery work properly in Experience Editor?

Using Sitecore 8.2 Update 5

2
  • Do you have any js errors in the console?
    – Richard Seal
    Jul 12 '18 at 13:18
  • @RichardSeal No, the console is clean
    – GTHvidsten
    Jul 12 '18 at 13:29
0

You will need to use the alias returned by the noConflict call. This works for me in experience editor:

var $j = jQuery.noConflict();

$j(document).ready(function () {
    DoStuff();
});
2
  • This has no effect, as it is really the same as doing jQuery(document).ready(function() {}); which also doesn't work.
    – GTHvidsten
    Jul 12 '18 at 13:42
  • Sorry about that you are right. This works for me the only difference is that i have a different Sitecore version and am loading jQuery at the bottom of page and run script from js file. Sometimes the experience editor does strange things i had a similar issue here sitecore.stackexchange.com/questions/8382/…
    – Jeroen
    Jul 12 '18 at 14:02
0

This question was answered well in https://stackoverflow.com/questions/34614617/sitecore-8-experience-editor-and-jquery and https://stackoverflow.com/questions/34670186/why-jquery-functions-are-not-loading-in-preview-mode

They both mention running jQuery in no-conflict mode. See this kb article for details: https://kb.sitecore.net/articles/286042


As an alternative approach I try to avoid running custom JavaScript in Experience Editor. I accept this is not always possible but consider presenting a slightly different view in Experience Editor as compared to the live page.

Due to the fact that Experience Editor has its own JavaScript to enable inline editing, Edit Frames and placeholders. There is already a lot of interactivity going on in edit mode. What you then often experience (as per the question) is conflicts with your custom JavaScript on the page. Or if you don't have conflicts Experience Editor is already very JS heavy.

By using logic in your razor to detect Experience Editing mode, you can create a slightly different experience for the editors with custom JS turned off.

@if (Sitecore.Context.PageMode.IsExperienceEditorEditing)

For example: Often on a homepage a feature slider exists at the top. Instead of showing a wide screen slider run by custom javascript, consider a different Experience Editor view that displays the sliders as tiles instead. Each tile is surrounded by an Edit Frame that gives the editor full ability to change the content.
Alternative view in Experience Editor

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.