0

尝试构建一些模态窗口以在更好的界面中显示 crud。最好希望使用 Jquery 来执行此操作，因为打算在应用程序的其他部分使用 jquery-ui。

我的应用布局中有 div

<div id="modal-container"></div>
<div id="modal">
  <a href="#" class="close">close</a>
</div>

然后被 Ajax 调用

$(function(){
  var $modal = $('#modal'),
      $modal_close = $modal.find('.close'),
      $modal_container = $('#modal-container');

  $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
    xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);
  });

  $('a[data-remote]').live('ajax:success', function(xhr, data, status){
    $modal
      .html(data)
      .prepend($modal_close)
      .css('top', $(window).scrollTop() + 40)
      .show();
    $modal_container.show();
  });

  $('.close', '#modal').live('click', function(){
    $modal_container.hide();
    $modal.hide();
    return false;
  });
});

现在，还有一些样式等，但是，嗯……它看起来并不一流。我希望使用 lightbox 或 facebox 或其他一些看起来很酷的插件，但由于缺乏在线教程，到目前为止还不能使用。

有人可以帮助将这些实施到 Rails 3 中吗？

非常感谢！

4

1 回答 1

1

让我们试着总结一下你是如何组织整个事情的。

您是否将 jquery 和插件文件放在文件夹中： /public/javascripts ？

在您的主布局文件 (/app/views/layout) 中加载脚本吗？

<%= javascript_include_tag 'jquery-1.4.4.min' %>
<%= javascript_include_tag 'rails' %>
<%= javascript_include_tag 'jquery-ui-1.8.7.custom.min' %>
<%= javascript_include_tag 'application' %>

您应该摆脱所有其他 javascript，包括原型。

出于测试目的，您不一定需要文件application.js 。您可以将您的 ajax 代码放在视图的 HEAD 部分。

这个 ajax 代码应该像这样包裹在 $(document).ready() 周围：

<script type="text/javascript">
    $(document).ready(function() {
        $('.delete_phone').bind('ajax:success', function() {  
            $(this).closest('tr').fadeOut();  
        });
    });
</script>

在电话号码列表中（在 HTML 表中），当您单击相应的删除链接时，此代码会删除 1 行，如下所示：

<%= link_to image_tag("editdelete.png", :size => "16x16", "Delete Phone"),
    { :controller => 'phone_controller',
        :action => 'destroy_phone',
        :id => phone },
        :method => :delete, :confirm => "Are you sure?",
        :remote => true, :class=>'delete_phone'
%>

像这样组织你的代码会改变什么吗？

编辑：

您应该更改 phone_controller 文件中的一些内容：

  def destroy_phone
      @phone = Phone.find(params[:id])
      @phone.destroy
      respond_to do |format|
          format.js   { render :nothing => true }
      end
  end

注意 response_to 代码。它告诉 rails 这是一个 javascript 动作，并且控制器不应该渲染除 js 之外的任何东西。

于 2011-04-27T02:24:56.540 回答