Question

quite random behavior, I’m calling on a modal dialog to show a partial inside.

I’m working with simple_form + bootstrap and jquery-ui.

the button that calls the function has this code in the view:

<p><%= link_to 'New Boots', new_boot_path, :class => 'btn btn-primary pull-right', :remote => true, :id => 'new_boot_link' %></p>

in my views/boots/new the code is this:

<div id="content">
<%= render :partial => 'form' %>
</div>

and in views/boots/_form the following

<%= simple_form_for(@boot, :html => { :class => 'form-vertical' }, :remote => true) do |f| %>
<fieldset>
    <%= f.input :number %>
    <%= f.input :size, :collection => boot_size_options %>
    <%= f.input :condition, :collection => boot_condition_options %>
    <%= f.input :brand , :collection => boot_brand_options %>
</fieldset>
    <div class="form-actions">
    <%= f.button :submit, :class => 'btn btn-primary' %>
    <%= submit_tag 'Reset', :type => :reset, :class => "btn btn-danger" %>
    </div>
<% end %>

In application.js i have the following:

$(document).ready(function() {


        $('#new_boot_link').click(function(e) {
        var url = $(this).attr('href'); 
        $('#modal').dialog({
                title: "New Boots",     
                draggable: true,
                resizable: false,
                modal: true,
                width:'auto',
                open: function() {
                        return $(this).load(url + ' #content');}
        });
        });
    });

So the modal works as it should, but it appears at the bottom of the screen, however if i close it and click on the button again, it shows right in the middle as it should have done in the first place.

Is it css? I think maybe not, as otherwise it would continue showing up constantly in the same place… so i dont know if is the way I’m calling the function?

Suggestions are welcome, this is quite an annoying glitch!

Answer 1

Sorry about previous mistakes.
Unfortunately I can’t reproduce your problem in person. I suspect that this would help because it will convert the DIV and on call fill and display.

$(document).ready(function(){
var modal=$('#modal');
$('#new_boot_link').click(function(e) {
  var url = $(this).attr('href'); 
  modal.load(url + ' #content',function(){
    modal.dialog("open");
  });
});
modal.dialog({ autoOpen: false, title: "New Boots", draggable: true,
resizable: false, modal: true, width:'auto'});
});