How do I load content with ujs, jquery and rails?

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'm not totally sure I understand what you're asking, but in general you can stuff fragments of HTML into some existing container like this:

$('div#yourDiv').html(blob_of_HTML);

You can load fragments of HTML from server-side actions with:

$('div#yourDiv').load(yourURL, function() {
  // stuff to do when the content has been loaded
});

If you've got a complete page, and you want to load just a part of it into another page, you can try this:

$('div#yourDiv').load(yourUrl + ' #something', function() {
  // stuff to do ...
});

That tells jQuery to take the loaded whole-page content, then look for "#something" inside that whole page, and only load that part of the page into the target container.

Answer 2

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?