How to refresh link without refresh with javascript?

Question

How to refresh link without refresh with javascript?

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

Good evening, is there any function that refresh on anchor link without reloading the page? I am creating a system for liking 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 do not 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

asked by anonymous 15.01.2016 / 03:32

2 answers

How do I get the autoincrement id without being registered? Resolve undifined index [closed]

score 3 · Answer 1

You will have to use jQuery . Use the $. Ajax () function. 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 create a file called file_like_db.php that captures acao and id via $_POST if needed.

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

score 2 · Answer 2

You do not need to reload, just change the url with JQuery you already use.

Modify the button to 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 will be easier, but you should make some changes to adapt.

This may be an idea.