How to Refresh Specific Div Using Javascript/Jquery With the Variables on It

How to refresh specific div using Javascript/Jquery with the variables on it

You can execute an ajax call:

function ajaxCall() {
    $.ajax({
        method: 'POST',
        url: 'path/to/asyncHalndler.php',
        data: { ... },
        success: function (data) {
            if (data) {
                $('#salary').html(data);
            }
        }
    });
}

// Execute ajax call every 5 seconds
setInterval(function() {
    ajaxCall();
},5000);

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);

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

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

Refresh Part of Page (div)

Use Ajax for this.

Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.

Relevant function:

http://api.jquery.com/load/

e.g.

$('#thisdiv').load(document.URL +  ' #thisdiv');

Note, load automatically replaces content. Be sure to include a space before the id selector.

Auto Refresh Div Content Using jQuery and AJAX passing variables

Following code passing the values to php page successfully

<script type="text/javascript">
    $(document).ready(function(){
        $("#they").change(function () {
        var firstVal = $("#employee_user").val();
        var secVal = $("#they").val();

        $.ajax({
                type: "POST",
                data: "year="+ firstVal +"&username="+ secVal,
                url: "getholidaylog.php",
                success: function(msg){
                $("#updatingdiv").html(msg);

                }
            });
        });
    }); 
</script>

but instead of loading the getholidaylog.php into div load the content of respective page into the div

how do I refresh specific div with countdown

You call countDown() function only init time that's the issue. on button click call again countDown() function !

Try this code it's help you

var count = 3;     // Set count
var timer = null; // For referencing the timer

function countDown() {
  // Display counter and start counting down
  console.log(document.getElementById("count"), 'count');
  document.getElementById("count").textContent = count;

  // Run the function again every second if the count is not zero
  if (count !== 0) {
    timer = setTimeout(countDown, 1000);
    count--; // decrease the timer
  } else {
    // Enable the button
    document.getElementById("btnCounter").removeAttribute("disabled");
  }
}

countDown();

function refreshDiv() {
  $('#container2').load(location.href + " #container2");
  document.getElementById("btnCounter").setAttribute("disabled", true);
  count = 3;

  setTimeout(() => { 
    countDown();
  }, 10); // set page reload time  in timeout
}

AJAX jQuery refresh div every 5 seconds

Try this out.

function loadlink(){
    $('#links').load('test.php',function () {
         $(this).unwrap();
    });
}

loadlink(); // This will run on page load
setInterval(function(){
    loadlink() // this will run after every 5 seconds
}, 5000);

Hope this helps.

---

Related Topics