几个小时以来,我一直在努力地努力,以使tagmanager.js在我的JSF 2.2页面上工作,现在我希望能获得一些帮助。我使用jsp页面可以正常工作,但这些页面已过时且已弃用。我可以很好地输入标签,但是当我提交表单时,标签文本不会将其放入我的Java bean中。标题,说明和YouTube URL确实将其放入bean。根据tagmanager网站,它应该按照我设置的方式工作。我输入的标签应该进入名为“ j_idt16:hiddenTags”的隐藏输入中
链接到tagmanager:http://welldonethings.com/tags/manager/v3
这是我的网页代码“ requestimp.xhtml”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:body>
<ui:composition template="/WEB-INF/templates/DefaultTemplate.xhtml">
<ui:define name="content">
<h:outputScript library="js/jquery" name="jquery-1.10.2.min.js"/>
<h:outputScript library="js/tagmanager" name="tagmanager.js"/>
<f:verbatim>
<script type="text/javascript">
function start()
{
jQuery(".tm-input").tagsManager({
prefilled: null,
CapitalizeFirstLetter: false,
AjaxPush: null,
AjaxPushAllTags: null,
AjaxPushParameters: null,
delimiters: [44, 9, 13], // comma, tab, enter
backspace: [8],
maxTags: 6,
replace: true,
output: null,
tagsContainer: null,
tagCloseIcon: 'x',
tagClass: '',
hiddenTagListId: 'j_idt16:hiddenTags',
hiddenTagListName: null,
validator: null,
onlyTagList: false
});
};
window.onload=function(){start();};
</script>
</f:verbatim>
<h:outputStylesheet library="css" name="tagmanager.css"/>
<h1 class="codeimps-form-h1">Make A Request!</h1>
<h:form>
<h:inputHidden id="hiddenTags" value="#{requestBean.tags}"/>
<h:panelGrid columns="3">
<h:outputText value="Title" styleClass="codeimps-form-description"></h:outputText>
<h:inputText id="input_Title" value="#{requestBean.title}" size="32" required="true"></h:inputText>
<h:message for="input_Title"></h:message>
<h:outputText value="Description" styleClass="codeimps-form-description"></h:outputText>
<h:inputTextarea id="input_Description" value="#{requestBean.description}" rows="5" cols="28" p:maxlength="140" required="true"></h:inputTextarea>
<h:message for="input_Description"></h:message>
<h:outputText value="YouTube URL" styleClass="codeimps-form-description"></h:outputText>
<h:inputText id="input_YouTubeURL" value="#{requestBean.youtubeURL}" size="50" p:placeholder="video is worth a thousand words...">
<f:validator validatorId="YouTubeURLValidator"/>
</h:inputText>
<h:message for="input_YouTubeURL"></h:message>
<h:outputText value="Tags" styleClass="codeimps-form-description"></h:outputText>
<h:inputText id="input_Tags" size="32" p:autocomplete="off" p:placeholder="enter a tag" p:class="input-medium tm-input tm-input-info" p:data-original-title=""></h:inputText>
<h:message for="secret_Tags"></h:message>
</h:panelGrid>
<h:commandButton value="submit" action="#{requestBean.submit}"></h:commandButton>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</h:html>
这是加载表单时我网站的渲染输出:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<head id="j_idt2">
<title>codeimps.com</title><link type="text/css" rel="stylesheet" href="/codeimps/faces/javax.faces.resource/codeimps.css?ln=css" /><link type="text/css" rel="stylesheet" href="/codeimps/faces/javax.faces.resource/tagmanager.css?ln=css" /> </head><body>
<div id="header">
<h1 class="codeimps-impact codeimps-impact-h1">codeimps - real working examples</h1>
</div>
<div id="content"><script type="text/javascript" src="/codeimps/faces/javax.faces.resource/jquery-1.10.2.min.js?ln=js/jquery"></script> <script type="text/javascript" src="/codeimps/faces/javax.faces.resource/tagmanager.js?ln=js/tagmanager"></script>
<script type="text/javascript">
function start()
{
jQuery(".tm-input").tagsManager({
prefilled: null,
CapitalizeFirstLetter: false,
AjaxPush: null,
AjaxPushAllTags: null,
AjaxPushParameters: null,
delimiters: [44, 9, 13], // comma, tab, enter
backspace: [8],
maxTags: 6,
replace: true,
output: null,
tagsContainer: null,
tagCloseIcon: 'x',
tagClass: '',
hiddenTagListId: 'j_idt16:hiddenTags',
hiddenTagListName: null,
validator: null,
onlyTagList: false
});
};
window.onload=function(){start();};
</script>
<h1 class="codeimps-form-h1">Make A Request!</h1>
<form id="j_idt16" name="j_idt16" method="post" action="/codeimps/faces/requestimp.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt16" value="j_idt16" />
<input id="j_idt16:hiddenTags" type="hidden" name="j_idt16:hiddenTags" value="code" /> <table>
<tbody>
<tr>
<td><span class="codeimps-form-description">Title</span></td>
<td><input id="j_idt16:input_Title" type="text" name="j_idt16:input_Title" size="32" /> </td>
<td></td>
</tr>
<tr>
<td><span class="codeimps-form-description">Description</span></td>
<td><textarea id="j_idt16:input_Description" name="j_idt16:input_Description" cols="28" rows="5" maxlength="140"></textarea></td>
<td></td>
</tr>
<tr>
<td><span class="codeimps-form-description">YouTube URL</span></td>
<td><input id="j_idt16:input_YouTubeURL" type="text" name="j_idt16:input_YouTubeURL" size="50" placeholder="video is worth a thousand words..." /></td>
<td></td>
</tr>
<tr>
<td><span class="codeimps-form-description">Tags</span></td>
<td><input id="j_idt16:input_Tags" type="text" name="j_idt16:input_Tags" size="32" autocomplete="off" class="input-medium tm-input tm-input-info" placeholder="enter a tag" data-original-title="" /></td>
<td></td>
</tr>
</tbody>
</table>
<input type="submit" name="j_idt16:j_idt29" value="submit" /><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="nbewb1N+jemdQtriI+qX0ls6u52sq5PP9zurZDzvcC+hWpAZZzvit9A4K1zEKSrQOQ660omyB7Rm70LLWR8n4VJH4dxEduElZeL3TCr8s+fuXENAk/gh7G6frdvazPY+R6m1kI/Idny8kChhW/6UyvrFD267PlruL9Phcwc3pSmIM0TlDf1o3JkbRog0SG4ZjnEC1Y0i9YXitrHxmL7b7WNM0za8IUjQ47vxeC+TG6Ka+O05VMm0rtDoS9eP8T4r1WKP2xPcySMxSYMF11POnwc5dqj8x0FALnGpWU6Sd2BkplptShHSyVp9dN5R3Os5kzVjJUbmq730vdgb1wPVZDx4MoOKY+3f9czOTwvUCcoltRb9FLjlbEGcGeE8wtuSEPOT0KvxejxONWp9cIpeelNPOOMvlaaV6tDX1ChVAzhCvFKLYIbSqVhW8Jompg+A6VqmnWUqSqPlR+IZ24unBF4UedMzFyqljLbskku03QQr9XRpIyF7ar1eEP6A0zvc4u4NJbTcWfcyKTRyE7QNuGfeABycZEKemOQgwW6G8NzZd0LgkxGcsKjVI89Nryrj9iWyuJX+8qcQJQeX0IZjsVUFTlyPmuiLWad33uPwq3SLaLR40S4gpoquKC1p3PpWbWyTwBEiwACjDKRWFJIZgoXctrzpffOmH6Xhuk2527VDcCDaw2kJ2kU/9+8wD3bWae51zF5gEfiFYd3ykafI/H4Fr12VKnypxX4G9jqBapj39gxHn4s5PYKhapxgODO1hN6e5KYM61dFYyPwwCLEOqQjsZ9rvMXuINAJbyZxYslils2uc8I3ZS6v2xgGLSLAYBKE6aSWxa0F+eciLLtewxSS7ThDHw7MUj9OZUKxfQOYYXkAepYzp2UVI3N92qyIXxxUf+HaI3t4byAiHOtD7JytbAS/9CKXDAFn7b7wR9gOqNi8E4VivKODqWDcYbAd" autocomplete="off" />
</form>
</div>
<div id="footer">
<h3 class="codeimps-impact codeimps-impact-h3">Copyright 2013-2014 Jody McAdams</h3>
</div></body>
最后说明:
我有一个名为“ RequestBean.java”的Java bean,除id =“ input_Tags”的输入外,该表单上的所有其他输入均有效
最佳答案
我阅读了tagmanager.js
的源代码,不赞成使用hiddenTagListId
字段。请改用output
。
例:
jQuery(".tm-input").tagsManager({
output: 'input[id$=hiddenTags]'
});
顺便说一句,将子目录放置到
name
而不是library
。<h:outputScript library="js" name="jquery/jquery-1.10.2.min.js"/>
<h:outputScript library="js" name="tagmanager/tagmanager.js"/>
关于java - JSF 2.2表单上的tagmanager.js不起作用。我究竟做错了什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20834889/