Set a text field within a ajax request receipt

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);

use `$("#chatbox").html('whatever')` But why is it a `textarea` and not a `div` or any other normal element? textareas are for sending data to the server, not displaying things to the user. — vsync, May 01 '16 at 20:35
Is there a simpler way to concat the response other than taking the current value and adding the response to it? — , May 01 '16 at 20:40
Place where I need $("#chatbox").html(stringvalue), stringvalue should be the current value of text field + response — , May 01 '16 at 20:52
simplest way - `$("#chatbox").html( $("#chatbox").html() + 'whatever')` or like this: `$("#chatbox")[0].innerHTML += 'whatever'` which is shorter. — vsync, May 01 '16 at 20:55
It returns function (E){return E===g?(this[0]?this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g,""):null):this.empty().append(E)} + the response. — , May 01 '16 at 21:03

Atticus · Answer 1 · 2016-05-01T21:00:49.950

1

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)

edited May 01 '16 at 21:00

answered May 01 '16 at 20:37

Atticus

6,585
10
35
57

How can I concat current text field value with response? – May 01 '16 at 20:48
Appreciate your help – May 02 '16 at 05:51

score 1 · Accepted Answer · answered May 01 '16 at 21:00

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');
});

answered May 01 '16 at 21:00

vsync

118,978
58
307
400

`$("#chatbox")[0].innerHTML = $("#chatbox")[0].innerHTML + '\n' + response;` doesn't add a new line? – May 01 '16 at 21:15
Great. Appreciate your help very much – May 02 '16 at 05:50

score 0 · Answer 3 · answered May 01 '16 at 20:40

0

You were close to the solution :

$("#chatbox").html(response);

answered May 01 '16 at 20:40

Spilarix

1,418
1
13
24

gaetanoM · Answer 4 · 2016-05-01T21:45:47.550

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> &lt;%=session.getAttribute( "username" )%&gt; </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>

Set a text field within a ajax request receipt

4 Answers4