Problem mit jQuery Chat-Formular

Question

Vielen Dank für die Hilfe im Voraus.

Bei diesem Projekt handelt es sich um ein Anmeldeformular, bei dem ein Chat-System verwendet wird, um Profildetails des Benutzers während des Onboarding-Prozesses zu erfassen. Dies ist mein erstes jQuery-Projekt, also bemühe ich mich, meine Fehler zu erkennen.

Meine jQuery sollte den Wert in das Textfeld an die # message-Feed div anhängen und die CSS-Klassen von .message, .bubble und .user auf das neue Element anwenden es schafft.

Wenn ich jedoch in den Textbereich eintippe und auf "Senden" klicke, blinkt der Wert, den ich gerade ohne Stil eingegeben habe, aber er verschwindet sofort.

Der Grund für diese CSS-Struktur ist die Austauschbarkeit zwischen dem .BOT und .user Klassen je nachdem, ob es sich um eine Frage an den Benutzer von der Website präsentiert oder eine Antwort des Benutzers auf eine Frage. Hier

ist ein Link für eine JSFiddle aber es lädt ganz anders als auf meinem lokalen Rechner (JSFiddle Fehler zeigt.

HTML

<div id="container"> 

    <div id="message-feed"> 
     <h1>Let&#39;s get to know you a little bit more&hellip;</h1> 
    </div> 

    <form method="POST"> 
     <div id="text-response"> 
     <textarea id="text-response" placeholder="Type in here&hellip;"></textarea> 
     </div> 
     <input type="submit" class="submit-response"> 
    </form> 

</div> 

CSS

#container { 
width: 320px; 
height: 480px; 
background-color: #fff; 
position:absolute; 
left:50%; 
top:50%; 
margin:-240px 0 0 -160px; 
} 

#message-feed { 
width: 100%; 
height: 100%; 
margin: auto; 
overflow-y: scroll; 
} 

.message { 
padding: 0px 15px 15px 15px; 
width: 90%; 
} 

.message:after { 
content:""; 
display: block; 
clear: both; 
} 

.bubble { 
border: 0.5px solid #005393; 
max-width: 80%; 
padding: 10px; 
} 

.bot { 
color: #005393; 
float: left; 
border-radius: 12px 12px 12px 0px; 
} 

.user { 
float: right; 
background-color: #005393; 
border-radius: 12px 12px 0px 12px; 
color: #fff; 
} 

#text-response { 
height: 23px; 
width: 220px; 
border-top: 1px solid #eee; 
background-color: #fff; 
float: left; 
} 

textarea { 
height: 20px; 
width: 220px; 
float: left; 
resize: none; 
border: none; 
padding: 10px; 
line-height: 22px; 
font-family: 'Roboto', sans-serif; 
font-weight: 200; 
letter-spacing: 1px; 
font-size: 15px; 
outline: none; 
overflow: auto; 
} 

.submit-response { 
height: 45px; 
width: 80px; 
background-color: #005393; 
color: #fff; 
float: right; 
text-align: center; 
line-height: 42px; 
font-family: 'Roboto', sans-serif; 
font-weight: 200; 
letter-spacing: 1px; 
font-size: 15px; 
outline: none; 
border: 0; 
} 

.submit-response:hover { 
opacity: 0.5; 
} 

jQuery

$(document).ready(function() { 

    $('.submit-response').click(function() { 

     var $newMessage = $('textarea[name=text-response]').val() 

     $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 

    }); 
}); 

Answer 1

2 Probleme da drüben:

1/Sie verhindern nicht das Standardverhalten des Ereignisses. Das bedeutet, wenn Sie auf die Schaltfläche klicken, die eine Submit-Eingabe ist, wird eine POST-Anfrage gesendet. Die Seite wird sich also ändern. Um dies zu verhindern:

$('.submit-response').click(function() { 
    var $newMessage = $('textarea[name=text-response]').val(); 
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 
}); 

werden sollte:

$('.submit-response').click(function(event) { 
    event.preventDefault(event); 
    var $newMessage = $('textarea[name=text-response]').val(); 
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 
}); 

2/Sie sind nicht wirklich die Klassen hinzufügen. $.append hängt Elemente an, keine Klassen. Also:

$('.submit-response').click(function(event) { 
    event.preventDefault(event); 
    var $newMessage = $('textarea[name=text-response]').val() 
    $('#message-feed').append($newMessage, 'message', 'bubble', 'user'); 
}); 

sollte geworden:

$('.submit-response').click(function(event) { 
    event.preventDefault(event); 
    var $newMessageText = $('textarea[name=text-response]').val(), 
     $newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>'); 

    $('#message-feed').append($newMessage); 
}); 

Jetzt offensichtlich nicht eine Spannweite sein muss, könnte es etwas anderes sein. Es muss immer noch ein Element sein.

Auch dies löst nur die Probleme, die Sie am Frontend hatten. Sie benötigen AJAX, um den POST an die Serverseite zu senden und die Daten zu erhalten, ohne die Seite zu aktualisieren/zu verlassen. Aber das ist ein anderes Thema.