jQuery and AJAX Tutorials 11 | Adjusting and Fixing Code

"The chat user interface looks already well, but we are still not ready to write the chatbot's algorithm. The first thing I would like to make better in this tutorial is to set the checkbox to be checked as default (when the page is loaded). We can do it by just adding a new property to it's html tag"

[timc]

You could simplify the problem by reordering the way in which you add the variables.
Instead of:
+ "br" + userMessage);
You could use this which doesn't have an initial space:
+ userMessage + "br");
Hope that is useful!

Thanks for the series!

[firstnamelastname]

Here is my solution. I simply change one single line, and it works.

$("#display").html(prevState + "<br>" + newMessage); change to
+ newMessage + "<br>");

Hope it helps for those who still watch this video in 2016 :)

[JasonCtutorials]

I just put the line break after newMessage + "<br>" so there wouldnt be white space on top for first mse

[bernardaguila]

i think its better you should put the linebreak on the last  + newMessage +"<br>") because it works for me

[superdatamaskin]

Javascript cannot understand if( oldText != "" ), you have to add "!" before the var:
if( ! oldText == "" )
   newText = oldText + "<br><br>" + newText;

[BrainBUG]

If you hit a space or line breaks between the HTML container <div id="container"></div> your prevState.length will be more than 0. If it's plain <div id="container"></div>, the prevState.length is 0.

[nvnarendran]

thanks for your suggestion..it was really helpful for me :)

[dare]

Using Firefox 24. the length for prevState is 2, as opposed to 3 for your Chrome

[johnkane]

My pleasure. "br" should have angle brackets of course :)

[Tsukasa]

i dont know if you ready find that the space that appear on top when you enter any text is because the padding that is on the #container  { padding: 12px;}

[Chebre]

It's work just fine when i put "br" tag after the newMessage variable.
+ newMessage + "br");

[Pyroo]

I played a bit with the scrollTop I wanted to animate it, so if you guys try this:

$('#container').prop('scrollHeight')}, 500);

you should get the .5s animation when scrolling down on "Enter" or "Send"

[Shimmen]

var newMessage = $("#textbox").val() + "br";
$("#textbox").val("");

var messageHistory = $("#container").html();

+ newMessage);

This works good, and is simple. Always add a line break after a line. The br should obviously have angle brackets...

[johnkane]

I had some blank lines in my #container div, so trimmed prevState...

var prevState =

if (prevState != "") {
prevState = prevState + "br";
}

[kevintipker]

I like your tutorials, but maybe it's handy to add comments in your code. people like me, and i gues several other people would think that is handy to use. so that you can look back and your code and learn, remember what it is.

[rezaulkarimshaon]

if (prevState.length > 3) {
prevState = prevState + "<br>";
}
+ newMessage);
Then I simply try this,
+ newMessage + "<br>");

And it worked.