Reload part of HTML without refreshing page?

Question

When clicking on an button icon:

<a onclick="updateFav({{v.video_id}}, {{v.favorite}});" ><span  class="myicons {% if v.favorite == 1 %} heart_active{% else %} heart {% endif %} "></span></a>

I'm using this to change data in my sql database

function updateFav(video_id, favorite) {

  $.ajax({
       type: "POST",
       url: '{{baseurl}}/fav.php',
       data:{id:video_id, fav:favorite},           
  });
}

Depending on database data (0 or 1) heart icon will be gray or red. Clicking on icon works and after refreshing page the changes are visible.

How can I refresh a certain html element? A div for example.

Basically: Have the same effect as the 'star' favorite button on this page (stackoverflow).

Answer 1

To reload a part of a page without refreshing the whole page simply use an ajax request to fetch new data and add it to the div or any element you want see the code below for an example:

  $.ajax({
       type: "GET",
       url: 'getnewData.php',
       success:function(response){
           $('#myElement').html(response);
       },
  });

What we did here is we issued an ajax request in which we requested data from getnewData.php and placed the data (which came to us in the response variable) and then we placed the data in the div with an id = myElement

Answer 2

You can go all the way and use a reactive framework or just create a function to update the current element after updateing the database.

When selecting with jQuery $('') or with plain js document.querySelector(), you get a living reference to the DOM element. So you can add/toggle/remove an "active class" to it to styled it as filled with css.

Tricky part here is that you have to keep consistency between the view and the model with your own code. Reactive frameworks or two-way data binding do it for you.