Dynamically/at runtime set jquery variables from Rails view?

Question

I'm looking at the Sharre social mediq jquery plugin http://sharrre.com/# Below is an example of how to use it.

simple_jquery_social.js example:

$('#sharrre').sharrre({
share: {
  googlePlus: true,
   facebook: true,
  twitter: true
 },
url: 'http://sharrre.com'

})

So in normal rails usage, I would add the above in my assets directory (along with the sharrre jquery lib stuff), put a 'div id=sharrre' tag in my view, and I'd be done. But I would like to make a rails helper function to use in my .html.erb view template and dynamically decide whether or not to display google plus, for example. So I would want something like:

<%= my_helper :googlePlus=>false %>

Then my environment should know that the googlePlus variable in the jquery code above would now be false, and hence the googlePlus button would not be displayed. **The whole point is to to control a lot more options available in the jquery plugin dynamically thru Rails. But to do that I need to be able to set jquery variables dynamically through Rails. I realize the above example is trivial because I could just change the jquery variable by hand, but by doing it through Rails, I could also set the url param dynamically, which is something I want to be able to do so people can recommend particular pages.

What is a good mechanism for accomplishing this, or is it even possible?

Answer 1

Create a helper that takes an ID, a URL and a hash of options as a param.

Then the helper generates a mix of JS and html, outputting both the JS code and the div that needs

def sharrre_tag(div_id, url, options = {})
  div_str = "<div id='#{div_id}'></div>".html_safe
  js_str = "<script>".html_safe
  #Add code to append specific js code and test all option existence and append time to js_str
  js_str += "</script>".html_safe
  return js_str + div_str
end

And in the view just call your helper with the right params

Option 2. Separate JS from HTML

If you want to achieve this, you could write a JS code in your separate JS file that'll take each element with a class sharrre_div. For each one, it'll check if specific html data attributes exist : data-sharrre-googlePlus, data-sharrre-twitter, data-sharrre-url etc ... this option relies heavily on JS

JS : Encapsulate it in a body onload event

var sharrre_attr_array = ['data-sharrre-googlePlus', 'data-sharrre-facebook', 'data-sharrre-twitter'];
$('.sharrre_div').each(function(index){
    var share_hash = {};
        var current_div = $(this);
        $.each(sharrre_attr_array, function(index, element){

          if(current_div.attr(element)){
                share_hash[element.split('data-sharrre-')[1]] = true;
            }
      });
    $(this).sharrre({
          share: share_hash
            ,url: $(this).attr('data-sharrre-url')
        });

});

All your helper has to do is then create a div like this :

<div class='sharrre_div' data-sharrre-googlePlus='1' data-sharrre-twitter='1' data-sharrre-url='<%=request.url%>' data-sharrre-facebook='1'></div>

Shouldn't be too hard to write :)