Tuesday, January 31, 2012

toogle div block - work not properly


I have a following code:




<div class="block review_block wrap"><ul class="comments_list">
<li class="comment">
<div class="poster">
<img width="60px" height="75px" src="/Image/GetImage?imageName=3c52a0f1-92ee-45ee-bd25-bdd5bfc0954f.jpg">
</div>
<!-- .poster-->
<div class="comment_content">
<div class="date">
29.01.2012 9:36:59</div>
<div class="nickname">
<a href="#">
Ослик Иа</a></div>
<div class="review_text">
<a>
Рецензия 3</a>
</div>
<p class="text">
Нельзя сказать, что сюжетная линия предсказуема (только в паре моментов), и поэтому с наслаждением зал наблюдал, как Холмс снова и снова поражал нас своими дедуктивными способностями. Да и Ватсон от него не отставал и всегда на подмогу приходил. В сравнении с первой частью юмора стало больше, но он <span class="ellipses" style="display: inline;">...</span>
<span class="more-text" style="display: none;">
не достигает той грани, когда понимаешь, что сценаристы перестарались с шутками, делая на них слишком высокую ставку. А уж переживаний прибавилось столько, что просто сердечко так и надрывалось. Прослезилась в нескольких местах, а в одном и просто всплакнула. Но, тут без спойлеров.

А сейчас, я скажу о сцене, которая по моему мнению должна быть как-то действительно оценена. Это сцена погони в лесу. Настолько динамично, энергично, невообразимо и захватывающе, что слов не хватает. Наслаждаешься каждой секундой, каждым кадром. Эта сцена даже зрителю передаёт свои силы. Просто браво!

Так что заставила меня «игра теней» возвращать домой с широкой улыбкой на лице, а зал аплодировал очень громко и звонко, за что ему отдельное спасибо.</span>

</p>
<ul class="info list wrap">
<li><a class="iComment">Comment</a> (0)</li>
<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>
<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>
<li><a class="iSocial code" href="#">Код для блога</a></li>
</ul>
</div>
<!-- .comment_content-->

<div class="widgets">
<div class="rating_block">
<div class="stars_rating">
<div class="stars_off">
</div>
<div style="width: 0%" class="stars_on">
</div>
</div>
<!-- .stars_rating-->
<i class="lli"></i>
<div style="z-index: 0;" class="expand">

<span class="iSocial iSmile">0</span></div>


<!-- .rating_block-->
<div style="display: none;" class="voice_block">

<div publicationid="3" type="Publication" eventid="4" class="going">
<a href="">Я пойду!</a>
<div id="going_too">
Уже идут: 0</div>
</div>

<!-- .going-->
<div class="data_for_rating">
<div>
Голосовать</div>
<div class="star_for_rating">
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
</ul>
</div>
<!-- .star_for_rating-->
<div>
Средний бал: 0
(0)</div>
</div>
<!-- .data_for_rating-->
</div>
<!-- .voice_block-->
</div>
<!-- .widgets-->
</div></li>
<!-- .comment-->

<div class="block section-comments_for_photo" style="display: none;"></div>



<li class="comment">
<div class="poster">
<img width="60px" height="75px" src="/Image/GetImage?imageName=2e722edb-8649-43af-b468-a2b489c467fb.jpg">
</div>
<!-- .poster-->
<div class="comment_content">
<div class="date">
29.01.2012 9:36:22</div>
<div class="nickname">
<a href="#">
Антон</a></div>
<div class="review_text">
<a>
Рецензия 2</a>
</div>
<p class="text">
Авторы ушли из Лондона, и это действительно хороший ход. Атмосфера и краски остались теми же, но место событий поменялось, и всё менялось и менялось по ходу действия фильма. Временами всё было так красиво, что аж дух захватывало. Хотелось суметь уловить каждую деталь, каждый миллиметр, но всё было т<span class="ellipses" style="display: inline;">...</span>
<span class="more-text" style="display: none;">
ак динамично, что это сделать было достаточно сложно. Хотя этот факт ни сколечко не уменьшает прекрасность «Игры теней». Атмосферу помогала поддерживать всё так же великолепная музыка Ханса Циммера, которая местами была точь-в-точь как и в первом фильме. Что особенно касается титров, которые всё такие же привлекательные, и прошлая музыка им ни капельки не мешает, а наоборот, только навивает приятные воспоминания об ощущениях, которые возникли в своё время после просмотра предыдущей ленты в такой же момент титров, когда люди начали вставать и потихоньку уходить из зала с интересом глядя на экран.</span>

</p>
<ul class="info list wrap">
<li><a class="iComment">Комментировать</a> (0)</li>
<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>
<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>
<li><a class="iSocial code" href="#">Код для блога</a></li>
</ul>
</div>
<!-- .comment_content-->

<div class="widgets">
<div class="rating_block">
<div class="stars_rating">
<div class="stars_off">
</div>
<div style="width: 0%" class="stars_on">
</div>
</div>
<!-- .stars_rating-->
<i class="lli"></i>
<div style="z-index: 0;" class="expand">

<span class="iSocial iSmile">0</span></div>


<!-- .rating_block-->
<div style="display: none;" class="voice_block">

<div publicationid="2" type="Publication" eventid="1" class="going">
<a href="">Я пойду!</a>
<div id="going_too">
Уже идут: 0</div>
</div>

<!-- .going-->
<div class="data_for_rating">
<div>
Голосовать</div>
<div class="star_for_rating">
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
</ul>
</div>
<!-- .star_for_rating-->
<div>
Средний бал: 0
(0)</div>
</div>
<!-- .data_for_rating-->
</div>
<!-- .voice_block-->
</div>
<!-- .widgets-->
</div></li>
<!-- .comment-->

<div class="block section-comments_for_photo" style="display: none;"></div>

</ul></div>



There are two div with block section-comments_for_photo class.



I want that user clicks on Comment ( iComment class) then data loading into div( block section-comments_for_photo ). My code:




$(document).ready(function() {
$('.block.section-comments_for_photo').each(function() {
$(this).hide();
});
$(".iComment").click(function() {
var id = <%=Model.OID %> ;
var section = $(this).closest(".comments_list").first(".block.section-comments_for_photo");
$(section).load("/Publication/GetCommentsForPublication?id=" + id, function() {
$(this).toggle(400);
return false;
});
});
});



This code loads the data but it delete all html from block review_block wrap . Where is problem?



Thanks.



UPDATE: JSFiddle

2 comments:

  1. You wrongly use jQuery.first. It doesn't do what you expect it to.

    Use find instead.

    $(".iComment").click(function() {
    var section = $(this).closest(".comments_list").find(".block.section-comments_for_photo");

    $(section).toggle(400);
    return false;
    });


    Updated jsfiddle.

    ReplyDelete
  2. toggle(400) meens that it will be shown during 400 milliseconds.
    If you want to show it for a longer time (eg 4 seconds) you have to put toggle(4000).

    ReplyDelete