Django call function from button, while staying on the same page
<p>I have a dynamically created table with data from a django model. This table is displaying additional information about each data_element. </p>

<p>In the last column there should either</p>

<ul>
<li>be a button displayed for each row, which will run the script with additional keywords from that specific data_element, without reloading or freezing the page.</li>
<li>If the script is still running (can take hours) there should be progress icon displayed and</li>
<li>if the script has already finished, there should be a button displayed, redirecting to an results.html</li>
</ul>

<p>How can I program that with django?
Currently I am executing a script manually, but for that I am redirecting to another template with the args to parse and when the script is executed (with call_command('my_script', *args) the page freezes until the script ends.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="{% url 'calculate' element_id %}"&gt;
  &lt;input class="btn btn-primary-custom" id="submit" type="submit" value="run script"&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>I tried to insert the code from this post:
<a href="https://stackoverflow.com/questions/13733767/django-button-ajax-click">Django button ajax click</a></p>

<p>But when I click on that button, nothing happens. What do I have to do, to create that table?</p>

<p><strong>EDIT</strong>
the function for my button currently looks like this:</p>

<pre><code>$(document).ready(function(){
    $('.calculate-btn').bind('click', function(){
        function getCookie(name) {
        var cookieValue = null;
        if (document.cookie &amp;&amp; document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i &lt; cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    var btn-data= $(this).attr('btn-data');
    var csrftoken = getCookie('csrftoken');
        $.ajax({
        type: 'POST',
        url : "/run/",
        dataType: "html",
        data : {'csrfmiddlewaretoken': csrftoken, 'btn-data':btn-data},
        success: function(data, status, xhr){
            console.log("SUCCESS")
        },
        error: function(data, status, xhr){
            console.log("ERROR")
        }
        });

        return false;
    });
});
</code></pre>

<p>and my view gets called from a button click:</p>

<pre><code> &lt;input id="{{item.id}}" class='calculate-btn' name="update_log" type="button" value="Run Script" btn-data={{ item.id }}&gt;
</code></pre>

<p>How can I now dynamically change the button, while the script is still running?</p>