1

徹底的に検索しましたが、これに対する答えが見つかりません。

padrino を使用して小さなアプリを作成しています。人とイベントの 2 つのビューがあります。これらのビューとコントローラーがあり、正常に動作しています。

私の問題は、「イベント」ビューから、モーダルウィンドウを開いて新しい人を追加したいということです。

モーダル ウィンドウには、「人」に関連するフィールドが読み込まれます。フィールドに入力してボタンをクリックすると、モーダル ウィンドウが消え、新しい「人物」が保存され、ユーザーはイベント ページに戻ります。

進め方についてアドバイスをいただけますか？ありがとうございました。

4

1 に答える 1

2

通常、モーダル ウィンドウは JavaScript を使用して作成されます。たとえば、jQuery UIを使用する(ドキュメントから)

<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>

Sinatra/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();
  });

headjQuery ドキュメントが示唆するように、javascript をタグ内に入れる必要はありません。

編集：

パーシャルをウィンドウにロードするには、いくつかの選択肢があります。1 つはHandlebarsのような JavaScript ライブラリを使用することですが、私は javascript をルートからロードすることを好みます。これにより、すべてのビュー コードがまとまります。

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

JavaScript で、そのルートにAJAX 呼び出しを行うと、HTML sansレイアウトのみが取得され、それを使用してボックスに入力されます。

$.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-25T08:44:01.783 に答える