PrimeFaces 和 JQuery:资源排序
PrimeFaces and JQuery: resource ordering
我对 JQuery 导入的顺序有疑问。
在头部我做了:
<h:head>
<f:facet name="first">
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
</f:facet>
<f:facet name="middle">
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
</f:facet>
...
第一次加载我的页面时,一切似乎都是正确的,尤其是 jquery/jquery-plugins order:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/components.css.jsf?ln=primefaces&v=6.0" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/default/core.css.jsf?ln=bsf" />
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/bsf.css.jsf?ln=bsf" />
<!--[if lt IE 9]><script src="/installateurportal/javax.faces.resource/js/html5shiv.js.jsf?ln=bsf"></script><script src="/installateurportal/javax.faces.resource/js/respond.js.jsf?ln=bsf"></script><![endif]-->
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/core.js.jsf?ln=primefaces&v=6.0"></script>
...
页面上有类似
的按钮
<h:commandLink styleClass="btn btn-mini btn-default"
actionListener="#{testController['filterTable']}">
<i class="fa fa-refresh"/>
</h:commandLink>
按下其中之一后,页面再次加载,但 JS-Console 中出现错误,例如
Uncaught ReferenceError: jQuery is not defined
at tbmDisposition-aendernPF.jsf:3
VM219 jquery-plugins.js.jsf?ln=primefaces&v=6.0:5 Uncaught ReferenceError: jQuery is not defined
at VM219 jquery-plugins.js.jsf?ln=primefaces&v=6.0:5
at VM219 jquery-plugins.js.jsf?ln=primefaces&v=6.0:5
当你查看生成的 html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/default/core.css.jsf?ln=bsf" />
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/bsf.css.jsf?ln=bsf" />
<!--[if lt IE 9]><script src="/installateurportal/javax.faces.resource/js/html5shiv.js.jsf?ln=bsf"></script><script src="/installateurportal/javax.faces.resource/js/respond.js.jsf?ln=bsf"></script><![endif]-->
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/components.css.jsf?ln=primefaces&v=6.0" />
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/core.js.jsf?ln=primefaces&v=6.0"></script>
...
您可以看到 jquery-plugins 在 以上 jquery 导致了描述的错误。
当然,我在 head 部分尝试了各种替代方案,但均未成功,因此,我们将不胜感激。
版本信息
PrimeFacs:6.0
JSF: 1.2_15-jbossorg-2
服务器:jboss-as-7.1.2.Final
问候
凯
更新:
调试 HeadRenderer 我发现 HeadRenderer 似乎根本不负责 JQuery。
它必须与 Widget 的 ResourceDependencies 及其呈现方式有关。
有谁知道哪个渲染器可能负责 ResourceDependencies?
更新二:
此外,我正在使用 BootsFaces 进行布局。现在我了解到 BootsFaces 有自己的 JQuery 和资源优化......
更新 3:
在 BootsFaces 的 ResourceFileComparator 中,JS 文件将被重命名为
if (name.contains("jquery-ui")) name = "2.js"; // make it the second JS file
else if (name.contains("jquery")) name = "1.js"; // make it the first JS file
但在我的例子中,jquery-ui 的名称是:"jquery/jquery-plugins.js"
=> "jquery/jquery.js" 和 "jquery/jquery-plugins.js" 都将重命名为“1.js”
我在 BootsFaces-OSP (https://github.com/TheCoder4eu/BootsFaces-OSP/issues/640) 上发起了一个问题并找到了一个解决方法(在问题中描述)。
所以现在它对我有用。
我对 JQuery 导入的顺序有疑问。 在头部我做了:
<h:head>
<f:facet name="first">
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
</f:facet>
<f:facet name="middle">
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
</f:facet>
...
第一次加载我的页面时,一切似乎都是正确的,尤其是 jquery/jquery-plugins order:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/components.css.jsf?ln=primefaces&v=6.0" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/default/core.css.jsf?ln=bsf" />
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/bsf.css.jsf?ln=bsf" />
<!--[if lt IE 9]><script src="/installateurportal/javax.faces.resource/js/html5shiv.js.jsf?ln=bsf"></script><script src="/installateurportal/javax.faces.resource/js/respond.js.jsf?ln=bsf"></script><![endif]-->
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/core.js.jsf?ln=primefaces&v=6.0"></script>
...
页面上有类似
的按钮<h:commandLink styleClass="btn btn-mini btn-default"
actionListener="#{testController['filterTable']}">
<i class="fa fa-refresh"/>
</h:commandLink>
按下其中之一后,页面再次加载,但 JS-Console 中出现错误,例如
Uncaught ReferenceError: jQuery is not defined
at tbmDisposition-aendernPF.jsf:3
VM219 jquery-plugins.js.jsf?ln=primefaces&v=6.0:5 Uncaught ReferenceError: jQuery is not defined
at VM219 jquery-plugins.js.jsf?ln=primefaces&v=6.0:5
at VM219 jquery-plugins.js.jsf?ln=primefaces&v=6.0:5
当你查看生成的 html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/default/core.css.jsf?ln=bsf" />
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/css/bsf.css.jsf?ln=bsf" />
<!--[if lt IE 9]><script src="/installateurportal/javax.faces.resource/js/html5shiv.js.jsf?ln=bsf"></script><script src="/installateurportal/javax.faces.resource/js/respond.js.jsf?ln=bsf"></script><![endif]-->
<link type="text/css" rel="stylesheet" href="/installateurportal/javax.faces.resource/components.css.jsf?ln=primefaces&v=6.0" />
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/installateurportal/javax.faces.resource/core.js.jsf?ln=primefaces&v=6.0"></script>
...
您可以看到 jquery-plugins 在 以上 jquery 导致了描述的错误。
当然,我在 head 部分尝试了各种替代方案,但均未成功,因此,我们将不胜感激。
版本信息
PrimeFacs:6.0
JSF: 1.2_15-jbossorg-2
服务器:jboss-as-7.1.2.Final
问候 凯
更新: 调试 HeadRenderer 我发现 HeadRenderer 似乎根本不负责 JQuery。 它必须与 Widget 的 ResourceDependencies 及其呈现方式有关。 有谁知道哪个渲染器可能负责 ResourceDependencies?
更新二: 此外,我正在使用 BootsFaces 进行布局。现在我了解到 BootsFaces 有自己的 JQuery 和资源优化......
更新 3: 在 BootsFaces 的 ResourceFileComparator 中,JS 文件将被重命名为
if (name.contains("jquery-ui")) name = "2.js"; // make it the second JS file
else if (name.contains("jquery")) name = "1.js"; // make it the first JS file
但在我的例子中,jquery-ui 的名称是:"jquery/jquery-plugins.js" => "jquery/jquery.js" 和 "jquery/jquery-plugins.js" 都将重命名为“1.js”
我在 BootsFaces-OSP (https://github.com/TheCoder4eu/BootsFaces-OSP/issues/640) 上发起了一个问题并找到了一个解决方法(在问题中描述)。 所以现在它对我有用。