Search code examples
jqueryruby-on-railsujs

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


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.


Solution

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