Topic: Javascript widgets on external websites

I'm looking for a way of allowing users to add a Javascript widget to their website. This widget would ideally retrieve a value from a model of mine, based on the id entered. It would then generate the necessary CSS and HTML on the user's site to display the necessary content. (an example would be the 'Digg this' widget)

Does anyone know of any good tutorials to do something like this?


Re: Javascript widgets on external websites

I've done something like this using a <script src='widget_url' type='text/javascript'></script> tag on the website.  The controller method then uses

a = render_to_string(:partial => '_partial_name').delete!("\n")
render(:text => "document.write('" + a + "');")

to render whatever partial is necessary and wrap it in the document.write() call.  If there is javascript in the partial it may need to be escaped with escape_javascript().  Styles can be written in <style></style> tags in the partial or can be 'included' by loading the style document in the method:
@css = IO.readlines(File.join(RAILS_ROOT, 'app','views','path','to','styles.css')).join

and then outputting it in the partial:
<%= @css %>

Actually, the javascript can be 'included' in the same way in the partial.

I guess that was a quick & dirty explanation of our method but hopefully it puts you on the right track.

Re: Javascript widgets on external websites

Actually the solution was a lot simpler than I thought. I didn't realise that all I had to do was basically write code but using Javascript.

So widget.js could read

document.write('Hello word')

But obviously to use my apps data it needs to be slightly more advanced

Re: Javascript widgets on external websites

i'm also trying to add a widget to external websites that will allows partners to add one line of html on to a website page to include the widget. using jonathanpg's basic concept, i am able to get the widget to show up on the external webpage. (right now i'm actually this on localhost, but the idea stays the same)

this is the one-line of code inserted to the external webpage (technically, it's not 1 line, since i include some js libraries too).

<script src='http://localhost:3000/browse/bar/1' type='text/javascript'></script>

there's some business logic processing, but here are the lines in the controller action browse/bar that adds the js to the external page.
a = escape_javascript(render_to_string(:partial => 'browse/restaurant_bar').delete!("\n"))
render(:text => "document.write('" + a + "');")

where it fails, however, is when i use the widget to go back to the server and retrieve new information. at this point, i'm just trying to get a <div id="results"> tag to be updated when the form_remote_tag is submitted. here is the code from the restaurant_bar partial that i'm inserting into the external webpage:
<div id="results">
  Replace me
<% form_remote_tag :url => 'http://localhost:3000/browse/update/1' do %>
  Fill in your info:
  Date: <%= select_month @r.datetime.month %> <%= select_day %>
  Time: <%= select_hour @reservation.datetime.hour %>
  <p><%= submit_tag 'Check'  %></p>   
<% end %>

all that browse/update doesn't do anything right now, though i have tried sticking in an explicit rendering of the rjs call:

here is the update.rjs template:

page.replace_html 'results', '<b>f you</b>'

when i submit from the form_remote_tag that i inserted into the external page, i get redirected to browse/update and this is displayed (as html).
try { Element.update("res_search_results", "<b>f you</b>"); } 
catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"res_search_results\", \"<b>f you</b>\");'); throw e }

everything works fine if i just make the partial into a regular view and then submit the form_remote_tag from there. that leads me to believe that there's something going on with the javascript that's inserted into the browser. i used firebug to compare the ajax request form that was generated and it looks identical to what is generated when i copy the partial into a view. what am i not understanding?

sorry, for the long post. any help would be greatly appreciated.


Re: Javascript widgets on external websites

Really the solution was a lot barer than I believed. I didn't make that all I had to do was essentially spell code but using Javascript.