How to update link without refresh with javascript?

Asked

Viewed 1,421 times

1

Good evening, is there any refresh function on anchor link without Reload on page? I am creating a system to like articles, but I would like to create a way to change the link "like" to "Unlike. I tried to make a location.href but the page updates what I don’t want.

<script type="text/javascript">
function add_like(id_artigo){

    $.post('php/add_like.php', {artigo_id:id_artigo}, function(dados){
      if(dados == 'sucesso'){

         get_like(id_artigo);

  }else{
        return false;
      }
   });
  }

function un_like(id_artigo, id_user){
   $.post('php/un_like.php', {artigo_id:id_artigo, user_id:id_user}, function(dados){
       if(dados == 'sucesso'){

       get_like(id_artigo);        
}else{

    return false;
}

});

function get_like(id_artigo){

  $.post('php/get_like.php', {artigo_id:id_artigo}, function(valor){

   $('#artigo'+id_artigo+'_like').text(valor);
});

}
</script>

   <?php
**$selLikes verifica se existe o like**

     $selLikes = getPhotoLiked($artigo_id, $user_id);  

       if($selLikes['num']==0){

     echo'<a class="like" onclick="javascript:add_like('.$artigo_id.');this.disabled=true" href="javascript:void(0)">like</a>';

    }elseif($selLikes['num']==1){

      echo'<a class="unlike" onclick="javascript:un_like('.$artigo_id.', '.$user_id.')" href="javascript:void(0)">unlike</a>';

   }

    ?>
php javascript

  • We’re missing a } at the end of function un_like(id_artigo, id_user){, just to remember. See the console (F12) of the page. It would be better to create only one call to like/excuse, checking in the client-side whether or not it exists and removing or not.

  • @Inkeliz is not possible to create a link that makes two functions I’m using onClick that calls different functions

  • The need is only to change the URL?

  • no @Inkeliz change anchor link <to> ex so the user likes the article he has the right to excuse but I want to do this without refresh on the page

  • Well, "change the like link to Unlike", in general you want to enjoy the function to be changed? If I like it now I will forgive? If this is it, there are better ways.

  • the same method that facebook uses like and slide

Show 1 more comment

2 answers

3

You’ll have to use jQuery. Use the function $.ajax(). I’ll give you a basic example

<a href="javascript:void(0);" id="like_a" referencia="3" acao="like">Like</a>

<script>
$(document).ready(function(){

$("a#like_a").on('click', function(){

var acao = $(this).attr('acao');
var id_post = $(this).attr('referencia');

$.ajax({

url: 'arquivo_like_db.php',
type: 'POST',
data: {acao: acao, id: id_post},

success: function(callback){

if(acao == 'like'){
$(this).text('Unlike');
$(this).attr('acao', 'unlike');
}else{
$(this).text('Like');
$(this).attr('acao', 'like);
}

}
});
});
});
</script>

then creates a file called arquivo_like_db.php that captures acao and id via $_POST if you need to.

Study on $.ajax() and jQuery, you will get what you need.

  • In this case he already uses Jquery, because the $.post() is from Jquery.

  • @Alisson Acioli does not exist this tag reference in HTML

  • Any tag can be created. If you want to create Megatron = "Overpower" can create. Then grab the parameter Megatron via Jquery. This also applies to <pudim class="chocolate"></pudim>. ;)

  • @Inkeliz Okay, thanks for the tip

2

You don’t need to re-load, just change the url with the Jquery you already use.

Modify the button for something similar:

For Unlike:

<a class="unlike" idArtigo=''.$artigo_id.'" idUser = "'.$user_id.'">unlike</a>

To like:

<a class="like" idArtigo=''.$artigo_id.'" idUser = "'.$user_id.'">like</a>

This way you have the direct parameter in <a>, with custom parameter containing both information.

$('.unlike').click(function(){ // Quando clicar
un_like( $(this).attr('idArtigo') , $(this).attr('idUser') );  // Pega idArtigo e idUser e insere no un_like
$(this).switchClass('unlike', 'like'); // muda classe/funcao
$(this).text('like'); // muda nome
});

$('.like').click(function(){ //Quando clicar
add_like( $(this).attr('idArtigo') ); // Pega idArtigo e  inseri no add_like
$(this).switchClass('like', 'unlike'); // muda classe/funcao
$(this).text('unlike'); // muda nome
});

I think this way will be easier, however you should make some changes to adapt.

That might be an idea.

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.