4

I am getting some strange characters in my View when using Experience Editor.

This is the main layout;

@model RenderingModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,300,300i,400,400i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">


    <title>Trees for Wildlife</title>

    <link href="Css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="Css/custom_css.css" rel="stylesheet">
    <link href="Css/NWF.css" rel="stylesheet">


    <!-- Owl Carousel Stylesheets -->

    <link rel="stylesheet" href="Css/owl.carousel.min.css">
    <link rel="stylesheet" href="Css/owl.theme.default.css">


    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/custom.js"></script>
    <script src="Scripts/owl.carousel.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div id="main-mobile-search" class="collapse">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Search</button>
            </span>
        </div>
    </div>


    <div id="banner-nav-container" class="microsite-banner">

        <div class="home-banner-overlay"> </div>

        <div class="clearfix"></div>

        @Html.Sitecore().Placeholder("head-content")
        @Html.Sitecore().Placeholder("header-content")
        @Html.Sitecore().Placeholder("HeroImage")

    </div>
    <div>
        @Html.Sitecore().Placeholder("main-content")
    </div>


    @Html.Sitecore().Placeholder("microsite-footer-sub-navigation")
    @Html.Sitecore().Placeholder("footer-content")
    @Html.Sitecore().Placeholder("footerNavigation")

    <a href="#top">
        <div style="position: relative">
            <div id="back-to-top" class="hidden-xs">
                <img class="center-block" src="images/arrow-up-circle.svg" onerror="this.onerror=null; this.src='arrow-up-circle.png'" alt="Back to Top">
            </div>
        </div>
    </a>

    <script>
        $('a[href*="top"]:not([href="top"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    </script>

    <div id="mobile_social_sticky" class="hidden-sm hidden-md hidden-lg">
        <div id="mobile-donate-sticky">
            Donate <img class="heart-icon" src="images/heart-icon.svg" onerror="this.onerror=null; this.src='images/heart-icon.png'" alt="Donate">
        </div>

        <div id="mobile-facebook-sticky" class="mobile-sticky-item">
            <img class="center-block" src="images/facebook-footer.svg" onerror="this.onerror=null; this.src='images/facebook-footer.png'" alt="Visit our Facebook">
        </div>

        <div id="mobile-twitter-sticky" class="mobile-sticky-item">
            <img class="center-block" src="images/twitter-footer.svg" onerror="this.onerror=null; this.src='images/twitter-footer.png'" alt="Visit our Twitter">
        </div>

        <div id="mobile-email-sticky" class="mobile-sticky-item">
            <img class="center-block" src="images/email-footer.svg" onerror="this.onerror=null; this.src='images/email-footer.png'" alt="Email to a Friend">
        </div>


    </div>


    <script>
        var searchIcon = document.getElementById("search-icon");
        var closeIcon = document.getElementById("close-icon");
        TweenMax.set(closeIcon, { x: -100 });

        searchIcon.addEventListener('click', function () {
            TweenMax.to(searchIcon, .5, { x: -100 });
            TweenMax.to(closeIcon, .5, { x: 0 });
            console.log('search clicked');
        });

        closeIcon.addEventListener('click', function () {
            TweenMax.to(searchIcon, .5, { x: 0 });
            TweenMax.to(closeIcon, .5, { x: -100 });
            console.log('close clicked');
        });
    </script>


</body>
</html>

This is a partial MVC Controller Rendering in the placeholder head-content, which works great in Preview mode but when I try to work with it in Experience Editor, I have two problems:

  1. I have all of these weird markup

    here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the '{0}' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{7CAFC3BA-B846-46DF-8B0D-2AE218541158}?lang=en&ver=1","custom":{"allowedRenderings":[],"editable":"false"},"displayName":"header-content","expandedDisplayName":null}{"commands":[{"click":"chrome:rendering:sort","header":"Change position","icon":"/temp/iconcache/office/16x16/document_size.png","disabledIcon":"/temp/document_size_disabled16x16.png","isDivider":false,"tooltip":"Move component.","type":""},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest('webedit:componentoptions(renderingId={3A64C4E1-B1D8-47EF-AB5C-D013F60E81A0},id={7CAFC3BA-B846-46DF-8B0D-2AE218541158},referenceId={49929205-3267-42

  2. I added a placeholder in my layout in Sitecore, and then in the Presentation details I set a rendering to the main-content placeholder. I gave it a Datasource and assigned some allowed renderings

Normally, in Experience Editor mode I would have a tab, called "Add Here" when I press the "add new component" in the experience editor, nothing happens.

Note, I did get a message the webedit.css is not found, I don't know what this is or where to get it, but I checked my include /AppConfig/Include for Sitecore.MvcExperienceEditor.config and it is there. I just don't know what to do.

I have worked with Sitecore MVC successfully in the past but I did not set this up.

  • Can you post the code for the View that is returned by the Controller Rendering? – DougCouto Jun 7 '17 at 1:29
1

So it sounds like you might be having a couple of issues. For the issue with weird mark up refer to this article: https://kb.sitecore.net/articles/286042

To sum that issue up, if you have jquery on the page, the Prototype Javascript library might conflict with your Jquery library. To get past this issue, just use Jquery in the No-Conflict Mode.

Also you may want to wrap the @Html.Sitecore().Placeholder("head-content") placeholder in a Div, like this:

<div>
    @Html.Sitecore().Placeholder("head-content")
</div>

For the second issue, this probably means you don't have an Placeholder settings defined. It will not show an option to Add Here until you configure placeholder settings. Or as a second option, you would need to enable setting WebEdit.PlaceholdersEditableWithoutSettings and set the value to true. This will allow you to use the experience editor and add renderings to placeholders without having placeholder settings defined.

| improve this answer | |
  • hey thanks, I have been following your videos, I have been working on and off with Sitecore since 6.3 ... I did site last year in 8.0 and I didn't have any issues, but now I am working with a small team and we are all in architecture mode. this thing with jquery no-conflict ... where on the page does that go, at the top or bottom. I don't think we have a $document.Ready( function(){}); on this page, the markup was done by someone else. whatever missing webedit.css could that be causing some issue? can I email you directly? – Paul T. Rykiel Jun 7 '17 at 1:51
  • Hi Thank you! The Experience Editor can be tricky sometimes. I actually personally think it might be the wrapping of the div around your placeholders. As for the Jquery no conflict, this link here might be helpful: api.jquery.com/jquery.noconflict – Dylan Young Jun 7 '17 at 1:57
  • I will try all of your suggestions. thank you again – Paul T. Rykiel Jun 7 '17 at 1:58
  • Let me know if that doesn't work and I'll brain storm on something else :-) – Dylan Young Jun 7 '17 at 1:59
  • no that did not work, but I did figure that my "add this " tab is working, it is just hidden, and I probably need some padding about the div – Paul T. Rykiel Jun 7 '17 at 2:13

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.