1

Rails 3.2.3 では、ブートストラップ 2.0.2 モーダルを使用して部分ビューでフォームを作成しています。

#myModal.modal
  .modal-header
    .close{"data-dismiss" => "modal"}= link_to "x", root_path
    %h3 Add Tags
  .modal-body
    = form_tag '/tagging', :remote => true do
      = text_field_tag 'tags_string', params[:tags_string]
      = hidden_field_tag 'id', params[:id]
      .modal-footer
        = submit_tag "Add tag", :class => "btn btn-primary"
  :javascript
    $(document).ready(function() {
      $('#myModal .btn.btn-primary').click(function() {
        $('#myModal').modal('hide');
        $('form').submit();
      });
    });

「メイン」ページには、パーシャルを呼び出すためのリンク ボタンがあります。

%td= link_to "Tag", tagging_path(:id => "#{repo.id}", :tags_string => "#{repo.tags}"), "data-toggle" => "modal", :class => "tag add-tag btn btn-primary

コントローラーには相対タグ付け方法があります。

今、私は2つの問題を抱えています:

  1. 最初

    ボタンをクリックすると、フォームが正しく表示されますが、「メイン」ページ (これは望ましくありません) が残り、背景として相対 href (空) が表示されます:

    http://localhost:3001/tagging?id=4f82cb8ef370ff0001000699&tags_string=

    これは、リンク ボタンの「tagging_path」によって生成されます。ブートストラップの例のようにモーダルを呼び出すことはできません:

    <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

    コントローラー/モデルにフォームパラメーターを入力する必要があるため...、どうすればこれを行うことができますか?

  2. 2番目：

    フォームの [タグの追加] ボタンをクリックすると、データベースは適切なコンテンツを取得し、すべてが機能しますが、JS アクションではなく root_path へのリンクである「X」リンクをクリックするまで、フォームは消えません。

    jsが正しく動作していないようです

    $(document).ready(function() {
  $('#myModal .btn.btn-primary').click(function() {
    $('#myModal').modal('hide');
    $('form').submit();
  });
});

アップデート：

これは生成された html です:

<div class='modal hide fade' id='myModal'>
    <div class='modal-header'>
        <div class='close' data-dismiss='modal'><a href="/">x</a></div>
            <h3>Add Tags</h3>
        </div>

        <div class='modal-body'>
        <form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" />
                <input name="authenticity_token" type="hidden" value="vlZaCIRV58BfDZ0xjYsefSEVL1LSpiI5UL1tgzbm/8o=" /></div>
            <input id="tags_string" name="tags_string" type="text" />
            <input id="id" name="id" type="hidden" />

            <div class='modal-footer'>
            <input class="btn btn-primary" name="commit" type="submit" value="Add tag" />
            </div>
        </form>
    </div>
</div>

<td>
    <a href="/tagging?id=4f82cb5cf370ff000100003a&amp;tags_string=ruby+web+framework" class="tag add-tag btn btn-primary" data-toggle="modal">Tag</a></td>
</tr>
<tr>
<td>
    <div class='gravatar'><img alt="Assets.github.com%2fimages%2fgravatars%2fgravatar-orgs" height="26" src="https://secure.gravatar.com/avatar/b0f9595244db739302ccce55bfbfc5e5?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-orgs.png" width="26" /></div>
</td>
<td>
    <a href="https://github.com/h5bp/html5-boilerplate">h5bp/html5-boilerplate</a>
</td>
<td class='watchers span1'>12105</td>
<td class='forks span1'>1781</td>
<td>A professional front-end template that helps you build fast, robust, adaptable, and future-proof websites.</td>
<td>Sun, Jan 24 at  6:03pm</td>
<td>Sat, Apr 14 at  2:10pm</td>

...
4

1 に答える 1

1

1）event.preventDefault()リンクアクションを停止するために使用します

2）セレクターにスペースが必要でした。.btnまたは、完全に除外することもできます。

$(document).ready(function() {
    $('#myModal .btn-primary').click(function(e) {
        e.preventDefault();
        $('#myModal').modal('hide');
        $('form').submit();
    });
});

モーダルのレンダリングされたHTMLマークアップを投稿する場合、特定のボタンのクリックをキャプチャする場合、クラスを使用することは一般的に適切ではないため、セレクターを支援できます。

指定されたマークアップを編集します。

さて、あなたはあなたのボタンをbutton代わりにタイプにして、代わりにsubmitそれによってそれを選択することができますname。を使用する場合submit、呼び出す必要はありませんがform.submit、デフォルトでそれを行います。buttonタイプを使用すると、より詳細に制御できます。

$('input[name="commit"]').click(function() {
    //$('form').submit();
    $('#myModal').modal('hide');        
});

実例： http： //jsfiddle.net/tcjCj/3/

于 2012-04-21T15:54:07.797 に答える