jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<p>
   <h2>All Posts:</h2>
   <div>
     {% for btnid,imag,cnt in tuple %}--these variable is coming from python tuple where 3 col are presnt
     <p>
       <li style="list-style-type: none"><img src="{{media_url}}{{imag}}" style="max-width: 100%"></li>
     </p>
     <div class="imgButton">
       <table>
         <tr>
           <td><input type="button" id={{btnid}} class="button" name="button1" value="like" onclick="saveLike();" />

CSS

.column {
   float: left;
   width: 30%;
   padding: 0 10px;
 }

 .imgButton {
   text-align: left;
   margin-left: 44px;
   ;
 }

 .button {
   background-color: #818181;
   color: black;
   font-size: 16px;
   padding: 5px 20px;
   border-radius: 5px;
   border: 0px;
 }

JavaScript

function saveLike() {
  var token = '{{csrf_token}}';
  alert(btn_id);
  $.ajax({
    type: 'GET',
    url: '/like/',
    headers: {
      "X-CSRFToken": token
    },
    contentType: "application/json",
    data: {
      'btn_id': 'qqwe'
    },
    dataType: 'json',
    success: function(data1) {
      document.getElementById("{{ btnid }}").innerHTML = data1.message + " " + "Likes";
      alert(data1.message);
      alert("getelementbyid is:likehit" + "{{ btnid }}")
    },
    error: function() {
      console.log('fail');
    }
  });
  
  };

  alert("savelike called!!");