CODEWITHSUNDEEP
javascriptruby-on-railsmodal-dialogruby-on-rails-4
Matthew Melone
Matthew Melone

Reputation: 257

Rails render partial in a modal

I'm really struggling to show a partial in a modal that will feature local variables. I'm new at Javascript and can't seem to figure out how to render the partial in a new dialog-form. Currently, I render the partial with "display:none" and, upon clicking "Click me", the partial is revealed on the page and an empty dialog box opens. Unfortunately, my intent is to show the partial IN the dialog box, which just isn't working.

The view:

    <div id="groups_show" style="display:none">
      <%= render partial: 'groups/group_full', :locals => {:group => group} %>
    </div>
    <%= link_to "Click me", root_url, class: "groups_showme" %>

Javascript:

$('.groups_showme').on('click', function(e) {
  e.preventDefault();
  $('#groups_show').show();
    var htmlString = $(this).html();
    var dialog_form = $('<div id="dialog-form">Loading</div>').dialog({
    autoOpen: false,
    width: 520,
    modal: true,
    open: function() {
      return $(this).html( htmlString );
    },
    close: function() {
      $('#dialog-form').remove();
    }
});

Upvotes: 0

Views: 2525

Answers (1)

Mina
Mina

Reputation: 1516

Perhaps this will work for you

$('.groups_showme').on('click', function(e) {
  e.preventDefault();

  $('<div id="dialog-form">Loading</div>').dialog({
        autoOpen: true,
        width: 520,
        modal: true,
        open: function() {
            $(this).append($('#groups_show').show());
        },
        close: function() {

        }
    });
});

See here http://fiddle.jshell.net/aeuzF/3/

Upvotes: 1

Related Questions