I have a question about using Ajax in django.

Asked 2 years ago, Updated 2 years ago, 52 views

Hello,

I want to receive the select value using ajax, process the data accordingly, and then show it to the next select value, but I don't know how to process the data processed by ajax when I transfer it to ajax. I'd like to send you the list value, so I'd like to ask for your help.

The code I made is

-----------1st choice----------------
<div class="select">
     <select id="num"  name="num">
           <option value=""> -----------  Not Selected  ----------- </option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
    </select>
</div>
---------------------------------------
<div class="select">
     <select id="num_after"  name="num_after">
           <option value=""> -----------  Not Selected  ----------- </option>
           {% {% for list in num_after %}
           <option value={{list}}>{{list}}</option>
    </select>
</div>

<script> 
        $('#num').change('change',function(){ 
            var num = $('#num').val()
            $.ajax({ 
                url:'ajax/',
                data : {'num':num},
                dataType:'json',
                success:function(data){ 
                        $('#num_after').text(data);
                } 
            }) 
        }) 
</script>

def ajax(requests):
    search_key = requests.GET.get('num',None)
    ...
    #Receive the value and deliver the corresponding list (num_after)
    ...
    context = {'num_after':num_after}
    return JsonResponse(context)

Could you tell me which part is wrong?

django ajax jquery javascript

2022-09-21 10:16

1 Answers

If you assume that the value you want to respond to is a single value, not a list...

// Single data meaning to choose number 2
{
    "selectMe": 2
}

In this case, in the script section that handles the response:

success: function(data){
  var $select = $('#num_after');
  var $option = $select.find('option[value=' + data.selectMe + ']');
  // Method using .filter()
  // // var $option = $select.find('option').filter((idx, ele) => {
  //    //    return ele.value == data.selectMe;
  // });
  $option.prop('selected', true);
} 

You can do it in a very necessary way.


2022-09-21 10:16

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.