javascript - How do I properly show/hide elements after an AJAX call using jQuery? -
what i'm using requires 2 clicks each action:
- first click: logs nothing, nothing
- second: logs
doesn't exist
, element displays - third:
(2) exists
, element doesn't toggle - fourth:
(5) exists
, element toggles - fifth:
(9) exists
, element doesn't toggle - sixth:
(14) exists
, element toggles
what's causing weird behavior?
# views/articles/description.js.erb $(function() { return $("#link-<%= @article.id %>").on("click", function(e, data, status, xhr) { e.preventdefault(); var description = '<p class="article__description"><%= j @article.description %></p>'; if ($("#article-<%= @article.id %> .article__description").length) { console.log("exists"); $("#article-<%= @article.id %> .article__description").toggle(); } else { console.log("doesn't exist"); $("#article-<%= @article.id %> .article__info").prepend(description); } }); }); # views/articles/_article.html.erb <div id="article-<%= article.id %>"> <div class="article__expand"> <%= link_to "show description", description_article_path(article), remote: true, id: "link-#{article.id}" %> </div> <div class="article__info"></div> </div>
here's html output, first element without.
<div id="article-5"> <div class="article__expand"> <a id="link-5" data-remote="true" href="articles/5/description"> show description </a> </div> <div class="article__info"> </div> </div> <div id="article-5"> <div class="article__expand"> <a id="link-5" data-remote="true" href="articles/5/description"> show description </a> </div> <div class="article__info"> <p class="article__description">lorem ipsum</p> </div> </div>
Comments
Post a Comment