user3103915 user3103915 - 5 months ago 29
HTML Question

Refresh a DIV on ajax success

I have a page with has a heading say :

<div class="something"><? some php code ?></div>


In that page I also have an ajax doing a job like:

<script>
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loader").show();
}).ajaxStop(function () {
$("#loader").hide();
});
});

$('#link').on('click', function(e) {
e.preventDefault;
var href = this.getAttribute('href');
$.ajax({
url: href,
success: function(text) {
alert("Added Succesfully");
}
});
return false;
});
</script>


Now in the success in ajax i also want to refresh the div i mentioned. Only refresh as it is attached to PHP which will fetch data from an external API. Is this possible ?

Answer

link

 $.ajax({
    dataType: "json",
    url: "http://www.omdbapi.com/?i=tt0111161",
    success: function (data) {
        console.log(data);
        $("#movie-data").append(JSON.stringify(data));

With the append function you can insert the data from the ajax call into a div. explanation and example

The append() method inserts specified content at the end of the selected elements.

Tip: To insert content at the beginning of the selected elements, use the prepend() method.

Or maybe this answer can fix your issue

or you can take a look at the jquery load function

Load data from the server and place the returned HTML into the matched element. This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.

Comments