CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Aditya Singh
Aditya Singh

Reputation: 724

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 ?

Upvotes: 1

Views: 13190

Answers (2)

Alessandro
Alessandro

Reputation: 4472

You could put your php code in an external file and reload your div by calling JQuery load method:

$("#something").load("mycode.php");

I hope it helps you.

Upvotes: 2

Angel ofDemons
Angel ofDemons

Reputation: 1267

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.

Upvotes: 1

Related Questions