Question

Hello I have a jQuery function that will send to a php file some info. The PHP file will do the stuff it has supposed to do and will generate some HTML code. I am fine until here.

The problem is that I have then to take the HTML results generated by this PHP file and write them in the page where the Ajax call has been created, simply by appending it after a DIV or inside a DIV or whatever.

This is the jQuery function I have so far:

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

});

The DIV that must be updated with the HTML results taken from the PHP file GetSubGenreData.php is:

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

Now lets say the PHP file will return a select box, something like this:

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

This select box must be appended just after the DIV <div id ="divSubGenre"></div> or by simply replacing this DIV with the returned Select Box. Nothing impossible for a good jQuery developer. But I am not.

I just need the function to write the HTML results from the PHP file in the right DIV.

Thanks!!

Answer 1

in your success callback

success:function(html){

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

if you want to replace the container div with the ajax response

success:function(html){

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

if the div to which you are appending the results is not empty then to insert after the div use after

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

so your final code may look like this

$(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

update

$("#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

yet another update
about the comment to show the result on page load, if i have understood the scenario well you can have two divs on the page like

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

on the page load do the ajax call and append the result to #divonLoad and in the success callback of your ajax call that is inside the change event handler do this

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