CODEWITHSUNDEEP
javascriptjqueryajax
DataScientYst
DataScientYst

Reputation: 442

AJAX post and page refresh

I'have and AJAX post request:

$(document).ready(function() {
  $("span").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    var URL = "someURL";
    $.post(URL, this.id, function(data, status) {
      var val = parseInt(document.getElementById(this.data).innerHTML)
      document.getElementById(id).innerHTML = val + 1 ;
      document.getElementById(id).disabled=true;
    });
  });
});

<a href="/book/test/1">Read</a>
<span id="${book.id}">

This script is working as expected; a button with number in it increase by one. The problems are:

In short I need a count button which increase by 1 and can be changed once per user.

Update It seems that reload it's related to another function defined as

$(document).ready(function() {

So i have one in the body and one in the head.

Upvotes: 0

Views: 669

Answers (1)

cmprogram
cmprogram

Reputation: 1884

Of course it refreshes the page, you're sending it a link to go to via href. Instead, remove the href, and put an onclick event and handler. Replace your anchor tag, with this:

<a onclick="runFunction()">Read</a>

And replace your script, with this.

<script>
function runFunction(){
$(document).ready(function(){
   $("span").click(function(e){
       e.preventDefault();
       e.stopPropagation();
       var URL="someURL";
       $.post(URL,
        this.id,
       function(data,status){
           var val = parseInt(document.getElementById(this.data).innerHTML)
           document.getElementById(id).innerHTML = val + 1 ;
           document.getElementById(id).disabled=true;
       });
   });
 });
}
</script>

Upvotes: 1

Related Questions