Versuchen, jQuery HTML5 Chat-Box-Programm mit Mausklick Ereignisantwort

Ich habe Probleme bei der Programmierung eines Chat-Box-Programm für ein Schulprojekt. Ich habe 3 Probleme mit dem Programm. Erstens wird meine Chat-Nachricht nicht richtig in meiner Chat-Box gepostet. Zweitens möchte ich in der Lage sein, auf exit zu klicken und es in der Nähe des Fensters zu haben, bin mir aber nicht ganz sicher, wie es geht. Schließlich möchte ich, dass der Chat die Nachricht wiedergibt oder zumindest eine hart codierte Antwort hat. Ich untersuche, wie das geht. Ich bin mir nicht ganz sicher, wie ich das machen soll. Ich habe ein Stylesheet und HTML. Hier ist mein html:Versuchen, jQuery HTML5 Chat-Box-Programm mit Mausklick Ereignisantwort

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

Hier ist meine 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; }

Einige der CSS ist nicht notwendig, ich bin ziemlich sicher, aber als ich versuchte, nehmen einige heraus, dass es Probleme verursacht. Jede Hilfe wird sehr geschätzt.

Quelle

2016-04-26 phoenixCoder

Sie können genügend Code posten, der sich nur auf ein Problem konzentriert, anstatt anderen Code zu übergeben und nach Korrekturen zu fragen. – randominstanceOfLivingThing

Nicht sicher, was erwartetes Ergebnis ist? – guest271314

Mein erwartetes Ergebnis ist, dass die Eingangsnachricht im Bereich "Chatbox" gepostet wird. Ich versuche auch, das Fenster zu schließen, wenn ich auf Chat beenden klicke. Auch bin ich mir nicht sicher, wie ich die Eingangsnachricht zurücksenden soll. – phoenixCoder

versuche das folgende kopieren - ich legte das Styling in den Kopf, bewegte das Javascript bis zum Ende, und vertauschte die Eingabe für eine Schaltfläche. Dies hängt mit dem Onclick zusammen und hängt den neuen Kommentar in das Chat-Fenster ein. Es funktioniert, aber könnte besser gemacht werden, auch habe ich nicht das Problem des Schließens des Fensters angesprochen, aber das posten den neuen Kommentar in die Chat-Region.

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

Quelle

2016-04-26 03:26:46 gavgrif

Das ist super danke. Wie würde ich dem Echo ein Echo hinzufügen, damit es die mir eingegebene Nachricht wiederholt? – phoenixCoder

Sorry - ich nicht unterstnad - wenn Sie eine Nachricht eingeben zB "Test" in den Eingang - es wird "Test" in das Fenster setzen. Willst du das nicht? was meinst du mit "echo zurück zu dir? – gavgrif

Ich möchte das Programm meine Nachricht wiederholen, wie es war der Server antwortet – phoenixCoder

ein Problem ist, dass Sie ein Formular verwenden, die dann auf die gleiche Seite - neu laden. Ich kopierte den Code in eine Testseite (genannt chatTest.html) und bekam die folgende URL nach dem Senden-Button schlagen:

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

Ihre Nachricht in den Chat-Abschnitt geschrieben bekommt aber dann, wenn die Seite neu geladen entfernt. Und weil Sie keine Methode angeben, behandeln Sie sie als get-Formular und posten die Nachricht als eine an die URL angehängte Querystring.

Wenn Sie planen, die Kommentare in einer Datenbank zu speichern, dann sollten Sie die Aktion des Formulars auf eine andere PHP-Seite ändern, die Ergebnisse verarbeiten und den gespeicherten Inhalt in den Chat-Abschnitt zurückgeben - vielleicht mit Ajax Sie müssen die Seite nicht bei jeder Chat-Einreichung neu laden.

Quelle

2016-04-26 03:10:49 gavgrif

Ich habe nicht die Verwendung von PHP gelernt und lerne gerade über Ajax. Wie würde ich tun, was du beschreibst? – phoenixCoder

Das ist toll, danke. Wie würde ich dem Echo ein Echo hinzufügen, damit es die mir eingegebene Nachricht wiederholt? – phoenixCoder

Wie würde ich dies codieren, um Benutzereingaben zu wiederholen? – phoenixCoder

Versuchen, jQuery HTML5 Chat-Box-Programm mit Mausklick Ereignisantwort

Antwort

Verwandte Themen