如何在提交表单后显示 div 或 html 元素并从 Django 中的视图中检索一些信息

Question

Currently when the user introduces a string in an input field and clicks the submit button, this invokes a view that returns through return render(request, 'index.html', context) a context that it basically contains data that is displayed in a table.

I would like said table to be visible only after submitting the form and not before and that when it is visible it shows the information obtained from the view.

The problem is that if through inline styling I make this table not visible, for example in the following way:

<div class="row" id="searchVariantTable" style="display: none;">
    <!-- SOME TABLE HERE-->
</div>

And then I use the onsubmit event for form or onclick for button, it doesn't work. (It works partially, I can see the tbody but thead is missing, so basically I can't display the retrieved data from the database).

Similarly, if I try something like this:

$('document').ready(function() {
  $('#searchVariantTable').hide();
  $('form').submit(function(e) {
      $('#searchVariantTable').show();
      e.preventDefault();
  });
});

It doesn't work either.

I think the last option, if I'm not mistaken, is AJAX, but I'm not quite sure how to do something like that with Django (it's my first time using Django)

What am I doing wrong? Is there an option that I am missing?

Answer 1

You can try by using if else in django template:

index.html
<form method="post">
<input type="submit">
</form>
{% if allowed == "yes" %}
<!-- your table code -->
{% endif %}


and in views.py
if request.method == "POST":
    return render(request, 'index.html',{'allowed':'yes'})

else:
    return render(request,'index.html',{'allowed':'no'})