Django: can't retrieve variable from my view after AJAX call

user_12711993 0
Viewed 156

After an AJAX Post request, I'm trying to retrieve from my view some list values contained in a variable. The idea is to use these values to populate a dropdown. But my variable seems empty. I thought that it was because I initially used a 'return render()', but even with a 'return HttpResponse()' it doesn't work.

This is my views.py:

def MyView3(request):

    if request.method == 'POST' and request.is_ajax:

        myVariable = ["1", "2", "3", "4", "5"]
        print(myVariable)

        return HttpResponse(myVariable)
    else:
        return render(request,'home3.html')

This is my html code:

<form class="wrapper" action="" method="post"> {% csrf_token %} 

  <select name="myVal" class="toChange">
    <option val="1">1</option>  
    <option val="2">2</option>   
  </select>

  <select id="dep" name="dep">
    {% for item in myVariable %}
      <option val="{{ item }}"> {{ item }} </option>    
      {% endfor %}
  </select>


  <script type="text/javascript">
    function dropdownChange () {
      var selectedValue = $(".toChange option:selected").val();
      $.ajax({
              type: 'POST',
              data: {'myVal': selectedValue},
              }); 
      var mylist = '{{myVariable}}';
      alert(mylist);
    }
    $(".toChange").change(dropdownChange);
  </script>

</form>

The idea here is to triger the AJAX call when I select a new value in my 'myVal' dropdown. The call works since the view is correctly activated, as 'print(myVariable)' shows the expected result in the console. Moreover, my alert pop-up is displayed. Yet, it is empty. I would need it to show the values contained in 'myVariable', so '["1", "2", "3", "4", "5"]'. I assume it should be something simple, but I couldn't figure out what. Could you please help?

django ajax javascript
1 Answers

You are missing the URL and the success callback in the Ajax call. You could get the response in the success Callback.

You are getting null in alert because the $.ajax is an async function and alert will appear before the ajax call can complete.

Try the below example.

Example: 

 <script type="text/javascript">
    function dropdownChange () {
      var selectedValue = $(".toChange option:selected").val();
      $.ajax({
              url: "<add the url>"
              type: 'POST',
              data: {'myVal': selectedValue},
              success: function(res) {
                alert(res);
              }
        });       
    }
    $(".toChange").change(dropdownChange);
  </script>
user_41489020
Related