I am building simple django app where I want to do some parsing when user click button on the frontend.
I have template variable {{ parsing }} which I am using inside index.html to disable button for parsing when user click on it
<div class="btn-group mr-2" role="group" aria-label="Parsing group">
<button class="btn btn-dark btn-lg" id="parseButton" {% if parsing %} disabled {% endif %}>
<i class="fa fa-terminal gradient-text"></i>
<span class="gradient-text">| Parse</span>
</button>
</div>
Next what I do is JQuery method which sends ajax request to my backend to initialize variables for parsing and method from views.py returns redirect to the same page (index.html).
$('#parseButton').click(function () {
$.ajax({
type: 'POST',
url: 'initialize_parsing/',
headers: {"X-CSRFToken": $.cookie("csrftoken")},
data: {}
});
Then my views.py:
def initialize_before_parsing(request):
if request.method == 'POST':
frontendTracker = FrontendTracker()
frontendTracker.progress = 0
frontendTracker.parsing = True
return redirect("index")
class IndexView(TemplateView):
template_name = 'index.html'
def get_context_data(self, **kwargs):
frontendTracker = FrontendTracker()
context = super(IndexView, self).get_context_data(**kwargs)
context["showAnnotation"] = frontendTracker.showAnnotationButton
context["parsing"] = frontendTracker.parsing
context["progress"] = frontendTracker.progress
return context
and urls.py
urlpatterns = [
path('', IndexView.as_view(), name="index"),
path("initialize_parsing/", initialize_before_parsing, name="initialize_before_parsing"),
]
Finally what is bother me is that when I send that ajax request and everything works fine when my page being redirected {{progres}} template variable isn't changed or any other until I do refresh. Doing refresh with js when ajax is success isn't something which I want to do because I have some other methods inside js which I want to execute after that ajax request and that will reset my js code. How can achieve to change value of parsing variable without refresh?
You have state in 2 places: in the browser and on the server.
When you load a page from the server then it parses the state on the server and fills in the template accordingly. When you make the AJAX call you pass state to the server, but don't do anything to the state of the page in the browser. On a subsequent reload you see the reflected change in the browser because you passed that state through the template again.
I don't know too much about FrontendTracker or your specific problem, so I don't know what the best solution is. One solution is add a .done(function( data ) { /* your code */ }) handler to the $.ajax call and then manipulate the content of the page to reflect how you want the page to change. However, it seems like you have some sort of progress value, so you likely need to make subsequent AJAX calls to get updates from the server for updated values of that.