ブートストラップ3 - ajaxの検索結果をモーダルで表示し、他の場所でモーダルを投稿します。

Question

ユーザーが検索を実行できるテキスト入力があります（データベースに保持されているユーザー名または電子メールアドレス）。私はすでに検索などを行うPHPスクリプトを持っています。

検索結果をBootstrap 3モーダルに表示するか、エラーがなければエラーメッセージを表示します。

私はこれを行う完全な論理を理解するのに苦労しています。

は、私がこれまで持っているもの：

検索入力やボタン：POSTデータ（例えば$_POST['search']）を受け付ける（/ajax/search/経由でアクセス可能）

<input type="text" name="search"> 
<button id="searchBtn">Search</button> 

PHP関数、データベースを照会します。現時点では配列を返します。結果がなければ空です。

ものを実行する正しい順序は何ですか？私は/ajax/search/に検索入力を渡す必要があることを知っています。しかし、私はモーダルを開く必要もあります - これらの両方はおそらく検索（searchBtn）をクリックすると行われます。最初にjqueryのajaxメソッドでフォームを送信してから、モーダルを開くのに成功していますか？

さらに問題を複雑にするには、このモーダルが表示されたら、見つかったユーザーの隣に一連のティックボックスが表示されます。これは他の場所に投稿する必要があります...しかし、私はまだこれを取得していない。

私はこれを示す任意のチュートリアルがある場合は、私が見つけることができないとして、誰かが1で私を指すことができてくださいこれを理解するのに苦労だし、すでにBootstrap 3 with remote Modalなどいくつかの記事を読んでいると、このPlacing the results of a form post into a modal in Bootstrap 3

1つ、特に「これは廃止されました」とマークされていない場所です。

Answer 1

を検討するための簡単な例：

JSで

$('#myModal').on('shown.bs.modal', function() { 
    $(".modal-body").html("Loading..."); 
    $.ajax({ 
    url: "/path/to/request", 
    data: { 
     // Parameters if needed 
    }, 
    method: "POST", 
    success: function(data) { 
     $(".modal-body").html(data); 
    } 
    }) 
}); 

例（モックアップ）：

https://jsfiddle.net/4bkhLatg/

Answer 2

私はあなたが何をしているかを見ます。ブートストラップはちょうどあなたの "ディスプレイ"ですが、ブートストラップを見て、 "行く"部分を教えて、良いものは通り過ぎたバスで失われます。 （隠された＃のDIV1）の（隠れた）アップデート後に続いて

http://www.w3schools.com/jquery/ajax_ajax.asp

：外部のAjaxのこの非常に単純な例に飛び乗る

$("#div1").html(result); 

あなたは（隠された）を示すために、あなたのブートストラップモーダルを呼び出しますDIV：

$('#div1').modal('show')