How to get the sharebox jQuery plugin to work with Rails

Question

I have downloaded the jquery sharebox from the following site and added what i believe to be the correct code to my app but i am unable to get it to work. I am getting the error messages that Error: TypeError: $(...).sharebox is not a function.

http://www.jqueryscript.net/social-media/Simple-Clean-Social-Share-Plugin-with-jQuery-sharebox.html

_post.html.erb

<h2><%= link_to_unless_current post.title, post %></h2>
<%= simple_format post.body %>
<div class="demo"></div>
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'cathjonesblog'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
<script>
$(document).ready(function(){
$('.demo').sharebox({
services : "facebook twitter google+ linkedin"
});
});
</script>

application.js

//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
//= require jquery.sharebox
$(document).foundation();

application.css

 *= require_self
 *= require foundation_and_overrides
 *= require jquery.sharebox.css

I have placed the js file in my apps javascript directory and the cs files in the stylesheets folder and created an icons folder in the root for the images.

Any help would be greatly appreciated.

Thanks

Answer 1

It sounds like this line:

$('.demo').sharebox({

Might be above this line in the dom:

<script src='/assets/jquery.sharebox.js?body=1'></script>

Dependent javascript files need to be loaded in the right order - eg jquery.sharebox.js calls functions in the jquery library, so the jquery library has to be loaded first. In your case the sharebox plugin has to be loaded before you call .sharebox on that element.

If that isn't the issue, check the console for errors, a js file might not have loaded properly.