title: Display Server Response Data onto HTML Page
body: <p>Currently I have a working server that is able to receive and send data to my HTML webpage. However the problem is that I cannot encapsulate the data and display it as text on my webpage. </p>
  
  <p>This is my HTML of the main body where I want the server response data in the id="response":</p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div&gt;
       &lt;img src="http://i.imgur.com/TMwitub.jpg" alt="" width="740" height="220" /&gt;
    &lt;/div&gt;
    &lt;div class="boxed" style="height: 35px"&gt;
      &lt;h1&gt;HOME&lt;/h1&gt;
      &lt;div id="response" style="height: 93px; left: 270px; top: 283px; width: 564px;"&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I will point out that EVERYTHING up to the success function works. My server is able to receive the POST and also send back the following JSON data:</p>
  
  <p>Response Body:</p>
  
  <pre><code>{
    "details": "Log in success",
    "clientInfo":{ "firstName": "AAA", "lastName": "BBB", "balance" : "9999", }
  }
  </code></pre>
  
  <p>Here is my JS (ready function is working --- everything is working, just not displaying response):</p>
  
  <pre><code>$(document).ready(function(){
              var messageType = "3";
              var cookie_name = "username"; 
              var cookie_name2 = "password";
              var YouWrote = getName(cookie_name);
              var YouWrote2 = getName2(cookie_name2);
              var userName = YouWrote;
              var password = YouWrote2;
              auth(messageType, userName, password);
          });
  
  
  
  function auth(messageType, userName, password) {
    $.ajax({
            type: "POST",
            //SEND TO SERVER URL
            url: "######",
            dataType: 'json',
            async: false,
            data: '{"messageType": "' + messageType + '",
                    "userName": "' + userName + '",
                    "password" : "' + password + '"}',
            error: function (xhr, error) {
                     alert('Error!');
            },
            success: function (data, textStatus, jqXHR) {
                $('#response').html(data.details + '\nHello ' + 
                                    data.clientInfo.firstName + ' ' +
                                    data.clientInfo.lastName + '. \nBalance:' +
                                    data.clientInfo.balance);
                }
           })
      }
  </code></pre>
  
  <p>Do I need to write some CSS for the id = response? I don't think so. I can't really think of why its not working and would appreciate some help/advice.</p>