2016-04-26 3 views
0

学校プロジェクト用のチャットボックスプログラムをコーディングする際に問題が発生しています。私はプログラムに3つの問題があります。まず、私のチャットメッセージは私のチャットボックスに正しく投稿されません。第二に、私は終了をクリックしてウィンドウに近づけることができるようにしたいが、それを行う方法が完全にはわからない。最後に、チャットでメッセージをエコーし​​たり、少なくともコード化されたレスポンスを返すようにしたいと思います。私はこれを行う方法を研究しています。私はこれをどうやって行うのかについてはあまりよく分かりません。私はスタイルシートとhtmlを持っています。ここに私のHTMLは次のとおりです。ここでjQuery HTML5チャットボックスプログラムをマウスクリックイベントレスポンスでコード化しよう

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script> 
<link rel="stylesheet" type="text/css" href="jQuery.css"> 



//my issues seem to be in my Javascript between here************************************ 



<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#submitmsg').click(function(){ 
      var message = $('#usermsg').val() 
      var old = $('#chatbox').html() 

      $('#chatbox').html(old + '<p>' + message + '</p>'); 
     }); 
    }); 
</script> 
<script > 
    function close_window(url){ 
     var newWindow = window.open('', '_self', ''); //open the current window 
     window.close(url); 
    }; 
</script> 


//and here***************************************************************************** 
</head> 
<body> 
<div id="wrapper"> 
    <div id="menu"> 
     <p class="welcome">Welcome <b></b></p> 

//Possible issue here******************************************************************* 
     <p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p> 
     <div style="clear:both"></div> 
    </div> 

    <div id="chatbox"> 
     <p>Here's our chat data</p> 
    </div> 

    <form name="message" action=""> 
     <input name="usermsg" type="text" id="usermsg" size="63" /> 
     <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> 
    </form> 
</div>  
</body> 
</html> 

は私のCSSです:

body { 
font:12px arial; 
color: #222; 
text-align:center; 
padding:35px; } 

form, p, span { 
    margin:0; 
    padding:0; } 

input { 
    font:12px arial; } 

a { 
    color:#0000FF; 
    text-decoration:none; } 

a:hover { 
    text-decoration:underline; } 

#wrapper, #loginform { 
    margin:0 auto; 
    padding-bottom:25px; 
    background:#EBF4FB; 
    width:75%; 
    border:1px solid #ACD8F0; } 

#loginform { 
    padding-top:18px; } 

#loginform p { 
    margin: 5px; } 

#chatbox { 
    text-align:left; 
    margin:0 auto; 
    margin-bottom:25px; 
    padding:10px; 
    background:#fff; 
    height:270px; 
    width:430px; 
    border:1px solid #ACD8F0; 
    overflow:auto; } 

#chatbox p { 
    padding:1em; 
    margin:1em; 
    background:#E6E6E6; 
    border:1px solid #BDBDBD; 
    -moz-border-radius:4px; 
} 

#usermsg { 
    width:395px; 
    border:1px solid #ACD8F0; } 

#submit { 
    width: 60px; } 


.welcome { 
    float:left; } 

.logout { 
    float:right; } 

.msgln { 
    margin:0 0 2px 0; } 

CSSの一部が不要である私はかなり確信しているが、私はいくつかのアウトを取るしようとしたとき、それが問題を引き起こしました。どんな助けでも大歓迎です。

+0

他のコードにいくつかのコードをスローするのではなく、1つの問題にのみ焦点を合わせるコードを投稿できますか? – randominstanceOfLivingThing

+0

期待どおりの結果が得られていませんか? – guest271314

+0

私の予想される結果は、入力メッセージが「チャットボックス」領域に投稿されることです。また、私は終了チャットをクリックすると、ウィンドウを閉じるようにしようとしています。また、私は実際にどのように入力メッセージをエコーするか分からない。 – phoenixCoder

答えて

0

