Update single <td> value in the table row using ajax in django

Question

I am trying to Block/Unblock the user without refreshing the page. If the status=1, it will show Block option, and if the status=0 it will show Unblock option

After calling the function, the status will change either 0 or 1 in views.py The function is working fine but it is showing after refreshing the page

How to display that value without refreshing the page

<table id='usersTable' class="table table-bordered">
<thead>
    <tr>
        <th>S.No.</th>
        <th>Name</th>
        <th>Email</th>
        <th>Block/Unblock</th>
    </tr>
</thead>
<tbody>
    {% for userid, name, email, status in comb_lis %}
    <tr id='usr-{{name}}'>
        <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}">
        <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}">
        <td>{{forloop.counter}}</td>
        <td>{{name}}</td>
        <td>{{email}}</td>
        <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value)">
            {% if status == "1" %}
                Block
            {% else %}
                Unblock
            {% endif %}
        </a></td>
    </tr>
    {% endfor %}
</tbody>

and this is the ajax function

function restrictUser(userid, name) {
$.ajax({
    url: '/restrict-user-ajax/'+userid,
    dataType: 'json',
    success: function (data) {
        if (data.status) {
            alert("User Blocked!");
        }
    }
});

}

Any help is appreciated

Answer 1

In your restrictUser function you can pass this as well which will refer to the current element which is clicked and use .text() to get the current text inside a tag .Then , under success function of ajax check if data.status is true depending on this change the text of particular a tag either block or unblock .

Demo Code :

 var data = { "status": true } //demo json function restrictUser(userid, name, el) { var els = $.trim($(el).text()); //trim any whitespace console.log(els) /*$.ajax({ url: '/restrict-user-ajax/' + userid, dataType: 'json', success: function(data) {*/ //check if status is true if (data.status) { //check previous text was block/unblock if (els == "Block") { //change text $(el).text("Unblock") } else { $(el).text("Block") } } /*} });*/ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id='usersTable' class="table table-bordered"> <thead> <tr> <th>S.No.</th> <th>Name</th> <th>Email</th> <th>Block/Unblock</th> </tr> </thead> <tbody> <tr id='usr-{{name}}'> <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}"> <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}"> <td>1</td> <td>Something</td> <td>s@gmail.com</td> <!--add this to function as paremter--> <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value,this)">Unblock</a></td> </tr> <tr id='usr-{{name}}'> <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}"> <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}"> <td>2</td> <td>something2</td> <td>y@gmailc.com</td> <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value ,this)"> Block </a></td> </tr> <tr id='usr-{{name}}'> <input type="hidden" id="{{userid}}" name="{{userid}}" value="{{userid}}"> <input type="hidden" id="{{name}}" name="{{name}}" value="{{name}}"> <td>3</td> <td>sss</td> <td>g@gmail.cm</td> <td> <a href="#" onclick="restrictUser(document.getElementById('{{userid}}').value, document.getElementById('{{name}}').value,this)">Unblock </a></td> </tr> </tbody> </table>