jQuery write element just after the Ajax call

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!!

Rafay · Accepted Answer · 2011-07-20 13:38:23Z

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

});

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

edited Jul 20, 2011 at 13:38

answered Jul 20, 2011 at 12:42

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DiegoP. Over a year ago

Also this one works. But I have the same question. When idGenre changes the HTML result does not get updated. Why? I need a way to update the result EVERYTIME the idGenre Value changes. How do I do that? Thanks

Rafay Over a year ago

from where the idGenere is changing? is it a dropdown? or an input field?

DiegoP. Over a year ago

I will for sure!! Last question. It is now adding the HTML result ONLY when the idGenre changes. Is there a way to show the first result always. I mean when the page loads there is no select box there, until idGenre changes. I would need to show that anyway, because the first value of idGenre will be available anyway. It is already there, so I need to show the result, even if there is no Change. Can you help me?

Rafay Over a year ago

@DiegoP. you mean that the first result is visible always or until the value is changed?

DiegoP. Over a year ago

Yes. We already have as soon as the page load a value for idGenre. So I would like to show the first results, even if there is no onChange. Right now it does not show the result until idGenre get changed. Please let me know

Michael Berkowski · Accepted Answer · 2011-07-20 13:30:06Z

0

Add an HTML dataType and a success method to your AJAX call:

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

edited Jul 20, 2011 at 13:30

answered Jul 20, 2011 at 12:44

Michael Berkowski

271k47 gold badges451 silver badges395 bronze badges

5 Comments

DiegoP. Over a year ago

Thanks it works. But it should happen everytime the value idGenre change. Instead it happens now only on the first page load. But if I change the value of idGenre it remains the same. How do I do that will change everytime the idGenre value changes?

Michael Berkowski Over a year ago

@DiegoP. See changes above - the whole ajax call is now wrapped in a function, and that function is bound to the onchange method of #txtGenre

DiegoP. Over a year ago

This function writes and writes the returned HTML results. IT is not updating the previous result. It appends unlimited results one just after the previous one. How do I fix this?

Rafay Over a year ago

you need to replace the div contents you can use .html(data to be replace)

Michael Berkowski Over a year ago

@DiegoP. Sorry - changed the .after() method to .html() to replace contents.

Collectives™ on Stack Overflow

jQuery write element just after the Ajax call

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related