JavaScript function not firing off for owlcarousel-rails plugin

40 views
Skip to first unread message

David Williams

unread,
Dec 24, 2014, 1:07:13 PM12/24/14
to rubyonra...@googlegroups.com
The javascript is not working for 'owlcarousel-rails' plugin. I have the
gem and require statements for application.css/application.js setup
properly.

//= require owl.carousel
*= require owl.carousel
*= require owl.theme

I called the plugin with:

<script type= 'text/javascript' >
$(".owl-carousel").owlCarousel();
</script> in my <header></header>

<div class="owl-carousel" style="z-index: 1;">
<div><%= image_tag 'JohnsPhotos/weekend-getaway1.jpg'
%></div>
<div><%= image_tag 'JohnsPhotos/weekend-getaway2.jpg'
%></div>
</div> the tags for the plugin are mid page in the
<body></body>

Why isn't the javascript/css displaying the photos?

--
Posted via http://www.ruby-forum.com/.

Hassan Schroeder

unread,
Dec 24, 2014, 2:27:02 PM12/24/14
to rubyonrails-talk
On Wed, Dec 24, 2014 at 10:06 AM, David Williams <li...@ruby-forum.com> wrote:
> The javascript is not working for 'owlcarousel-rails' plugin.

Disclaimer: never heard of this plugin, but ---

> $(".owl-carousel").owlCarousel();

if you're calling that method *before* any such elements exist in the
DOM, I'd expect exactly nothing to happen :-)

Have you looked at the JS console/log to see if there are errors?

--
Hassan Schroeder ------------------------ hassan.s...@gmail.com
http://about.me/hassanschroeder
twitter: @hassan

David Williams

unread,
Dec 24, 2014, 3:08:56 PM12/24/14
to rubyonra...@googlegroups.com
Hassan Schroeder wrote in post #1165339:
I'll try to call it after div code block, and then see if the function
fires off.
<div class="row">
<div class="large-12 medium-12 small-2 columns mid-index-bg">
<h2 style="color: red; text-align: center;">Carousel
Placeholder</h2>
<div class="owl-carousel" style="z-index: 1;">
<div class="item"><%= image_tag 'Photo1'%</div>
<div class="item"><%= image_tag 'Photo2'%></div>
</div>
</div>
</div>

David Williams

unread,
Dec 24, 2014, 4:09:05 PM12/24/14
to rubyonra...@googlegroups.com
Hassan Schroeder wrote in post #1165339:
Can you test this gem to see if it's working on Ruby on Rails 4 for you?
It's not even showing the images that are inside of the div tags.
Normally, it would even if the JavaScript was acting up.

https://github.com/acrogenesis/owlcarousel-rails

Colin Law

unread,
Dec 24, 2014, 5:05:48 PM12/24/14
to rubyonra...@googlegroups.com
On 24 December 2014 at 21:08, David Williams <li...@ruby-forum.com> wrote:
> Hassan Schroeder wrote in post #1165339:
>> On Wed, Dec 24, 2014 at 10:06 AM, David Williams <li...@ruby-forum.com>
>> wrote:
>>> The javascript is not working for 'owlcarousel-rails' plugin.
>>
>> Disclaimer: never heard of this plugin, but ---
>>
>>> $(".owl-carousel").owlCarousel();
>>
>> if you're calling that method *before* any such elements exist in the
>> DOM, I'd expect exactly nothing to happen :-)
>>
>> Have you looked at the JS console/log to see if there are errors?
>>
>> --
>> Hassan Schroeder ------------------------ hassan.s...@gmail.com
>> http://about.me/hassanschroeder
>> twitter: @hassan
>
> Can you test this gem to see if it's working on Ruby on Rails 4 for you?
> It's not even showing the images that are inside of the div tags.
> Normally, it would even if the JavaScript was acting up.

View the source of the page in the browser to get a clue as to what is going on.

Colin

David Williams

unread,
Dec 24, 2014, 10:59:57 PM12/24/14
to rubyonra...@googlegroups.com
I was calling an ID instead of a class with the initializer. Now, it's
working perfectly!! Thank you all for taking the time out to guide me.
Reply all
Reply to author
Forward
0 new messages