如何解决与Primefaces jQuery的冲突 [英] How to solve a conflict with primefaces jquery
问题描述
我正在开发一个带有primefaces 5的项目，一页使用需要jquery的js文件，但显示Uncaught TypeError: undefined is not a function，但是当我将jquery的源从<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>更改为
Im developing a project with primefaces 5, one page uses a js file that needs jquery, but shows Uncaught TypeError: undefined is not a function, but when I change my jquery source from <h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/> to
<h:head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
</h:head>
可以正常工作，但是我失去了许多
works fine but I lost many primefaces features like contexMenu
如何解决此冲突?
这是我的javascript文件:
This is my javascript file:
(function($, $S) {
//$ jQuery
//$S window.localStorage
//Variables Declaration
var $board = $('#notesForm\\:board'),
//Board where the Posticks are sticked
Postick, //Singleton Object containing the Functions to work with the LocalStorage
len = 0, //Length of Objects in the LocalStorage
currentNotes = '', //Storage the html construction of the posticks
o; //Actual Postick data in the localStorage
//Manage the Posticks in the Local Storage
//Each postick is saved in the localStorage as an Object
Postick = {
add : function(obj) {
obj.id = $S.length;
$S.setItem(obj.id, JSON.stringify(obj));
},
retrive : function(id) {
return JSON.parse($S.getItem(id));
},
remove : function(id) {
$S.removeItem(id);
},
removeAll : function() {
$S.clear();
}
};
//If exist any postick, Create it/them
len = $S.length;
if (len) {
for (var i = 0; i < len; i++) {
//Create all posticks saved in localStorage
var key = $S.key(i);
o = Postick.retrive(key);
currentNotes += '<div class="postick"';
currentNotes += ' style="left:' + o.left;
currentNotes += 'px; top:' + o.top;
//data-key is the attribute to know what item delete in the localStorage
currentNotes += 'px"><div class="toolbar"><span class="delete" data-key="'
+ key;
currentNotes += '">x</span></div><div contenteditable="true" class="editable">';
currentNotes += o.text;
currentNotes += '</div>';
}
//Append all the posticks to the board
$board.html(currentNotes);
}
//When the document is ready, make all posticks Draggable
$(document).ready(function() {
$(".postick").draggable({
cancel : '.editable',
"zIndex" : 3000,
"stack" : '.postick'
});
});
//Remove Postick
$('span.delete').live('click', function() {
if (confirm('Are you sure you want to delete this Note?')) {
var $this = $(this);
//data-key is the attribute to know what item delete in the localStorage
Postick.remove($this.attr('data-key'));
$this.closest('.postick').fadeOut('slow', function() {
$(this).remove();
});
}
});
//Create postick
$('#notesForm\\:btn-addNote')
.click(
function() {
$board
.append('<div class="postick" style="left:20px;top:70px"><div class="toolbar"><span class="delete" title="Close">x</span></div><div contenteditable class="editable"></div></div>');
$(".postick").draggable({
cancel : '.editable'
});
});
//Save all the posticks when the user leaves the page
window.onbeforeunload = function() {
//Clean the localStorage
Postick.removeAll();
//Then insert each postick into the LocalStorage
//Saving their position on the page, in order to position them when the page is loaded again
$('.postick').each(function() {
var $this = $(this);
Postick.add({
top : parseInt($this.position().top),
left : parseInt($this.position().left),
text : $this.children('.editable').text()
});
});
}
})(jQuery, window.localStorage);
推荐答案
PrimeFaces是基于jQuery的JSF组件库，已经已随jQuery(和UI)一起提供.一旦您在页面上使用PrimeFaces组件，PrimeFaces就会自行加载所有组件.绝对没有必要沿着它手动加载另一个jQuery文件.它只会像您遇到的所有颜色发生冲突.
PrimeFaces as being a jQuery based JSF component library already ships with jQuery (and UI) out the box. PrimeFaces loads them all by itself once you use PrimeFaces components on the page. There's absolutely no point of manually loading another jQuery files along it. It'll only conflict in all colors as you experienced.
如果您实际上想在不一定包含PrimeFaces组件的页面上使用jQuery/UI，因此jQuery/UI不一定要自动包含，那么您需要按以下方式手动包含PrimeFaces捆绑的jQuery :
If you actually want to use jQuery/UI on a page which doesn't necessarily include PrimeFaces components and thus jQuery/UI doesn't necessarily get auto-included, then you need to manually include the PrimeFaces-bundled jQuery as follows:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
注意:这不会重复出现. JSF/PrimeFaces能够检测到您已经手动声明了它们，并且不会自动包含另一个.
Note: this won't end up in duplicate inclusions. JSF/PrimeFaces is capable of detecting that you already manually declared them and won't auto-include another one.
或者，如果您实际上想升级 PrimeFaces捆绑的jQuery/UI到较新的版本，则可以将这些文件精确地 放在以下位置和文件名:
Or, if you actually want to upgrade PrimeFaces-bundled jQuery/UI to a newer version, then place those files on exactly the following location and file names:
WebContent
|-- resources
| `-- primefaces
| `-- jquery
| |-- jquery.js <-- newer jQuery version
| `-- jquery-plugins.js <-- newer jQuery UI version
:
如果在WAR中找到JSF资源而不是JAR，则WAR中的资源优先于JAR中的资源.
When a JSF resource is found in WAR instead of JAR, then those in WAR will have higher loading precedence over those in JARs.
如果仍然遇到Uncaught TypeError错误，请确保在Internet上找到的jQuery代码段与PrimeFaces捆绑的jQuery版本兼容. PrimeFaces 5.0随jQuery 1.11.0和jQuery UI 1.10.3一起提供.您的代码段似乎针对jQuery 1.4，并且在jQuery 1.11的路径中已很多进行了更改.例如，$.live()在1.7中已弃用，在1.9中已删除.另请参见文档.
If you're still facing Uncaught TypeError errors, then make sure that the jQuery snippet you found in the Internet is compatible with the PrimeFaces-bundled jQuery version. PrimeFaces 5.0 ships with jQuery 1.11.0 and jQuery UI 1.10.3. Your snippet seems to be targeted at jQuery 1.4 and a lot has been changed in the path to jQuery 1.11. So is for example $.live() deprecated in 1.7 and removed in 1.9. See also the documentation.
这篇关于如何解决与Primefaces jQuery的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
