Long Polling, tutorial – cześć 1

Pokaż się!


teraz, w wypadku kliknięcia, potrzebujemy w div.reply umieścić formularz odpowiedzi (i odpowiednio ten div powiększyć, żeby formularz się zmieścił). Nie będziemy tworzyć formularza tworząc obiekty DOM z tego względu iż jest on już zdefiniowany w widoku add.ctp. Gdybyśmy się skusili na to rozwiązanie złamalibyśmy regułę DRY. Dodaj ten fragment do widoku view.ctp (na przykład na samym końcu pliku):


a następnie usuń zbędne elementy z “edit.ctp”, żeby wyglądał mniej więcej tak:

<div class="posts">
<?php echo $this->Form->create('Post', array("url"=> array("action"=>"edit")));?>
	<fieldset>
 		<legend>
 			<?php if(!empty($this->data["Post"]["id"])):  ?>
 			<?php __('Edit Post'); ?>
 			<?php else: ?>
 			<?php __('Add Post'); ?>
 			<?php endif; ?>
 		</legend>
	<?php
		echo $this->Form->input('id');
		echo $this->Form->input('parent_id', array("type"=> "hidden", "id"=>false, "class"=>"PostParentId"));
		echo $this->Form->input('message');
	?>
	</fieldset>
<?php echo $this->Form->end(__('Submit', true));?>
</div>

Zauważ, że nieco poprawiliśmy kod generujący formularz (“id”=>false, kilka dodatkowych klas css). Zrobiliśmy to dlatego, że ten fomularz może pojawić się wiele razy w drzewie dyskusji (pod kilkoma wypowiedziami jednocześnie), więc elementy o identycznych id “gryzły” by się ze sobą.

Parametr ‘url’ został dodany, aby formularz generował się z odpowiednią opcją ‘action’ nawet, gdy wywołamy go w akcji posts/view.

Zajmijmy się teraz pokazaniem formularza w przypadku kliknięcia div.reply. Z uwagi na to, że mamy już wydzieloną funkcję, która dodaje te elementy, musimy ją nieco poprawić. Po utworzenia węzła DOM, dołączymy funkcję do jego zdarzenia ‘onclick’. Funkcja ta sklonuje formularz odpowiedzi, odłączy zdarzenie ‘onclick’ (nie chcemy, żeby po kliknięciu w formularz pojawił się kolejny) oraz ustawi wartość ukrytego pola ‘parent_id’ odpowiednio.
/p>

// webroot/js/thread.js
//...
Thread.prototype.createReplyDiv = function(){
	return $("
", {class: "reply"}).bind( "click", function(){ $("#add-form-template").find("div.posts").clone().appendTo(this); $(this).addClass("reply-extended"). unbind("click"). find(".PostsParentId").val(this.parentNode.id); } ); }; //...

następnie musimy dodać kilka reguł css. Dodaj ten fragment do thread.css:

div.reply-extended {
    height: auto;
    cursor: auto;
}
div.reply-extended:hover{
    background-color: inherit;
}

Pierwsza i druga włączy domyślne zachowanie tak, żeby div rozciągnął się odpowiednio do wielkości formularza, oraz, żeby kursor zachowywał się ‘normalnie’. Trzecia wyłączy zmianę koloru po najechaniu kursora nad div.reply.

Share Button

Leave a Reply

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