CODEWITHSUNDEEP
jqueryhtmlruby-on-rails
WilliamLindsay
WilliamLindsay

Reputation: 23

jQuery dialog not showing rails form

I'm running into a problem while using jQuery dialogs with a form in it. The problem is that, for some reason, when I initially open the dialog, the html form tags are missing. But if I close it and open it a second time, they are there. This is very problematic since the first time, the form will not be submitted but the second time it will. Here is my implementation:

I start off with a link to open the dialog:

<%= link_to "Link", {:controller => "controller", :action => "popup"}, :remote => true %>

Inside of my controller I do the following:

def popup
   respond_to do |format|
      format.js
   end
end

Which will respond to the js format and launch popup.js.erb which does the following:

$('.modal').html("<%= escape_javascript(render(:template => '_popup_form.html.erb')) %>");
$('.modal').dialog({modal: true});

I will also note that I have the following beneath my initial link:

<div class="modal" style="display: none;"></div>

And the popup will render the following:

<div id="dialog">
    <%= form_tag(:controller => 'controller', :action => 'action', :remote => true) do %>
        <p>Message</p>
        <%= text_field_tag(:text, nil, {:placeholder => "Text", :style => "width: 90%;"}) %> </p>
        <%= submit_tag("Submit", {:class => 'input_button'}) %>
    <% end %>
</div>

With all of this, the modal does indeed show up with the proper message, edit text field, and submit button, but for some reason, the form is not there as seen here:

<div id="dialog">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="✓">
        <input name="authenticity_token" type="hidden" value="token">
    </div>
    <p>Message</p>
    <input id="text" name="text" placeholder="Text" style="width: 90%;" type="text"> <p></p>
    <input class="input_button" name="commit" type="submit" value="Submit">
</div>

But upon dismissing it and reopening it, it shows up properly and has the desired behavior. As seen here:

<div id="dialog">
    <form accept-charset="UTF-8" action="/controller/action?remote=true" method="post">
        <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="✓">
            <input name="authenticity_token" type="hidden" value="token">
        </div>
        <p>Message</p>
        <input id="text" name="text" placeholder="Text" style="width: 90%;" type="text"> <p></p>
        <input class="input_button" name="commit" type="submit" value="Submit">
    </form>
</div>

I can't seem to find a reason for this. Any help on this would be greatly appreciated.

Upvotes: 0

Views: 649

Answers (2)

Nich
Nich

Reputation: 1102

This is due to when you render the template first, and set the modal to true, the dialog will have modal behavior and other items on the page will be disabled.

try look into this document. http://docs.jquery.com/UI/API/1.7.2/Dialog

Upvotes: 1

WilliamLindsay
WilliamLindsay

Reputation: 23

I got it to work by inverting the order of two lines to the following:

$('.modal').dialog({modal: true});
$('.modal').html("<%= escape_javascript(render(:template => '_popup_form.html.erb')) %>");

I don't understand why this worked but at least it works.

Upvotes: 0

Related Questions