How do I send Jquery variable to my views.py using $.post(), and how do i retrieve them without refreshing the page

Question

What I'm trying to do is a step form inside a modal. The contents for my step 1 are treatments or services looped from my database. And when I click one of these (".alert")(I used BS alerts as a button), the treatments id will be stored inside a hidden input in the next step's field set. What I want to happen is to send that id back to my views.py and retrieve it so I could get the information about the treatment's duration.

The function in my js where the magic should happen

    $(".alert").click(function(){

    service_id = $(this).find("input").val();

    current_fs = $(this).parents("fieldset");
    next_fs = $(this).parents("fieldset").next();

    $("#nav li").eq($("fieldset").index(next_fs)).addClass("active");
    $("#nav li").eq($("fieldset").index(current_fs)).removeClass("active");

    current_fs.hide();
    next_fs.show();

    next_fs.find("div").find("input").val(service_id);
    $.post("{% url 'calendarium:data' %}",{id: service_id});

   });

my views.py

@csrf_exempt
def time(request):
    data = request.POST.get('id','')
    treatment = get_object_or_404(Services, pk = data)
    return render(request,'calendarium/calendar_msform.html',
                                                    {'treatment':treatment})

my calendar_msform.html

    <fieldset id="#step-2"  style="display: none">

    <div style="display:block;
    border-style:solid;
    border-color:#aa9977;
    border-radius: 5px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 5px">

        <input type="hidden" value="">

        {% if treatment.duration == 30 %}

        <div  class="alert alert-default" style="padding: 2px">


            10:00 - 10:30 am
            <label style="float: right; margin-right: 10px">
            <small>{{ s.duration }} mins</small></label>

        </div>

        {% else %}

        {% endif %}





    </div>

    <input id="backStep1" type="button" name="previous" class="previous 
    action-button-previous" value="Previous"/>
    <input id="toStep3" type="button" name="next" class="next action-button" 
    value="Next"/>
    </fieldset>

I've successfully sent my data back to my views, but I cant access it on my html file. I'm a newbie in jquery and django so i really need help. Thank you.

Answer 1

You need to use the response of your $.post and update your page accordingly. The page won't automatically update with the view's returned HTML, you have to put it somewhere with javascript. For example,

$.post("{% url 'calendarium:data' %}",{id: service_id}, function(response){
    $('#form-div').html(response);
});

Will put the rendered html into an arbitrary div with the id 'form-div'. Response is the returned output from the Django view.