4

私は Twitter Bootstrap の初心者で、Ajax もロードされているモーダル ボックスからフォームを処理しようとしています。問題は、使い方がわからないことです。Google で何時間も検索しましたが、良い例が見つかりませんでした。

以前にjquery uiを使用したことがありますが、ほぼ同じかもしれません。次のことを知りたいです。

  1. Ajax でフォームを含むファイルをロードするにはどうすればよいですか
  2. フォームが読み込まれた直後にセレクター (例: $('#item');) を使用して、フォームに入力された値を取得するだけで機能しますか?
  3. モーダルの [送信] ボタンをバインドして、フォームを Ajax 経由で別のファイルに送信するにはどうすればよいですか?

以下にフォームのサンプルをご用意いたします。

    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Submit a link</h3>
    </div>
    <div class="modal-body">
    <div id="msgholder1"></div>
    <div id="msg-loader"></div>
    <form action="../ajax/controller.php" data-async data-target="#msgholder1" id="add-link-form" method="POST">
    <table id="theform">
    <tr>
    <td>URL:</td>
    <td><input type="text" name="url" size="45" class="text ui-widget-content ui-corner-all" id="url" /></td>
    </tr>
    <tr>
    <td>Quality:</td>
    <td><select name="quality" id="quality">
          <option value="0">Pick One ...</option>
          <option value="1">CAM</option>
          <option value="2">TS</option>
          <option value="3">DVD</option>
    </select><br />
    </td>
    </tr>
    <tr>
    </fieldset>
    </form>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>

あらゆる種類の関連ドキュメントも役に立ちます。

ありがとう！

4

1 に答える 1

18

数時間の調査と回避策の後、次の動作する Ajax Modal スクリプトを取得しました。

<script type="text/javascript">
$(document).ready(function() {
  $('#addlink').on('click', function(event) {
    var href = SITEURL + '/modules/movies/addlink.tpl.php?movie_id=<?php echo $movie->id; ?>';
    $.get(href, function(response) {
      $('.modal').html(response);
      $('.modal').modal({keyboard:true});
      $('button#submit_link').bind('click', function()
        {
        $('.modal-body').html('<p>Loading ...</p>');
        $.ajax({
                    type: 'post',
                    url: SITEURL + "/ajax/controller.php",
                    data: 'action=report_link',
                    dataType : 'html',
                    context: $(this),
                    success: function (msg) {
                        $(".modal-body").html(msg);
                    }
                });
        });
    });
    event.preventDefault();
  });
});
</script>
于 2012-10-06T21:08:31.280 に答える