Question

I’m trying to figure out the best way to insert content into a light box using rails UJS. I have a link that looks like this:

<%= link_to "login", login_path, :remote => true %>

Which produces html as such:

<a data-remote="true" href="/login">login</a>

So this all works great, and I’ve created the view file: user_sessions/new.js.erb which also loads just fine, but my question what is the preferred method of inserting appending the html into the page? Like I already have the login form on the non-js page, so can’t I just load that partial into the page?

Any ideas would be very welcomed.

Answer 1

I ended out doing this, sortof a jQuery plugin that relies on ujs:

This in my user_sessions/new.js.erb

$(this).modal("<%= escape_javascript(render 'form') %>");

then I made a jQuery plugin as such:

jQuery.fn.modal = function(content) {
  var modal_screen = $(document.createElement('div')).addClass("modal_screen");

  var modal_container = $(document.createElement('div')).addClass("modal_container");
  var modal_outer_border = $(document.createElement('div')).addClass("modal_outer_border").appendTo(modal_container);
  var modal_inner_border = $(document.createElement('div')).addClass("modal_inner_border").appendTo(modal_outer_border);
  var modal_contents = $(document.createElement('div')).addClass("modal_contents").appendTo(modal_inner_border);

  $(modal_screen).appendTo('body');
  $(modal_container).appendTo('body');
  $(modal_contents).append(content);
}

And yah I know thats a lot of containers but I had to do this to center the modal window vertically and provide a nice double border situation.

Let me know what you think about this folks!

---

Perhaps an additional question would be when making a jQuery plugin how can I make it so I can call the plugin with just $.modal("<%= escape_javascript(render 'form') %>");, without the object this and just call the method on the jQuery object itself?