Posted inJavaScript / jQuery

how to refresh a div using javascript without refreshing page?

how to refresh a div using javascript without refreshing page using (‘#selectPlayer’).click(function() { location.reload(); }); Auto Refresh Div periodically without refreshing the whole page.

how to refresh a div using javascript without refreshing page?

Refresh a HTML div without page load AJAX ,how to refresh page without losing form data javascript?. I’ll show you how to refresh the contents of a div element without reloading the entire page using jQuery.

refresh div using jquery without reloading page

$('#selectPlayer').click(function() {
    location.reload();
});

refresh a div jquery

$(document).ready(function(){
        $(function(){
        $('#submit_team').submit(function(e){
                e.preventDefault();
                var form = $(this);
                var sendRequestUrl = form.attr('action');
                var post_data = form.serialize();
                $('#loader3', form).html('how to refresh a div using javascript without refreshing page,how to refresh a div using javascript,refresh a div jquery,refresh a div,refresh a div without reloading page       Please wait...');
                $.ajax({
                    type: 'POST',
                    url: sendRequestUrl, 
                    data: post_data,
                    success: function(msg) {
                        $(form).fadeOut(800, function(){
                            form.html(msg).fadeIn().delay(2000);

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

jquery refresh page without reload

In general, if you don't know how something works, look for an example which you can learn from.

For this simple problem, consider this Example

You can see loading content with AJAX is very easily accomplished with jQuery:

$(function(){

    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "loading...";


    var sendRequestUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
    $("#loadRuns").click(function(){
        $("#output").html(ajax_load).load(sendRequestUrl);
    });

// end  
});
Try to understand how this works and then try replicating it. Good luck.

You can find the corresponding tutorial HERE

Update

Right now the following event starts the ajax load function:

$("#loadRuns").click(function(){
        $("#output").html(ajax_load).load(sendRequestUrl);
    });

(function worker() {
  $.ajax({
    url: 'ajax/pakainfo_v1.html', 
    success: function(data) {
      $('.output').html(data);
    },
    complete: function() {
      setTimeout(worker, 5000);
    }
  });
})();

I made a simple Example of this implementation for you HERE. In this Example, every 2 seconds (setTimeout(worker, 2000);) the content is updated.

You can also just load the data immediately:

$("#output").html(ajax_load).load(loadUrl);
Which has THIS corresponding Example.

Don’t Miss : ajax page load without refresh example

I hope you get an idea about how to refresh a div using javascript without refreshing page.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this Article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype