Michael Gulik Michael Gulik - 7 months ago 9
Javascript Question

Dynamically position list item based on ajax

I am trying to change the location of the scroll able list item based on whether or not a message was sent by a user or another party. However, what I have will not work.

I tried adding .css('position', 'right')
and putting in position="right" when the div is called.

What I have got so far is this as far as my ajax is concerned:

success: function(data)
{
var messages = data['serverResponse'];
//alert(JSON.stringify(threads));
$.each( messages, function( name, value) {

if(value.user === "1")
{
$(".message").append("<div class='" + name + "'>" + value.name + "</div>").css(".sentMes");
$(".message").append("<div class='" + name + "'>" + value.message + "</div>");
$(".message").append("<div class='" + name + "'>" + value.date + "</div>");
} else
{
$(".message").append("<div class='" + name + "'>" + value.name + "</div>");
$(".message").append("<div class='" + name + "'>" + value.message + "</div>");
$(".message").append("<div class='" + name + "'>" + value.date + "</div>");
}
});


And for the html:

<title>AMessage</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="JavaScript/ThreadsandMessages.js"> </script>
<link rel="stylesheet" type="text/css" href="AMessage.css">

</head>
<body>
<header>header area</header>
<nav>
<ul role="list">
<li class="thread" role="listitem"></li>
</ul>
</nav>

<nav>
<ul role="list">
<li class="message" role="listitem"></li>
</ul>
</nav>
</body>
</html>

Answer

"right" is not a valid value for "position". See here for a list of valid values.

Because you are using $(".message").append("..."); all of your message objects will be added to the single list item you have with class "message". If you have multiple list items with class "message" you would end up with duplicate results. I presume you mean to create a new list item for each message so I have written the code snippet below accordingly.

What you want to use is the float property which moves the element to the right or left of the parent element. In this case you'll need to combine it with the clear property or the items will appear on the same line.

When you want to add a class to an element, instead of using .css() you should use .addClass() or you will override any other classes.

var messages = [{
  user: "1",
  name: "John",
  message: "Hi there",
  date: "01/01/2016"
}, {
  user: "2",
  name: "Tim",
  message: "Hey what's going on?",
  date: "01/01/2016"
}, {
  user: "1",
  name: "John",
  message: "Not much",
  date: "01/01/2016"
}];

$.each(messages, function(name, value) {
  var message =
    "<li class='message' role='listitem'>" +
      "<div>" + value.name + "</div>" +
      "<div>" + value.message + "</div>" +
      "<div>" + value.date + "</div>" +
    "</li>";

  $("#messages").append($(message).addClass(value.user === "1" ? "sentMes" : ""));
});
#messages {
  list-style: none;
}

.message {
  float: right;
  clear: both;
  background-color: #BEBCBC;
  border-radius: 5px;
  padding: 10px;
}

.message.sentMes {
  float: left;
  background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>header area</header>
<nav>
  <ul role="list">
    <li class="thread" role="listitem"></li>
  </ul>
</nav>

<nav>
  <ul role="list" id="messages">
  </ul>
</nav>

Comments