JSFiddle - React, Tailwind, and code Playground
HTML
<h3>This uses localStorage to save comments, and creates a fake ajax call to check localstorage for new comments.</h3>
<p>comments are added as they are submitted, and it checks for new comments every 5 seconds, so give it a little time.<br>Reload the page to see the persistent comments etc.</p>
<br />
Add new comment<br />
<textarea id="comment">
</textarea>
<input type="button" value="submit" />
<br /><br />
<form id="form1" runat="server">
<div>
<ul id="Urunler" runat="server"></ul>
</div>
</form>
CSS
#Urunler {list-style: none;}
#Urunler li {padding: 10px; border: 1px solid red; width: 300px; height: auto;}
textarea {height: 100px; width: 400px;}
JavaScript
var comments = {
get: function () {
return $.Deferred().resolve(localStorage.getItem('comments'));
// ^^ fake ajax call
/*
return $.ajax({
url : 'WebForm1.aspx',
cache : false
});
*/
},
check: function (coll1, coll2, UL_ID) {
var diff = [];
$.each(coll2, function (_, li2) {
var same = false;
$.each(coll1, function (_, li1) {
if ($(li1).text() == $(li2).text()) same = true;
});
if (!same) diff.push(li2);
});
this.output(diff, UL_ID);
},
poll: function (UL_ID) {
var self = this;
self.get().done(function (data) {
self.check($(UL_ID).find('li'), $('<ul />').append(data).find('li'), UL_ID);
});
},
output: function (elems, UL_ID) {
$.each(elems, function (i, elem) {
$(elem).hide().delay(i * 300).slideDown(350).appendTo($(UL_ID));
});
},
init: function (UL, interval) {
var self = this;
setInterval(function () {
self.poll(UL);
}, interval);
this.poll(UL);
}
}
$(document).ready(function () {
comments.init('#Urunler', 5000);
// for storing comments to localStorage
$('input[type="button"]').on('click', function() {
var comment = $('#comment').val(),
current = localStorage.getItem('comments');
localStorage.setItem('comments', current + '<li>'+comment.replace(/\n/g,'<br>')+'</li>');
});
});