jQuery noconflict() not working
The first script is not working, the second is.
<script type="text/javascript">
var pageHits = [30,60,22,5,60,88,102];
var rssHits = [33,45,121,23,55,35,77];
var xAxis = ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'];
jQuery(function() {
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
$('#barChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateBarChartOptions());
});
$('#lineChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
});
$('#stackedBarChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateStackedBarChartOptions());
});
});
function CreateLineChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
seriesDefaults:{
markerOptions:{
show: true,
style: 'diamond'
}
},
legend: {
show: true,
location: 'nw'
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function 开发者_Go百科CreateStackedBarChartOptions()
{
var optionsObj = {
stackSeries: true,
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.BarRenderer
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
<script language="javascript">
jQuery("#red").treeview({
animated: "fast",
collapsed: true,
control: "#treecontrol",
}
});
</script>
The first script is for a collapsible tree and the second for a chart.. when executed separately the output is fine but when i try to implement both in one page, the tree is not produced properly but the chart is ok.
Take a look at this:
jQuery(function() {
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
/*......*/
});
If you like to use the dollar-sign to access jQuery inside the function when using jQuery.noConflict()
, you'll need to pass the $ as argument to the function:
jQuery(function($) {
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
/*......*/
});
You'll also need to replace all occurences of $ inside CreateLineChartOptions(), CreateBarChartOptions() and CreateStackedBarChartOptions() with jQuery, when using jQuery.noConflict() there will be no global variable $ pointing onto jQuery, that's the issue.
So this edited version should work:
var pageHits = [30,60,22,5,60,88,102];
var rssHits = [33,45,121,23,55,35,77];
var xAxis = ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'];
jQuery(function($) {
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
$('#barChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateBarChartOptions());
});
$('#lineChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
});
$('#stackedBarChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateStackedBarChartOptions());
});
});
function CreateLineChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: jQuery.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
seriesDefaults:{
markerOptions:{
show: true,
style: 'diamond'
}
},
legend: {
show: true,
location: 'nw'
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: jQuery.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:jQuery.jqplot.BarRenderer,
rendererOptions:{
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function CreateStackedBarChartOptions()
{
var optionsObj = {
stackSeries: true,
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: jQuery.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:jQuery.jqplot.BarRenderer
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
精彩评论