帶模態窗口的Sinatra/Padrino部分

我正在用padrino編寫一個小應用程序，我有2個視圖，人員和事件。我有這些意見和控制器，他們工作正常。

我的問題是，從'事件'視圖，我想打開一個模式窗口來添加一個新的人。

模態窗口將載入「人物」的相關字段。一旦字段填滿並點擊一個按鈕，模式窗口將消失，新的「人員」將被保存，用戶將回到事件頁面。

任何人都可以告訴我如何繼續？謝謝。

2013-02-25 daesu

模態窗口通常使用javascript完成。例如，使用jQuery UI（從the docs）

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Dialog - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
    $("#dialog").dialog(); 
    }); 
    </script> 
</head> 
<body> 

<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 


</body> 
</html>

西納特拉/ Padrino會照顧佈局和視圖，你只需要添加腳本部分。您正在使用Haml假設，你的看法是這樣的：

#dialog{title: "Basic dialog"} 
    %p 
    This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. 

:javascript 
    $(function() { 
    $("#dialog").dialog(); 
    });

的JavaScript並不需要去head標籤內的jQuery的文檔建議。

編輯：

有裝載部分到窗口一對夫婦的選擇。一種是使用類似Handlebars這樣的JavaScript庫，但我更願意從一個路徑中獲取JavaScript來加載它，這樣所有的視圖代碼就會保持在一起，例如，

get "/templates/modal1/?" do 
    haml :modal1, :layout => !xhr? 
end

在JavaScript，make an AJAX call到這條路線，你會得到只有HTML SANS佈局，然後用它來fill the box：

$.get('ajax/test.html', function(data) { 
    $('#dialog').html(data); 
}

，並在您的視圖僅僅描述了DIV ：

#dialog1 
    -# The HTML from the view will be put here by the jQuery code.

類似的東西。

來源

2013-02-25 08:44:01 iain

嗨伊恩，謝謝你的快速反應。這很有幫助，但我想知道如何將部分（從我的人模型）加載到模態窗口？我不想重複代碼，我基本上只需要將'person/_form.erb'加載到模態中，然後保存它。這有道理嗎？ – daesu 2013-02-25 09:03:44

關於您的問題的第二部分，您可以進行XHR呼叫以獲取部分內容。您不會獲取部分使用模型。你會在控制器中寫入那一點代碼。 – ch4nd4n 2013-02-25 09:31:43

@ User79843我已經更新了答案，希望它更接近您要找的內容。 – iain 2013-02-25 09:34:21

帶模態窗口的Sinatra/Padrino部分

回答

相關問題