私はスタイリングを頭の中に入れて、最後までjavascriptを動かし、ボタンの入力を入れ替えました。これはonclickと結びついており、新しいコメントをチャットウィンドウに追加します。それはうまくいくかもしれませんが、私はウィンドウを閉じるという問題に取り組んでいませんが、これは新しいコメントをチャット領域に投稿します。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> 
<style> 
body { 
font:12px arial; 
color: #222; 
text-align:center; 
padding:35px; } 

form, p, span { 
    margin:0; 
    padding:0; } 

input { 
    font:12px arial; } 

a { 
    color:#0000FF; 
    text-decoration:none; } 

a:hover { 
    text-decoration:underline; } 

#wrapper, #loginform { 
    margin:0 auto; 
    padding-bottom:25px; 
    background:#EBF4FB; 
    width:75%; 
    border:1px solid #ACD8F0; } 

#loginform { 
    padding-top:18px; } 

#loginform p { 
    margin: 5px; } 

#chatbox { 
    text-align:left; 
    margin:0 auto; 
    margin-bottom:25px; 
    padding:10px; 
    background:#fff; 
    height:270px; 
    width:430px; 
    border:1px solid #ACD8F0; 
    overflow:auto; } 

#chatbox p { 
    padding:1em; 
    margin:1em; 
    background:#E6E6E6; 
    border:1px solid #BDBDBD; 
    -moz-border-radius:4px; 
} 

#usermsg { 
    width:395px; 
    border:1px solid #ACD8F0; } 

#submit { 
    width: 60px; } 


.welcome { 
    float:left; } 

.logout { 
    float:right; } 

.msgln { 
    margin:0 0 2px 0; } 
    </style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="menu"> 
     <p class="welcome">Welcome</p> 
     <p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p> 
     <div style="clear:both"></div> 
    </div> 

    <div id="chatbox"> 
     <p>Here's our chat data</p> 
    </div> 

    <form name="message"> 
     <input name="usermsg" type="text" id="usermsg" size="63" /> 
     <button type="button" id="submitmsg" value="send">Send</button>  
    </form> 
</div> 

<script> 
    $(document).ready(function(){ 
     $('#submitmsg').click(function(){ 
      var message = $('#usermsg').val(); 
      $('#chatbox').append('<p>' + message + '</p>'); 
      $('#usermsg').val(''); 
     }); 
    }); 

function close_window(url){ 
     var newWindow = window.open('', '_self', ''); //open the current window 
     window.close(url); 
    }; 
</script> 

</body> 
</html> 
+0

それはすばらしいおかげです。これにエコーを追加すると、私に入力されたメッセージが繰り返されます。 – phoenixCoder

+0

申し訳ありませんが、私は言及していません - メッセージに "test"と入力すると、 "test"がウィンドウに表示されます。それはあなたが望むものではありませんか?何を意味するのですか?「返信して返信しますか?」 – gavgrif

+0

プログラムがサーバーの返信と同じようにメッセージを返信したい – phoenixCoder

0

1つの問題は、同じページに投稿するフォームを使用していて、リロードしていることです。 私は(chatTest.htmlと呼ばれる)testpageにあなたのコードをコピーして送信ボタンを打った後、以下のURLを得た:

chatTest.html?usermsg=test+message&submitmsg=Send 

あなたのメッセージは、チャットのセクションに掲載さ取得んが、ときに、ページのリロードを除去します。メソッドを指定していないため、フォームを取得してURLに追加されたクエリ文字列としてメッセージをポストします。

コメントをデータベースに保存する予定の場合は、フォームのアクションを別のPHPページに変更し、結果を処理してチャットセクションに保存します。おそらくAjaxを使用しますすべてのチャットの投稿時にページをリロードする必要はありません。

+0

私はphpの使用法を学んでいないし、ちょうどajaxについて学んでいます。あなたは何を記述しているのですか? – phoenixCoder

+0

本当にありがとうございます。これにエコーを追加すると、私に入力されたメッセージが繰り返されます。 – phoenixCoder

+0

ユーザー入力をエコーするにはどうすればこのコードを作成できますか? – phoenixCoder

関連する問題