'Pass option value from select to view

I am trying to create an interactive scatterplot with options from an selectbox as a filter in Django. The problem is that the value from the select box is not passed to the view.

views.py

def dashboard(request):
    cool_data = manage_pandas(df_raw)
    posnr=cool_data['something'].unique()
    pos = request.GET.get('posi')
    
    dff = cool_data.loc[cool_data['posnr'] == pos]
    dff = dff.astype({'vnum': str})
    fig = px.scatter_matrix(dff,
    dimensions=["a", "b", "c", "d",'e'], color="g")
    fig.update_traces(diagonal_visible=False)
    sm = plot(fig, output_type="div")
    context = {
        'posnr' : posnr,
        'plot_div':sm
       
    }
    return render(request, "scatterplot/scatterplot.html", context)

scatterplot.html

<div class = "container" id = "second" style="display:true">
   
        
        <br><br>
        <select class="position">
            
            {% for pos in posnr %}
            <option value="{{ pos }}">{{ pos }}</option>
            {% endfor %}
        </select>
        
{% autoescape off %}
        {{ plot_div }}
        {% endautoescape %}        
        
<script>
$("select.position").change(function(){
    var posi = $(this).children("option:selected").val();
    var postUrl = "http://127.0.0.1:8000/scatterplot/dashboard"
        $.ajax({
            url:postUrl,
            type:'GET',
            data: {"posi":posi},
            success:function(response){console.log(response)}
            
        })
            });
            
   


</script>        
EDIT: I have added the ajax call but still something is not right , can't get the value to the view. I don't want to use form submit because I want the scatterplot to change automatically based on user input.

Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source