Q: Update date on click without refreshing the page I wrote this code:
<script type="text/javascript">
$('#updateAssignment').on('click', function(event){
  event.preventDefault();
  var currentdate = new Date();
  var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
  $('#updateAssignment').text(datetime);
});
</script>

With this html:
<p class="card-text" id="updateAssignment">Last update: <?php echo date('d-m-Y H:i:s')?> <a href="?update=true"><i class="fa fa-refresh"></i></a></p>

What I want is the following: 
I want the date to update when I click on the refresh button without the complete page to refresh. Somehow it doesn't work with this code, I don't have any error's in the console. 
Could anyone help me out?

A: Replace
href="?update=true"

With
href="#"

The previous line makes your browser initiate a GET request, which you don't want.

A: 
  
*
  
*You can achieve your need at multi ways, below added the one way with your code.
  
*you added event.preventDefault(); so click event prevented.
  
*or you can remove href link as per BeetleJuice suggest.
  

Html
<p class="card-text" id="updateAssignment">
    <span>Last update: <?php echo date('d-m-Y H:i:s')?></span>
    <a href="?update=true"><i class="fa fa-refresh"></i>Sync Date</a>
    </p>

Scripts
$('#updateAssignment a').on('click', function(event){
            event.preventDefault();
            var currentdate = new Date();
            var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
            $('#updateAssignment span').text(datetime);
        });

DEMO

A: This works :


$('#updateAssignment').click(function(){
  var currentdate = new Date();
  var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
  $('#updateAssignment').text(datetime);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="card-text" id="updateAssignment">Last update: PHP_HERE <a href="?update=true"><i class="fa fa-refresh"></i></a></p>



A: Replace  
href="?update=true"

to
href="#null"

and 
$(function() {
    $('#updateAssignment').on('click', function(event){
      event.preventDefault();
      var currentdate = new Date();
      var datetime = "Last Sync: " + currentdate.getDate() + "/"
                + (currentdate.getMonth())  + "/"
                + currentdate.getFullYear() + " @ "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();
      $('#updateAssignment').text(datetime);
    });
});

Wrap it by $(function() {
