Refresh/Reload the Content in Div Using Jquery/Ajax

Refresh/reload the content in Div using jquery/ajax

I always use this, works perfect.

$(document).ready(function(){
        $(function(){
        $('#ideal_form').submit(function(e){
                e.preventDefault();
                var form = $(this);
                var post_url = form.attr('action');
                var post_data = form.serialize();
                $('#loader3', form).html('<img src="../../images/ajax-loader.gif" />       Please wait...');
                $.ajax({
                    type: 'POST',
                    url: post_url, 
                    data: post_data,
                    success: function(msg) {
                        $(form).fadeOut(800, function(){
                            form.html(msg).fadeIn().delay(2000);

                        });
                    }
                });
            });
        });
         });

reload div after ajax request

You can load the div like this.Please mind the space before divid (" #divid");

if (data.success){
   $("#divid").load(" #divid");
    }

How do I refresh a DIV content?

To reload a section of the page, you could use jquerys load with the current url and specify the fragment you need, which would be the same element that load is called on, in this case #here:

function updateDiv()
{ 
    $( "#here" ).load(window.location.href + " #here" );
}

• Don't disregard the space within the load element selector: + " #here"

This function can be called within an interval, or attached to a click event

Reload the content of a Div using jquery/ajax

You're trying to load the content into .hidemenubook4 which is the <a> link!

Not sure what you mean to do with something called "hidemenubook", but to load the content, use:

$("#book4").load(location.href + " #book4");

if you mean to do this on the anchor click, then:

$(".hidemenubook4").click(function() {
    $("#book4").load(location.href + " #book4");
});

---

Update:

For a reusable version, you can make some changes.

• First, give each link the same class (or put them under the same parent)
• Second, give them a data- to link them (which you already have)
• Third, use the class to assign the handler and the data to find the matching div

eg:

<a class="hidemenubook" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);"><span class="namebook1origin">Book1</span></a>
<a class="hidemenubook" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);"><span class="namebook2origin">Book2</span></a><br/>   

then:

$(".hidemenubook").click(function() {
    var book = "#" + $(this).data("fancybox-group");
    $(book).load(location.href + " " + book);
});

How to refresh table contents in div using jquery/ajax

You can load HTML page partial, in your case is everything inside div#mytable.

setTimeout(function(){
   $( "#mytable" ).load( "your-current-page.html #mytable" );
}, 2000); //refresh every 2 seconds

more information read this http://api.jquery.com/load/

Update Code (if you don't want it auto-refresh)

<button id="refresh-btn">Refresh Table</button>

<script>
$(document).ready(function() {

   function RefreshTable() {
       $( "#mytable" ).load( "your-current-page.html #mytable" );
   }

   $("#refresh-btn").on("click", RefreshTable);

   // OR CAN THIS WAY
   //
   // $("#refresh-btn").on("click", function() {
   //    $( "#mytable" ).load( "your-current-page.html #mytable" );
   // });


});
</script>

How can I refresh the contents of a DIV using JQuery?

Your .load() method isn't correctly used. You have to give a parameter which specifies, which data has to be loaded. In your case you would like to re-load a special container of your page, so you have to do it like this:

$( "#containerFriendsRequestSent" ).load("YOUR-SITE.html #containerFriendsRequestSent" );

Have a look at the jquery api: http://api.jquery.com/load/

Refresh a DIV on ajax success

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.

---

Related Topics