Html - Change\Update Page Contents Without Refreshing\Reloading the Page

Update data on a page without refreshing

This is typically achieved with a technique called AJAX. This technique loads data asynchronously (in the background) so it can update your content without needing to reload the page.

The easiest way to implement AJAX is with the jQuery load() method. This method provides a simple way to load data asynchronous from a web server and place the returned HTML into the selected element. The basic syntax of this method is: $(selector).load(url, data, complete); where the arguments are:

• selector the existing HTML element you want to load the data into
• url a string containing the URL to which the request is sent
• data (optional) a plain object or string that is sent to the server with the request
• complete (optional) a callback function that is executed when the request completes

The required URL parameter specifies the URL of the file you want to load.
The optional data parameter allows you to specify data (i.e. key/value pairs) that is sent to the web server along with the request. The optional complete parameter can be used to reference a callback function. The callback is fired once for each selected element.

A visualisation:

A simple example of using load(), where we load data dynamically when a button is pressed:

DEMO

// no need to specify document ready
$(function(){
    
    // optional: don't cache ajax to force the content to be fresh
    $.ajaxSetup ({
        cache: false
    });

    // specify loading spinner
    var spinner = "<img src='http://i.imgur.com/pKopwXp.gif' alt='loading...' />";
    
    // specify the server/url you want to load data from
    var url = "http://fiddle.jshell.net/dvb0wpLs/show/";
    
    // on click, load the data dynamically into the #result div
    $("#loadbasic").click(function(){
        $("#result").html(spinner).load(url);
    });

});

If you don't want to use the jQuery library, you can also use plain Javascript. Loading content is slightly more difficult that way. Here is an example of how to do it with javascript only.

To learn more about AJAX, you can take a look at https://www.w3schools.com/xml/ajax_intro.asp

automatically updates the table without refreshing/reloading the page

You just have to add it to the page, simple as that actually. Something like this (since you are using jquery) should get you started:

I am going to have to make assumptions about the way your page is laid out. Going to assume it is a table with the class "mytable".

Inside your success: function(data){ part :

$('.mytable').append(`
    <tr>
        <td>${studentNumberId}</td>
        <td>${studentFullName}</td>
        <td>${studentEmail}</td>
        <td>${studentYearBlock}</td>
    </tr>
`);

This should get you started on understanding the concept.

How do I refresh a div with AJAX without refreshing the whole page?

You can create another resource for the content of the <div> to refresh (that can be another php script if using PHP, or the same script as the whole page but with some params...). Then:

function refresh () {
  $.ajax({
    url: '/div/to/refresh.php',
    success: function(data) {
      $('.torefreshdiv').html(data);
    }
  });
}

Update and Display value without refreshing the page

You can pass some value from php to ajax call and depending on that the required button will get displayed .So your php code will look like below :

..
if($srow['status']=='A')
{
$sql = "UPDATE contacts SET status='D' WHERE con_id=".$id;
echo "D";//will get passed as response to ajax
}
else
if($srow['status']=='D')
{
$sql = "UPDATE contacts SET status='A' WHERE con_id=".$id;  
echo "A";//will get passed to ajax as response
}

Your ajax success function will look like below :

  ..
   success: function(data) {
  var d = $.trim(data); //triming value if there is any whitespaces
  if (d == "A") {
    //means data is activate so show that button
    $("#"+del_id+ ".btn-success").show();
    //hiding other 
    $("#"+del_id +".btn-danger").hide();
  } else {
    //show deactivate buttton
    $("#"+del_id +".btn-danger").show();
    //hide other button
    $("#"+del_id +".btn-success").hide();
  }

}

Update 1:

As you have use if-else to show button so i forgot here that other button will not exist in this case thats the reason jquery is not able to find other button and display blank.Now, to solve this you need to make some changes in your php code where you are displaying your table.Changes you need to make are as follows :

Change this :

<?php if($ConRow['status']=='A') { ?>
<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> </td>
<?php } else if($ConRow['status']=='D') { ?> 
<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> </td> 
<?php } ?>  

to below :

<td> <div class="<?php echo $ConRow['con_id']; ?>"> <?php if($ConRow['status']=='A') { ?>
<button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> 
<?php } else if($ConRow['status']=='D') { ?> 
<button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> 
<?php } ?> </div> </td>  

Now ,in ajax success function we will use .html to add button inside <div></div> .So ajax will look like below :

if (d == "A") {
 $("." + del_id).html('<button id="' + del_id + '" class="delbutton btn btn-danger btn-sm">De-Activate</button>');
} else {
  $("." + del_id).html('  <button id="' + del_id + '" class="delbutton btn btn-success btn-sm">Activate</button> ');
}

Refresh data without reloading the page

Assuming those DIVs hold the number of hearts, if the response of the target page is the new number of hearts then:

 success: function(data) {
    targetElement.find(".comments-sub-header__item-icon-count").html(data)
 }

elsewhere if you want to add +1 to current number regardless of server response:

 success: function() {
    var current= parseInt(targetElement.find(".comments-sub-header__item-icon-count").html());
    targetElement.find(".comments-sub-header__item-icon-count").html(current+1)
 }

Footnote: as the ajax request is nested inside the click function, the targetElement in my codes is the clicked element. You may get it in defferent ways e.g.

$('.like-button').on('click', function(event) {
     var targetElement=$(this);
     ....
}

Change Content or Include File Without Refreshing Page

You have two main options. One is like you describe, to include all of the content in a single page and show it as needed. This is a viable solution which is used quite often. The advantage is that once the page loads it is very responsive, as it does not need to get data from the server when you click a link. The disadvantage is that the initial page load will be much bigger. It would generally work well for sites where the individual sections were quite small.

The second option is to use ajax to get your content from the server without a page reload. Ajax can be used to get data or html from your server. If you have a php file which gives the output you want in html, you can use the .load convenience method:

$( "#icerikDiv" ).load( "menu1.php" );

This will get the data from menu1.php and put it in to #icerikDiv.

To avoid hardcoding the php file, we can use a data attribute so that the source is declared on each link -
HTML:

<a id="bir" href="#icerikBaslik" data-content="menu-1.php">1</a>

Javascript:

$(document).ready(function() {
    $('#content a').click(function () {
        $( "#icerikDiv" ).load( $(this).data('content') );
        $('#icerikDiv').show();
        scrollToElement($(this).attr('href'));
    });
});

It might make more sense to put the div target on the data attribute and use href for the source php - but it will work either way.

---

Related Topics