Sitecore 8体验编辑器和jQuery [英] Sitecore 8 experience editor and jquery

问题描述

以下javascript无法在页面编辑器模式下工作：

  Page.ClientScript.RegisterStartupScript（this.GetType（），脚本，< script src = \// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\"></script><script src = \ http://code.highcharts.com/highcharts.js\ >< /脚本>中）; 
  

我将它改为：

<$ p $ （this.GetType（），script，< script src = \// ajax.googleapis.com/ajax/libs/jquery/1.11.1 /jquery.min.js\\"></script><script src = \http://code.highcharts.com/highcharts.js\>< / script>< script> ; scSitecore&安培;&安培; scSitecore.prototype.initializeModalDialogs（）< /脚本>中）;

但现在在页面编辑器模式下没有任何内容被保存。

要在noConflict模式下包含jquery，我添加了以下代码行：

  Page.ClientScript.RegisterStartupScript this.GetType（），script，< script src = \// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\"></脚本>< script src = \http://code.highcharts.com/highcharts.js\>< / script>< script> jQuery.noConflict（）; window.onload = function（） {var mainDiv = $（\main \）;}< / script>）; 
  

为了包含highchart，我添加了一个带有id的div作为容器，并在代码后面添加了一行代码。在普通视图中，highchart正在显示，但不是以页面编辑器模式显示。

  Page.ClientScript.RegisterStartupScript（this.GetType（）， charts，< script src = \containers.js\>< / script>）; 
  

Containers.js的代码：

 $（function（）{
 $（'＃containers'）。highcharts（{
 title：{
 text：'Monthly Average Temperature'，
x：-20 // center 
}，
字幕：{
 text：'Source：WorldClimate.com'，
x：-20 
}，
 xAxis：{
类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，
'Jul'，'Aug'，' 9月'，'10月'，'11月'，'12月'] 
}，
 yAxis：{
标题：{
 text：'Temperature（°C）'
 $ b plotLines：[{
 value：0，
 width：1，
 color：'＃808080'
}] 
}， 
 tooltip：{
 valueSuffix：'°C'
}，
 legend：{
 layout：'vertical'，
 align：'right'， 
 verticalAlign：'m iddle'，
 borderWidth：0 
}，
 series：[{
 name：'Tokyo'，
 data：[7.0，6.9，9.5，14.5，18.2 ，21.5,25.2,26.5,23.3,18.3,13.9,9.6] 
}，{
名称：'纽约'，
数据：[-0.2,0.8,5.7,11.3,17.0 ，22.0,24.8,24.1,20.1,14.1,8.6,2.5] 
}，{
名称：'柏林'，
数据：[-0.9，0.6，3.5，8.4，13.5， 17.0,18.6,17.9,14.3,9.0,3.9,1.0] 
}，{
名称：'伦敦'，
数据：[3.9,4.2,5.7,8.5,11.9,15.2， 17.0，16.6，14.2，10.3，6.6，4.8] 
}] 
}）; 
 
}）; 
  

解决方案

在体验编辑器中，在无冲突模式下使用jQuery JavaScript
库。

请查看以下文章：
http://learn.jquery.com/using-jquery-core/avoid-conflicts -other-libraries /

它全部位于kb.sitecore.net的Sitecore文档中（请参阅 https://kb.sitecore.net/articles/286042 ）。

---

编辑

试着包装容器.js code in：

 （function（$）{
 ... 
}）（jQuery）; 
  

Following javascript is not working in page editor mode:

Page.ClientScript.RegisterStartupScript(this.GetType(),"script","<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><script src=\"http://code.highcharts.com/highcharts.js\"></script>");

I changed it to:

Page.ClientScript.RegisterStartupScript(this.GetType(),"script","<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><script src=\"http://code.highcharts.com/highcharts.js\"></script><script>scSitecore&&scSitecore.prototype.initializeModalDialogs()</script>");

But now nothing is getting saved in page editor mode.

To include jquery in noConflict mode, I have added following line of codes:

Page.ClientScript.RegisterStartupScript(this.GetType(), "script", "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><script src=\"http://code.highcharts.com/highcharts.js\"></script><script>jQuery.noConflict();window.onload = function(){var mainDiv = $( \"main\" );}</script>");

To include highchart I have added a div with id as "containers" and following line in code behind. In normal view highchart is getting displayed but not in page editor mode.

Page.ClientScript.RegisterStartupScript(this.GetType(), "charts", "<script src=\"containers.js\"></script>");

Code of Containers.js:

$(function () {
$('#containers').highcharts({
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

});

解决方案

To avoid editing issues in Experience Editor use jQuery JavaScript library in the No-Conflict mode.

Please check the following article for details: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

It's all in the Sitecore documentation on kb.sitecore.net ( see https://kb.sitecore.net/articles/286042 ).

---

EDIT

Try to Wrap you container.js code in :

(function ($) {
    ...
})(jQuery);

这篇关于Sitecore 8体验编辑器和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！