Ruby on rails/Javascript widget

Question

So here is my point, i tried to follow some tutorial and read all of the references in the end from http://8raystech.com/2011/11/28/how-to-create-embeddable-widgets-with-rails

I spent almost 2 days searching for the little mistake I obviously made somewhere since I'm new to ruby on rails. I think it might be a route error since when I inspect elements via Chrome, i see the following error: EDIT:

"GET http://localhost:3000/widget 500 (Internal Server Error)"

I tried many things on it desperately but here is my current code:

My widget controller looks like this: (widget_controller.rb)

class WidgetController < ApplicationController
    def show
        @content = render_to_string(:partial => 'widget/embed', :layout => false)
    end
end

My view using javascript (show.erb.html)

(function() {
    document.write(<%= @content.to_json %>)
})()

The partial is not really important i think but here is an example: (_embed.erb.html)

<style>...</style>
<div class="widget-communication">
    <div>Bla bla bla</div>
    ...
</div>

and for the last, in the routes.rb

...
match 'widget', to: 'widget#show'
...

So I tested in local to load my widget using this:

<script src="http://localhost:3000/widget" type="text/javascript"></script>

Answer 1

I dont't know the widget but it seems You still want to render partial as HTML not as a JS. You are just assigning a string to value content and it wants to use default render action. Try to use not .erb but .js file extension (show.js.erb), so:

in the controller you still need to return a collection, ie:

class WidgetController < ApplicationController
  respond_to :js, only: :show

  def show
    @user = User.find params[:id]
  end
end

and in the view (show.js.html):

document.write("<%= escape_javascript(render(:partial => 'widget/embed', :locals => {:user => @user})).html_safe) %>");

Though I don't recommend using respond_to :js. It's very hard to debug, it's pretty slow and it mixes html and js logic.

Answer 2

Ok so here is another way to do it... JQuery and Json....

So use directly used a controller like your user controller or whatever information you want to put in your widget, in my example, some information on companies.

so add a method widget in your controller like:

def widget
    @company = Company.find(params[:id])
    @logo_url = @company.logo_url(:mini)
    respond_to do |format|
      format.json { render :json => {:company => @company, :url => @logo_url}, :callback => params[:jsoncallback] }
    end
  end

In your routes.rb you should then have something similar to this:

resources :public_company_profiles do
    get :widget, on: :member
  end

then the JQuery parts making your html code from your JSON informations the third party website will use: First the script to add the jquery then the actual jquery request.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$.getJSON("http://www.yourwebsite.com/yourcontroller/ID/widget?jsoncallback=?",
    function(data) {   
    var logo_url = "http://www.yourwebsite.com" + data.url;
    $("#logo img").attr('src',logo_url);
    $("#logo img").attr('alt',data.company.name);
    $("#name").html(data.company.name);
    $("#desc").html(data.company.description);
  });
</script>

Then it works baby ! (dont forget to put the and stuff around the jQuery documentation here: api.jquery.com/html)

Answer 3

Why are you using render_to_string? Have you tried just plain render?

Also, maybe try making your GET call append .json to the end of the URL.