jQuery Ajaxコールの直後の要素を書き込む

Question

こんにちは私は、PHPのファイルにいくつかの情報を送信するjQuery関数を持っています。 PHPファイルは、それがするはずのものを行い、HTMLコードを生成します。私はここまでうまくいく。

問題は、このPHPファイルで生成されたHTML結果を取得して、Ajax呼び出しが作成されたページにDIVの後に追加するか、DIVなどの中に追加することだけです。

これは、これまで私が持っているjQueryの関数である：

$(document).ready(function() { 
var idGenre = $("#txtGenre option:selected").val(); 
var html = $.ajax({ 
      type: "POST", 
      url: "GetSubGenreData.php", 
      data: "id=" + idGenre, 
      async: false 
      }).responseText; 

}); 

PHPファイルGetSubGenreData.phpから取られたHTMLの結果で更新しなければならないDIVがある：

<div id ="divSubGenre"></div> 

今すぐことができますPHPファイルは次のような選択ボックスを返します：

<select> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
etc... 
</select> 

この選択ボックスは、 DIV <div id ="divSubGenre"></div>の直後に追加するか、このDIVを返されたセレクトボックスに置き換えるだけです。良いjQuery開発者にとって不可能なことはありません。しかし、私はそうではありません。

PHPファイルのHTML結果を正しいDIVに書き込む機能が必要です。

ありがとうございます！あなたの成功コールバック

success:function(html){ 

$("#divSubGenre").append(html); 
} 

で

Answer 1

あなたが結果を追加しているdivに挿入し、その後空でない場合は、AJAXの応答

success:function(html){ 

$("#divSubGenre").replaceWith(html); 
} 

でコンテナのdivを交換したい場合部門使用後after

success:function(html){ 
$("#divSubGenre").after(html); 
} 

ので、あなたの最終的なコードは、この

$(document).ready(function() { 
var idGenre = $("#txtGenre option:selected").val(); 
var html = $.ajax({ 
      type: "POST", 
      url: "GetSubGenreData.php", 
      data: {id:idGenre}, 
      async: false, 
      success:function(html){ 
       $("#divSubGenre").append(html); 
      } 
      }); 

}); 

jquery ajax

jquery replaceWith

jquery append

jquery after

更新のように見えるかもしれ

$("#txtGenre").change(function(){ 
//get the update value here 
var idGenre = $("#txtGenre option:selected").val(); 
    $.ajax({ 
      type: "POST", 
      url: "GetSubGenreData.php", 
      data: {id:idGenre}, 
      async: false, 
      success:function(html){ 
       $("#divSubGenre").html(html); 
      } 
      }); 

}); 

jquery change

私はうまくシナリオを理解している場合は、

<div id="divSubGenre"></div> 
<div id="divonLoad"></div> 

のようにページ上の2つのdivを持つことができ、ページのロード時に結果を表示するコメントについてのさらに別のアップデート

をページロードすると、#divonLoadに結果が追加され、changeイベントハンドラの内側にあるajaxコールのsuccessコールバックでこれが実行されます

success:function(html){ 
$("#divonLoad").fadeOut("slow").remove(); removes the div that was holding the result on page load 
$("#divSubGenre").html(html); 
} 

Answer 2

あなたのAJAX呼び出しにHTML dataTypeとsuccessのメソッドを追加します。

// No need to return the responseText as a variable 
updateSelectHtml = function() { 
    $.ajax({ 
    type: "POST", 
    url: "GetSubGenreData.php", 
    data: "id=" + idGenre, 
    async: false, 
    // Make sure the return is formatted as html 
    dataType: "html", 
    success: function(data) { 
     // The return HTML data is appended after the div. 
     $("#divSubGenre").html(data); 
    } 
}); 
}; 

// Bind the function to #txtGenre onchange 
$("#txtGenre").change(updateSelectHtml);