Dialog doesn't show

Question

I thought I've done everything correctly but my dialog in Rails app doesn't show when I click on link.

This is the code for link:

<li><%= link_to "Sign in", :class => "userlink" %></li>

This is my dialog:

<div id="loginf"  style="display:none;">
    <div class="col-md-3">
        <%= form_for(:session, url: sessions_path) do |f| %>

        <%= f.label :username %>
        <%= f.text_field :username %>

        <%= f.label :password %>
        <%= f.password_field :password %>

        <%= f.submit "Sign in", class: "btn" %>
        <% end %>

        <p>New user? <%= link_to "Sign up now!", signup_path %></p>
    </div>
</div>

And this is my javascript stored inside assets/javascripts/dialog :

$(document).ready(function(){

    $("a.userlink").click(function(e) {
        $("#loginf").dialog("open");
        e.preventDefault();
        return false;
    });

    $("#loginf").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false
    });
});

Everything seems fine to me. When I remove style="display:none;" , div normally appears and looks ok. Also, if I set alert box inside javascript click function, that alert box normally displays.

What do you think?

Answer 1

you can try this

$("#model").click(function(){
   $( "#dialog-modal" ).dialog({
     height: 140,
     modal: true
   });
});

DEMO

Answer 2

I think you should remove "display:none" style from div, because you'r already using autoOpen:false option .

Please refer to this link for more details: http://api.jqueryui.com/dialog/#option-autoOpen

autoOpenType: Boolean

Default: true
If set to true, the dialog will automatically open upon initialization. If false, the      dialog will stay hidden until the open() method is called.
Code examples:
Initialize the dialog with the autoOpen option specified:

$( ".selector" ).dialog({ autoOpen: false });
Get or set the autoOpen option, after initialization:

// getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );

// setter
$( ".selector" ).dialog( "option", "autoOpen", false );