Question

我想将输入字段中的文本发送到bootsfaces textarea。但是，我想知道，它不会起作用。我使用Javascript从按钮获取click事件并在javascript代码中激活send-Method：

我的HTML看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:b="http://bootsfaces.net/ui">

<h:head>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="css/style.css" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/script.js" type="text/javascript" />
<script src="js/websocket.js" type="text/javascript" />
</h:head>
<h:body>


<div class="toogleClass">
    <h:form>
        <b:panel look="primary" title="CHAT" collapsible="false">
            <b:inputTextarea rows="10" id="messages"></b:inputTextarea>
            <b:panelGrid colSpans="8,4">
                <b:inputText placeholder="Nachricht" id="message"></b:inputText>
                <b:button value="senden" look="primary" id="button"
                    onclick="send()"></b:button>
            </b:panelGrid>
        </b:panel>
    </h:form>
</div>

<b:icon name="envelope" size="3x" styleClass="message"
    tooltip="Verfasse eine Nachricht im Chat" />
<br />

蚂蚁他的我的websocket.js代码：

var websocket = new WebSocket(
"ws://" +
document.location.host +
document.location.pathname +
"chat");

websocket.onopen = function onOpen() {
var m = document.getElementById("messages");
if (typeof m !== 'undefined' && m !== null) {
    m.append("Verbunden");
}
};

websocket.onmessage = function onMessage(evt) {
var m = document.getElementById("messages");
if (typeof m !== 'undefined' && m !== null) {
    m.append(evt.data);
}
};

websocket.onclose = function onMessage(evt) {
var m = document.getElementById("messages");
if (typeof m !== 'undefined' && m !== null) {
    m.append(evt.data);
}
};

function send() {
var inputtext = document.getElementById("message");
if (typeof inputtext !== 'undefined' && inputtext !== null) {
    websocket.send(inputtext.val());
    document.getElementById("message").val("");
}

}
;

my script.js：

$(function() {

$('.message').click(function() {
    $('.toogleClass').toggle("slow");
});


});

总而言之，没有任何反应。如果我按下按钮，来自输入字段的消息不会附加在textarea中。没有例外，调试控制台没有错误。

Answer 1

输入字段的真实ID不是您对HTML编程的期望。即使输入字段在数据表或<ui:repeat>循环中迭代，JSF也会确保页面上的id是唯一的。为了达到这个目标，“clientId”从表单的id，输入字段本身的id以及有时其他一些父窗口小部件连接起来。 BootsFaces使事情变得更加复杂。它为整个小部件提供了常规的clientId，因此JSF AJAX更新可以正常工作。因此，它经常重命名嵌套在其他div中的实际输入字段。

在您的情况下，输入字段和文本区域的ID可能类似于input_j_idt5:j_idt12:message和input_j_idt5:j_idt12:messages。

当您在表单的开头添加或删除输入字段时，添加或删除片段j_idt5和j_idt12会增加侮辱性伤害。

因此，我建议使用CSS伪类而不是id。想法是将CSS类添加到输入字段和文本区域。您不需要为这两个类提供CSS规则。它们就在那里就足够了。这允许您使用document.getElementsByClassName("message-class")[0]或jQuery表达式$(".message-class")来访问输入字段。

更改Highfaces图表默认标签

1 个答案: