Set a text field within a ajax request receipt - html

Question

I want to display some text on a text area upon a response from an ajax request.
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b></b> <%=session.getAttribute( "username" )%> </p>
</div>
<!-- This div will contain the chatlog. -->
<div id="chatbox"></div>
<form name="message" action="" method="post">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
I want to set 'chatbox' text within an ajax request response.
This is the css document for chatbox
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
This is the ajax call
function loadLog(){
$.ajax({
type: "GET",
url: "HandleMessage",
//contentType: "application/json",
/*data: {
card: JSON.stringify(card)
},*/
success: function(response) {
if(response != null)
{
$("#chatbox").attr("value", "aa"); // I want to concat current value and response here
}
//document.getElementById('chatbox').value = 'fff';
//alert(response);
},
error: function(data) {
alert('errorr');
}
});
Tried many things, but didn't work.
Tried,
$("#chatbox").attr("value", response);
$("#chatbox).val(response);
$(".chatbox").html(response);

Answer 1

This is the preferred way of writing AJAX using jQuery (with deferreds)
$.ajax({
type : "GET",
url : "HandleMessage",
contentType : "application/json",
data : {
card: JSON.stringify(card)
}
})
.done(function(RES){
if( RES )
$("#chatbox")[0].innerHTML += RES;
})
.fail(function(){
alert('error');
});

Answer 2

You want to be using val when updating an input value field
$('#chatbox').val('aa')
In the comment you ask about concatenating the existing field value with the respones:
$('#chatbox').val($('#chatbox').val() + response)

Answer 3

You were close to the solution :
$("#chatbox").html(response);

Answer 4

As described in textContent you can write in javascript:
document.getElementById('chatbox').textContent+= response;
An example, based on github api, is reported in the following snippet (I did not use any format on the output. This is only an example.)
If you neet to get JSON data, using jQuery you may use directly getjson.
function loadLog(e) {
e.preventDefault();
var name = document.getElementById('usermsg').value;
$.ajax({
type: "GET",
url: "https://api.github.com/users/repos",
dataType: "json",
data: {'name': name},
success: function (response) {
if (response != null) {
document.getElementById('chatbox').textContent += JSON.stringify(response,response, 4, 4);
}
},
error: function (data) {
alert('errorr');
}
});
}
window.onload = function () {
document.getElementById('submitmsg').addEventListener('click', loadLog, false);
}
#chatbox {
text-align: left;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
background: #fff;
height: 270px;
width: 430px;
border: 1px solid #ACD8F0;
overflow: auto;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b></b> <%=session.getAttribute( "username" )%> </p>
</div>
<!-- This div will contain the chatlog. -->
<div id="chatbox"></div>
<form name="message" action="" method="post">
<input name="usermsg" type="text" id="usermsg" size="63"/>
<input name="submitmsg" type="submit" id="submitmsg" value="Send"/>
</form>
</div>