jquery - css selectors after ajax request (comments system) -

-

problem:

after adding comment on webpage works property, mean added comments want them slide down last added comment. think problem css selectors, comments should on last comments on website. 1 selector have type it?

anybody can me it? hope clear.

$(function() {    "use strict";    var commentsform = $('#commentsform');    var errortemplate = '<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;{error}</div>';    var successtemplate = '<div class="alert alert-success"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;{error}</div>';    var commentstemplate = '<div class="row" id="comments"><div class="col-md-2 col-sm-2 hidden-xs"><figure class="thumbnail">{photo}<figcaption class="text-center">{username}</figcaption></figure></div><div class="col-md-10 col-sm-10"><div class="panel panel-default arrow left"><div class="panel-body"><header class="text-left"><div class="comment-user"><i class="fa fa-user"></i> {username}</div><time class="comment-date"datetime="{date}"><i class="fa fa-clock-o"></i> {date}</time></header><div class="comment-post">{comment}</div></div></div></div></div>';    var messages = $('#messages');    var comments = $(''); //witch 1 selector have select it?      commentsform.submit(function() {      $.ajax({        datatype: "json",        url: '/users/ajax/add-comments/',        type: 'post',        data: commentsform.serialize(),        success: function(response) {          if (response) {              if (response.errors) {              errortemplate = errortemplate.replace(/\{error\}/, response.msg);              messages.show();              messages.html(errortemplate);              settimeout(function() {                messages.slideup(1500);              }, 1000);              return false;            } else {              $('#commentsform')[0].reset();              var comment = commentstemplate;              successtemplate = successtemplate.replace(/\{error\}/, response.msg);              messages.show();              messages.html(successtemplate);              settimeout(function() {                messages.slideup(1500);              }, 1000);                comment = comment.replace(/\{photo\}/, response.avatar);              comment = comment.replace(/\{username\}/, response.username);              comment = comment.replace(/\{comment\}/, response.comment);              comment = comment.replace(/\{date\}/, response.date);              comments.append(comment);              comments.find('#comments ::after').slidedown();            }            }        }      });      return false;    });    });
<section class="comment-list">    <div class="row comments">      <div class="col-md-10 col-sm-10">        <div class="panel panel-default arrow left">          <div class="panel-body">            <header class="text-left">              <div class="comment-user">                <i class="fa fa-user"></i>              </div>              <time class="comment-date" datetime="">                <i class="fa fa-clock-o"></i>               </time>            </header>            <div class="comment-post"></div>            </div>        </div>      </div>    </div>  </section>

i don't know how fix that!

add of following last statement in success callback of ajax.

use last()

$('.comments').last().slidedown();

or

you can use :last pseudo-selector:

$('.comments:last').slidedown();

both of these give last element having comments class


Comments

Post a Comment

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

-
i have a little website header no longer renders correctly, since updating firefox 38.0.5 [the faceplant logo missing top right, , main logo no longer centred]. still renders expected in other browsers. how has engine's rendering changed in update? according mdn , list of changes is: css support ruby-position , ruby-align have been added , available default ( bug 1055676 , bug 1123917 , bug 1039006 ). the :unresolved pseudo-class has been implemented custom elements ( bug 1111633 ). the predefined style ethiopic-numeric uses space, instead of dot, suffix match recent change spec ( bug 1120721 ). css transitions on generated content (with ::before , ::after ) on both inline , block splits them start expected specification ( bug 1110277 ). the implementation of css logical properties made big progress. [...] how css transitions start has been modified match recent change of specifications, aiming @ having interoperable behavio...
Read more

c# - Where does the .ToList() go in LINQ query result -

-
when getting data populate data grid, have pulled data, made list , mapped model, this: public list<person> getpeople() { var data = _db.person.tolist(); list<person> people = new list<person>(); foreach (var item in data) { person person = new person() { personid = item.personid, firstname = item.firstname, lastname = item.lastname }; people.add(person); } return people; } this works fine, in interest of writing less code discovered .select method , (what think is) anonymous type. have: public list<person> getpeople() { return _db.person.select(d => new person { personid = item.personid, firstname = item.firstname, lastname = item.lastname }).tolist(); } though not easy read, works fine too. there preference either way? ...
Read more

android - CollapsingToolbarLayout: position the ExpandedText programmatically -

-
i using new android support design view collapsingtoolbarlayout. have need position expandedtitle programmatically. actually way set position expandedtitle in .xml file (example here: https://goo.gl/l5h5fc ) there no public api set text position programmatically , fields private . do know if it's possible without reflection or 'hacky' tricks? i have solved problem exposing properties via reflection ( https://gist.github.com/fpezzato/8e7d45112883dbbc5ffb ), works don't use trick in production code. @google: please no more private or final stuff! :)
Read more