Can i pass information between Django and HTML in same request for user?

Question

I am creating certain model's object picker which is activated when user sends a post request via HTML forms. More specifically once user clicks certain submit button and post request is sent to the website, It then returns variable which is then used by javascript to open a status window.

Here is all the code associated with these actions:

HTML

<form id="item_selection1" action="{% url 'Home:AccountPage' %}" method="post">
    {% csrf_token %}
    <input class="sendtrade" name="sendtrade1" type="submit" value="Send Offer">
</form>

Python - views.py (3 dots represent all unassociated code)

...
prepareTrade1 = "false"
...
if request.POST.get('sendtrade1'):
    prepareTrade1 = "true"
    ...
return render(request, 'Home/name.html', {"...": "...", 'prepareTrade1': prepareTrade1})

Javascript in HTML

if ( "{{ prepareTrade1 }}" == "true" ) {
    $(".process_overlay").css("display", "block")
}

Shortly, when user clicks the submit button box appears, What i'm trying to do, Is to display status of object query.

So for example, If i received ObjectDoesNotExist error from test.py which belongs in the same directory as views.py, How could i direct that information to HTML/Javascript user is receiving? If creation of absolute new request is required, Then still, How could i do that? Am i required to use Ajax requests?

So in short, Asynchronously when template name.html is rendered, The script name.py which belongs in the same directory as views.py should be executed, And lets take the example that ObjectDoesNotExist exception will be raised in name.py How could i pass it to template? I think the process is called XHR.

Answer 1

Make a separate function to check for the value prepareTrade1 and this function will be used by your frontend side to show the window. csrf exempt is used just for simplicity of example

@csrf_exempt 
def check_trade(request):
    if request.POST.get('sendtrade1'):
        prepareTrade1 = "true"
        return HttpResponse(json.dumps({"prepareTrade": "true"}))
    else:
        return HttpResponse(json.dumps({"prepareTrade": "false"}))

Now the ajax request using jquery

    $.ajax({
        dataType: 'json',
        type: "POST",
        url: URL,
        data: {"sendtrade1": "somevalue"},
        success: function (response) {
          response = JSON.parse(response)
          // now time for the logic you mentioned
          if ( response.prepareTrade == "true" ) {
               $(".process_overlay").css("display", "block")
          }
        }
    });

Some links that might help you:

https://stackoverflow.com/a/13465764/5250746

Ajax tutorial for post and get

Answer 2

You should use ajax requests to update variables from server.

Here goes you form

<form id="item_selection1" action="{% url 'Home:AccountPage' %}" method="post">
  {% csrf_token %}
  <input class="sendtrade" name="sendtrade1" type="submit" value="Send Offer">
</form>

You should rewrite you view to support ajax requests:

import json
from django.http import HttpResponse

def your_view(request):    
    ...
    prepareTrade1 = "false"
    ...
    if request.POST.get('sendtrade1'):
        prepareTrade1 = "true"
        return HttpResponse(json.dumps({'prepareTrade1': prepareTrade1}))
    else:
        return HttpResponse(json.dumps({'prepareTrade1': 'false'}))

And add following javascript:

$(function() {
  var form = $('#item_selection1');

  $(form).submit(function(event) {

    event.preventDefault();

    var formData = $(form).serialize();

    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData,
      dataType: 'json',
      success: function(response) {
        if (response.prepareTrade1 == "true") {
          $(".process_overlay").css("display", "block");
        }
      }
    })
  });
});