Hi everyone.
{{extend "layout.html"}}
<html lang="en">
{{for q in question:}}
{{q=XML(unicode(q.quest.replace('\n','<br>')))}}
{{pass}}
{{for a in answer:}}
{{a=XML(unicode(a.message.replace('\n','<br>')))}}
{{pass}}
</style>
</head>
<body>
<div class="chat_window">
<ul class="messages">
{{for reply in replies:}}
<li class="message left appeared">
<div>
{{=prettydate(reply.modified_on)}}
</div>
<div class="text_wrapper">
<div class="text">{{=XML(unicode(reply.quest.replace('\n','<br>')))}}</div>
</div>
</li>
<li class="message right appeared">
<div class="text_wrapper">
<div class="text">{{=XML(unicode(reply.message.replace('\n','<br>')))}}</div>
</div>
</li>
{{pass}}
</ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
{{=form.custom.begin}}
<textarea name="message" id="message_input" placeholder="Type your message here..."></textarea>
<button>send</button>
{{=form.custom.end}}
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="message-data-time" >{{=time.ctime()}}</div>
<div class="text_wrapper">
<div class="text"></div>
</div>
</li>
</div>
<script type="text/javascript">
(function () {
var Message;
Message = function (arg) {
this.text = arg.text, this.message_side = arg.message_side;
this.draw = function (_this) {
return function () {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(_this.message_side).find('.text').html(_this.text);
$('.messages').append($message);
return setTimeout(function () {
return $message.addClass('appeared');
}, 0);
};
}(this);
return this;
};
$(function () {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function () {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function (text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({
text: text,
message_side: message_side
});
message.draw();
return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 5);
};
$('.send_message').click(function (e) {
//e.preventDefault();//new
return sendMessage(getMessageText());
});
$('.message_input').keyup(function (e) {
if (e.which === 13) {
e.preventDefault();//new
return sendMessage(getMessageText());
}
});
//sendMessage('Wait a moment please...!')
setTimeout(function () {
return sendMessage('{{=q}}');
}, 100);
return setTimeout(function () {
return sendMessage('{{=a}}');
}, 2100);
});
}.call(this));
</script>
</body>
</html>
I also don't want page refreshed on posting the question, that it works like other bots where the messages appear from the bottom as they come in. Ifigured out that maybe as the page refreshes, that's when the cursor moves first up then to the bottom of the page, then the message appears.
I dont mind a new code or referral.