2017-02-03 3 views
0

私は入力フィールドからブートスクスのテキストエリアにテキストを送信します。しかし、私はうんざりして、それは働かない。ハイフネーションを変更するグラフのデフォルトラベル

私のHTMLは次のようになります:私は、ボタンのクリックイベントを取得し、JavaScriptコードで送信-方法を発射するためにJavascriptを使用し

<!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 /> 

Antの彼の私の私の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(""); 
} 

} 
; 

私script.js:

$(function() { 

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


}); 

まったく、何も起こりません。入力フィールドからのメッセージは、ボタンをクリックするとテキストエリアに追加されません。デバッグコンソールからの例外も例外でもありません。

+0

ところで、あなたのコードとHighFacesの間の接続は表示されません。問題のタイトルを変更して、他の開発者が同じ問題を抱えている場合に役立つようにしますか?前もって感謝します! –

答えて

0

入力フィールドの実際のIDは、HTMLプログラミングから期待されるものではありません。 JSFは、入力フィールドがデータ・テーブルまたは<ui:repeat>ループで反復されていても、idがページ上で一意であることを確認します。この目標を達成するために、 "clientId"はフォームのID、入力フィールドのID、および時には他のいくつかの親ウィジェットから連結されます。 BootsFacesは物事をさらに複雑にします。 JSF AJAXの更新が正しく機能するように、ウィジェット全体が通常のclientIdを提供します。結果として、他のdivにネストされた実際の入力フィールドの名前が変更されることがよくあります。

あなたの場合、入力フィールドとテキストエリアのIDはおそらくinput_j_idt5:j_idt12:messageinput_j_idt5:j_idt12:messagesのようなものです。

怪我をすると、フォームの先頭に入力フィールドを追加または削除すると、フラグメントj_idt5およびj_idt12が変更されます。

したがって、idsの代わりにCSS擬似クラスを使用することをお勧めします。その考え方は、入力フィールドとテキストエリアにCSSクラスを追加することです。これらの2つのクラスにCSSルールを指定する必要はありません。彼らはそこにいるだけで十分です。これにより、document.getElementsByClassName("message-class")[0]またはjQuery式$(".message-class")を使用して入力フィールドにアクセスできます。

関連する問題