Fancybox-Lightbox2模式，在Rails中有一些Ajax 3

試圖構建一些模式窗口，以在更好的界面中顯示crud。最好是希望使用Jquery來完成此工作，因爲它打算在應用程序的其他部分使用jquery-ui。Fancybox-Lightbox2模式，在Rails中有一些Ajax 3

我的div在我的應用程序佈局

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

，然後是在與阿賈克斯

$(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嗎？

非常感謝！

來源

2011-04-26 Lievcin

這些插件有大量的在線例子，它不適合你嗎？ Ajax，rails，插件本身？你有沒有嘗試測試一個簡單的Ajax調用，看看是否所有的東西都用rails正確設置了？有錯誤嗎，你使用了螢火蟲嗎？ – 2011-04-26 13:23:13

嗨Repecmps，謝謝你的迴應。當我按照上面的方式進行操作時，它可以正常工作。但是，這是當有問題的js進入Application.js，有了這些插件，我不知道把文件放在哪裏，或者如果我有我需要的所有文件。我確實在網上看到了教程，但他們似乎沒有針對Rails。如果你知道很好的資源，我會很樂意看看！ – Lievcin 2011-04-26 16:03:24

讓我們試着總結一下你如何組織整個事情。

你把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代碼應該圍繞$包裹（文件）。就緒（）這樣的：

<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

注意的respond_to代碼。它告訴rails這是一個javascript動作，並且控制器不應該呈現除js之外的任何內容。

來源

2011-04-27 02:24:56

@repecmps：非常感謝您的建議。我已經嘗試過，雖然它在後臺刪除它們，但如果我刷新該項目將被刪除），但它並沒有使用該效果，只是沒有更改屏幕（除非我刷新）。這是soruce代碼「Edit 」 – Lievcin 2011-04-27 17:57:29

正如你可以從上面的代碼可怕看到，作爲編輯確實因爲某些原因 – Lievcin 2011-04-27 18:03:54

看看上面的答案編輯刪除鏈接沒有一個href。它有幫助嗎？對於刪除鏈接使用rails的link_to助手，就像我上面做的那樣。 – 2011-04-28 06:35:00

Fancybox-Lightbox2模式，在Rails中有一些Ajax 3

回答

相關問題