javascript - Rails render partial as widget over ajax using jsonp -

i've looked @ quite few other answers on here, i'm still struggling bit figure out how set rails widget.

i have code in widget controller:

  def widget     status = company.friendly.find(params[:id]).widget.active     body = to_json_value(render_to_string('companies/_widget', locals: { profile: self.profile }))      respond_to |format|       format.js { render json: { status: status, html: body }, callback: params[:callback] }     end   end    private    def to_json_value(str)     str.gsub!("\"", "\\\"")     str.gsub!(/\n+/, " ")     str   end 

the self.profile method sets list of variables passed partial.

what want give user javascript script tag can embed on (external) website. when user hits page, script make ajax call widget controller , if widget turned on, receive string of html rendered on page.

so far i've got widget controller return json object status , html string. problem when paste localhost url jsonlint.com, says invalid. confirmed when insert script tag html file , open in chrome. error saying there unexpected token :. changed controller , widget.js.erb include callback function. added , callback: params[:callback] controller.

i set callback function (doesn't yet) in widget.js.erb file. embed file using script tag in html file , load in chrome. when do, error saying showwidget undefined.

i'm struggling find resources explain how load data on jsonp rails app, , how callback functions come play.

here widget.js.erb:

function showwidget();  $.ajax({   type: 'get',   url: 'http://localhost:3000/<%= params[:company] %>/widget?callback=?',   jsonpcallback: 'showwidget',   contenttype: "application/json",   crossdomain: true,   datatype: 'jsonp',   success: function (data) {     var result = json.parse(data);     $('#company-widget').html(result.html);   },   error: function(e) {     console.log(e.message);   } }); 

here test.html:

<div id="company-widget"></div>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> <script src="http://localhost:3000/taco-corp/widget.js?callback=showwidget" type="text/javascript"></script> 

i'm not sure widget.js.erb script should live in rails app. here have far widget.js.erb:

i figured out problem was. needed add callback rails controller , $.ajax method. didn't have callback set correctly in ajax call. needed specify correct header (contenttype) around http 406 error. here working jquery code below reference:

$(document).ready(function(){     var company = 'taco-corp';      $.ajax({         type: 'get',         url: 'http://localhost:3000/' + company + '/widget.js?callback=?',         contenttype: "application/javascript",         crossdomain: true,         datatype: 'jsonp',         success: function(data) {             $('#company-widget').html(data.html);         },         error: function(e) {             console.log(e.message);         }     }); }); 

and here rails controller:

  def widget     status = company.friendly.find(params[:id]).widget.active      body = render_to_string('companies/_widget', layout: false, locals: { profile: self.profile })      respond_to |format|       format.js { render json: { status: status, html: body }, callback: params[:callback] }     end   end