Элемент записи jQuery сразу после вызова Ajax

Question

Здравствуйте, у меня есть функция jQuery, которая отправляет в файл php некоторую информацию.Файл PHP будет делать то, что он должен был сделать, и сгенерирует некоторый HTML-код.Пока все хорошо.

Проблема в том, что мне нужно взять результаты HTML, сгенерированные этим файлом PHP, и записать их на странице, где был создан вызов 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;

});

DIV, которая должна быть обновлена ​​с помощью результатов HTML, взятых из файла PHP GetSubGenreData.phpis:

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

Теперь предположим, что файл PHP вернет поле выбора, что-то вроде этого:

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

Это поле выбора должно быть добавлено сразу после DIV <div id ="divSubGenre"></div> илипросто заменив этот DIV на возвращенное поле выбора.Нет ничего невозможного для хорошего разработчика jQuery.Но это не так.

Мне просто нужна функция для записи результатов HTML из файла PHP в нужном DIV.

Спасибо !!

Answer 1

в вашем успешном обратном вызове

success:function(html){

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

, если вы хотите заменить контейнерный контейнер ответом ajax

success:function(html){

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

, если div, к которому вы добавляете результаты,не пусто, чтобы вставить после 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 на странице, например

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

при загрузке страницы, выполнить вызов ajax и добавить результат к #divonLoad и в обратный вызов success вашего ajaxвызов, который находится внутри обработчика событий change, делает это

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

Answer 2

Добавьте метод HTML dataType и success к вашему вызову AJAX:

// 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);