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.
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?