CODEWITHSUNDEEP
javascriptjquery
Danny
Danny

Reputation: 185

Reload part of HTML without refreshing page?

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

Upvotes: 2

Views: 5802

Answers (2)

David Lampon
David Lampon

Reputation: 500

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.

Upvotes: 0

Shakti Phartiyal
Shakti Phartiyal

Reputation: 6254

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

Upvotes: 3

Related Questions