jquery/coffeescript conditional hide on page load

Question

I would like to hide or show an element on page load depending on the value of another element, "#init-like".

if $('span[id^="init-like"]').html() == "true"
  $(this).parent().find('span[id^="like-click"]').hide()

It wasn't working, and so while troubleshooting, I had it hide or show on a click. That worked.

$('span[id^="init-like"]').click ->
  if $(this).html() == "true"
    $(this).parent().find('span[id^="like-click"]').hide()

I think I'm missing something basic here, because I don't see why it won't work on page load. I have successfully hidden other elements on page load, but not conditionally on anything else.

If it's relevant, the top and bottom of my coffeescript are like this which helps turbolinks and jquery to work together:

ready = ->
  $(document).ready ->
####
$(document).ready(ready)
$(document).on('page:load', ready)

My overall goal is to get the "like" button to show if an item has not been liked; and for it to be hidden if an item has been liked; and vice versa with the "unlike" button.

Please let me know if more code snippets would be helpful.

Edit: The code is in a partial, so I have to make sure the coffeescript doesn't apply only the first instance.

score 1 · Accepted Answer · answered Dec 05 '15 at 20:02

The problem is: You are using $(this) when you are not inside a handler, so $(this) is actually $(window). $(window).parent() therefore is empty (window has no parent) and .find() does not find anything to .hide().

So simply use $('span[id^="init-like"]').parent().find('span[id^="like-click"]').hide() to accomplish the same as in the click handler:

if $('span[id^="init-like"]').html() == "true"
  $('span[id^="init-like"]').parent().find('span[id^="like-click"]').hide()

_{Note: If your elements' ids are exactly init-like etc, use $('#init-like') as the selectors: this is faster than using [id^=...] (this means the ids start with something)}

Thank you @Markus! I left out an important fact: that the code is in a partial, so I have to make sure the coffeescript doesn't apply only the first instance. I will post the code that I ended up using, which is now working, in an answer below. — Leo Brown, Dec 05 '15 at 20:33

score 0 · Answer 2 · edited May 23 '17 at 11:59

What I was missing is (as Markus pointed out) that I was not in a handler, so my "this" didn't work.

At first, I added a click on page load. That is below and worked OK; but thanks to Marko's answer to this question, I came up with what I believe is a more elegant approach (which isn't saying much, considering how inelegant it was to "click" on page load).

I welcome any suggestions for improvement but the inline jQuery is working well for my purposes.

Approach #1. Inline jQuery:

<span class="working-<%= list.job_id %>"></span>

<span class="like-or-not-<%=current_user.likelists.pluck(:list_id).exclude?(list.id)%>"><%= link_to "+", likelist_path(:list_id => list.id, :user_id => current_user.id), :remote => true %></span>
<span class="like-or-not-<%=current_user.likelists.pluck(:list_id).include?(list.id)%>"><%= link_to ":)", likelist_delete_path(:list_id => list.id, :user_id => current_user.id), :remote => true %></span>

<script type="text/javascript">
    $(".like-or-not-false").hide();
    $(".working-1").parent().hide();
</script>

If a user has liked a list, the class of the span that allows a user to click and like a list will be hidden. If a user has not liked a list, the class of the span that allows a user to click and unlike a list will be hidden.

I used a similar approach to hide lists that are currently part of a job that is not complete, because list.job_id is nil when the job is complete.

Approach #2 (inferior and forgone). "Click" on page load:

$('span[id^="init-like"]').click ->
  if $(this).html() == "true"
    $(this).parent().find('span[id^="like-click"]').hide()
  else
    $(this).parent().find('span[id^="unlike-click"]').hide()
$('span[id^="init-like"]').click()

jquery/coffeescript conditional hide on page load

2 Answers2