Long Polling – tutorial, part 1


(previous part of this tutorial) Now we have our tree generated, so next thing to do is to allow replying to the posts. User should be able to click under particular post and immediately start to write a reply.

So lets create a div under every li.post that would be a container for reply form. Find those lines in thread.js that are responsible for creating li’s with posts, and add a div in innerHTML:

//app/webroot/js/thread.js
$("
  • ", { id: v.Post.id, innerHTML: "
    "+v.Post.message+"
    " + "
    " //<--- , class: "post child" }). appendTo("#"+v.Post.parent_id+">ul");
  • Now some css is needed. We’ll make it take some more space, and change color on hovering – that kind of behavior should suggest the user, that he should try to click there. Link new css file in the layout:

    //app/views/layouts/default.ctp
    echo $this->Html->css('cake.generic');
    echo $this->Html->css('thread'); //<-add this
    echo $this->Javascript->link(array("thread")); 
    

    and create thread.css with this content:

    /* app/webroot/css/thread.css */
    div.reply {
    	height: 5px;
    	cursor: text;
    }
    div.reply:hover{
    	background-color: #8EAFEB;
    }
    

    This is how it should look right now:

    But, as we can see that there’s no placeholder under first message! Let’s fix thread.js a little bit:

    if($("#"+v.Post.parent_id).find("ul").length == 0){
    	if($("#"+v.Post.parent_id).find("div.reply").length == 0){
    		$("
    ", {class: "reply"}).appendTo("#"+v.Post.parent_id); } $("
      ", {class: "posts children"}).appendTo("#"+v.Post.parent_id); }

    Now we have a little redundancy – two places where div.reply is created. Lets fix it. We’ll remove the place where string

    <div class='reply'/>
    

    is added, replace its creation with jQuery style, and then extract a method that does that. Final code looks like this:

    (function(window, document, udefined){
    	window.Thread = function(_posts) {
    		this.posts = _posts;
    		return this;	
    	};
    })(window, document);
    
    Thread.prototype.createReplyDiv = function(){
    	return $("
    ", {class: "reply"}); } Thread.prototype.createThread = function(){ if(this.posts.length <1){ return this; } var _this = this; //* see below $(this.posts).each(function(k, v){ if($("#"+v.Post.parent_id).find("ul").length == 0){ if($("#"+v.Post.parent_id).find("div.reply").length == 0){ _this.createReplyDiv().appendTo("#"+v.Post.parent_id); } $("
      ", {class: "posts children"}).appendTo("#"+v.Post.parent_id); } $("
    • ", { id: v.Post.id, innerHTML: "
      "+v.Post.message+"
      " , class: "post child" }). append(_this.createReplyDiv()). appendTo("#"+v.Post.parent_id+">ul"); }); return this; }

    If You wander why there’s var _this=this. It is because we need to call createReplyDiv from instance of Thread class. But in function we pass to the each method `this` would mean actual element from collection jQuery.each is iterating on. So we need to remember our old `this` reference.

    Share Button

    One thought on “Long Polling – tutorial, part 1

    1. Thanks for this post, you got me srtetad using this plugin!There was one problem, the cake media init command didn’t work with the 1.3alpha and 1.3beta version, but it did work after checking out the git master.Thanks!

    Leave a Reply

    Your email address will not be published. Required fields are marked *