Databases
StackOverflow2013
Postsdbo
PO.slideToggle() in rails app not working
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO.slideToggle() in rails app not working
    primarykey
    data
    text
    <p>I am trying to add some javascript to my rails app. I am trying to do something similar to the way twitter handles youtube links in a user's tweets (when a user clicks on the tweet/video the tweet expands to show the video).</p> <p>Here is what I have so far:</p> <p>assets/javascripts/tracks.js</p> <pre><code>$(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); //not sure if needed $('.show_hide').click(function(){ $(".slidingDiv").slideToggle(); }); }); </code></pre> <p>the listing of each "track"</p> <p>views/tracks/_track.html.erb</p> <pre><code>&lt;li&gt; &lt;a href="#" class="show_hide"&gt; &lt;%= track.content %&gt; &lt;/a&gt; &lt;div class="slidingDiv"&gt; &lt;%= raw(youtube_embed(track.content)) %&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p>I have a method <code>youtube_embed</code> in my helper to transform the youtube link into an embedded iframe. Could this be what is causing the <code>slidingDiv</code> to not respond to .slideToggle() ? When i go to /tracks , the youtube videos are already embedded on the page, and I can't get them to collapse. For clarity, I only want the user to see the youtube iframe after he clicks on the div. </p> <p>relavent CSS (seems alright to me)</p> <pre><code>/* tracks */ .slidingDiv { height: 500px; padding: 20px; margin-top: 10px; } .show_hide { // display: none; } </code></pre> <p>iframe that is spitted out:</p> <pre><code>%Q{&lt;iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/#{ youtube_id }" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;} </code></pre> <p>What am I doing wrong? If there is a better way of doing this - i'd love to hear it also, thank you.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USOx Smith
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO.slideToggle() in rails app not working
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis is working here: http://jsfiddle.net/UPrhN/3/ - I only made a few minor changes so it might be something else on your page causing the issue.
      singulars
      1. PO.slideToggle() in rails app not working
      1. USJoe
    2. COYou are correct sir, that jsfiddle is exactly what I want. However, I just can't seem to make it work in my rails app...
      singulars
      1. PO.slideToggle() in rails app not working
      1. USOx Smith
    3. COHmmm, are there any errors in your browser's console? What other scripts are being included on the page?
      singulars
      1. PO.slideToggle() in rails app not working
      1. USJoe
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload