0

I'm new to using Ajax calls with Django. Im trying to implement a simple Display or not display depending on the type of get called by Ajax:

Views:

def dynamic(request):
    context = {}
    if request.method == 'GET':
        if 'backtest_type' in request.GET:
           context['display_details'] = False
           print ('Im not displaying')

        elif 'change_val' in request.GET:
            context['display_details'] = True
            print ('Im displaying')

        else:
            context['display_details'] = False

    return render(request, "demo/dynamic.html", context)

In my template:

{% extends 'demo/base.html' %}
{% block body %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'css/dynamic.css' %}">


<script>
  $(document).on('click','#id_backtest_type', function () {
    console.log( $(this).val() );
    $.ajax({
        type: 'get',
        data: {'backtest_type': 1},
        success: function (data) {
          console.log('data  sent ' + data);
      },
        failure: function(data) {
          alert('Got an error dude');
        }
      });
  });
  $(document).on('click','#btnClick', function () {
    // console.log( $(this).val() );
    $.ajax({
        type: 'get',
        data: {'change_val': 1},
        success: function (data) {
          console.log('data  sent ' + data);
        failure: function(data) {
          alert('Got an error dude');
        }
      });
    });
</script>

<div>
  {% if display_details %}
  <h1>I'm diplaying</h1>
  {% endif %}
</div>

<div id="btnClick" class="col-sm-4">
    <div class="btn-group btn-group-justified" role="group">
      <div class="btn-group" role="group">
        <button class="btn btn-secondary" type="button">Don't Display</button>
      </div>
    </div>
  </div>

<div id="id_backtest_type" class="col-sm-4">
    <div class="btn-group btn-group-justified" role="group">
      <div class="btn-group" role="group">
        <button class="btn btn-secondary" type="button">Display!</button>
      </div>
    </div>
  </div>

{% endblock %}

From the console I'm sure that the get requests are being correctly sent using ajax (the get requests are being sent and the console prints the statements:

[09/Feb/2019 20:00:56] "GET /dynamic/?backtest_type=1 HTTP/1.1" 200 6530

Im displaying

However, even if the ajax call works correctly, the template doesn't end up rendering <h1>I'm diplaying</h1>. Am I misunderstanding anything about Ajax?

Thanks in advance!

Alvaro
  • 1,430
  • 2
  • 23
  • 41
  • You should include your `demo/dynamic.html` template. – coler-j Feb 09 '19 at 20:13
  • Possible duplicate of [How do I integrate Ajax with Django applications?](https://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications) – coler-j Feb 09 '19 at 20:14
  • I deleted the url from the ajax since it defaults to the original. I had read the post, however in this particular case, I'm using django conditions `{% if %}` to display a certain html, not variables. – Alvaro Feb 09 '19 at 20:37
  • To my understanding templates are rendered on server side so all the logic that is from Django will already be completed. There will be no `{% %}` in the DOM. Since you're using JQuery I'd recommend using `$('#id_of_h1').show()` and `$('#id_of_h1').hide()` depending on what `data.display_details` return. – Stephen Feb 10 '19 at 00:32

0 Answers0