I am updating the contents of the div but how can I keep them there until the fresh data are loaded?

my jQuery below reloads the reloadhomeposts.php file. My question is how can I keep the reloaded data and not be disappeared until the fresh loaded content will be shown?

<script language="JavaScript">
$(function () {
    function loadReservationDetails() {
        $('#reservationdetails')
            .empty()
            .addClass('loading')
            .load('wp-content/themes/theme/reloadhomeposts.php', function () {
                $(this).removeClass('loading');
                setTimeout(loadReservationDetails, 20000);
        });
    }

    loadReservationDetails();
});
&l开发者_如何转开发t;/script>

just don't call the .empty() method like so:

<script language="JavaScript">
$(function () {
    function loadReservationDetails() {
        $('#reservationdetails')
            .addClass('loading')
            .load('wp-content/themes/theme/reloadhomeposts.php', function () {
                $(this).removeClass('loading');
                setTimeout(loadReservationDetails, 20000);
        });
    }

    loadReservationDetails();
});
</script>

It's the call to empty that is removing the current content before the request is sent. Just remve that call, and the current content remains until it's replaced by the new data in the response:

<script type="text/javascript">

$(function () {
  function loadReservationDetails() {
    $('#reservationdetails')
      .addClass('loading')
      .load('wp-content/themes/theme/reloadhomeposts.php', function () {
        $(this).removeClass('loading');
        window.setTimeout(loadReservationDetails, 20000);
    });
  }

  loadReservationDetails();
});

</script>

Load data to another div, and then swap it with your first div.

No need to call .empty() as old data will automatically be replaced with the new one. Like:

$(function () {
    function loadReservationDetails() {
        $('#reservationdetails')
            .addClass('loading')
            .load('wp-content/themes/theme/reloadhomeposts.php', function () {
                $(this).removeClass('loading');
                setTimeout(loadReservationDetails, 20000);
        });
    }

    loadReservationDetails();
});