Refresh a DIV on ajax success

Question

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 ?

`$('.something').html('Your text or code here');` <- inside success callback — Arsh Singh, Jun 24 '16 at 07:22
I don't think we can refresh the div, instead we can keep the content in another php file and set the new values — Premanand K, Jun 24 '16 at 07:22
What do you mean by "refresh the div"? If you want to append result from ajax call you can use `$('.something').append(data-from-ajax)` — Anupam, Jun 24 '16 at 07:26

score 2 · Answer 1 · edited Jun 24 '16 at 07:42

2

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.

edited Jun 24 '16 at 07:42

Manish Jesani

1,339
5
20
36

answered Jun 24 '16 at 07:27

Alessandro

4,382
8
36
70

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

I didn't use the code but I got your point. It worked perfectly, thanks a lot :) — Aditya Singh, Jun 24 '16 at 07:43

Refresh a DIV on ajax success

2 Answers2