如何在Django视图中发布和捕获jQuery ui-slider输出值？

Question

I am trying to POST the value from a jQuery UI slider that appears on an internal page of a survey form to a Django SessionWizardView. I am pretty new to JavaScript and jQuery but have some experience with Python 2.7.3 / Django 1.6.2.

Question: How do I 'send' and 'capture' the data sent from a jQuery ui-slider via POST in a Django view?

Aditional questions/info

• I have been having an issue with CSRF validation which may be the root cause of the issue.
• Is there a particular method I should be using?
• What is missing from the steps I have taken below?

wizard_form.html

I have a jQuery-UI Slider adopted from a tutorial by Thoriq Firdaus . This appears on an internal page within my SessionWizardView.

<form action="" method="post">{% csrf_token %}
            <table>   
                {{ wizard.management_form }}
                    {% if wizard.form.forms %}
                        {{ wizard.form.management_form }}
                        {% for form in wizard.form.forms %}
                            {{ form }}
                        {% endfor %}
                    {% else %}
                        {{ wizard.form }}
                {% endif %}   
            </table>

        {% load staticfiles %}  
            {% if 'surveyone' in request.path %}                        
                     {% if wizard.steps.current in steps %}     
                            <img src="{% static "survey/images/pathone/" %}{{display_image}}" height="600" width="500" style="border:1px solid black;" align="middle"/>                                                                     

                            <section>                               
                                <span class="tooltip"></span>   
                                <div id="slider"></div>  
                                <span class="volume"></span>  
                            </section>  

/my_project/src/survey/static/survey/js/slider.js

This is the relevant part of my slider.js code. I am trying to use jQuery.post to post the value to my Django view.

slide: function (event, ui) { 
    var value = slider.slider('value'),
        volume = $('.volume');                
        console.log(value)                
        $.post("/surveyone/", {value : value, csrfmiddlewaretoken : '{{csrf_token}}' } );
        },

/my_project/src/survey/views.py

This is my SessionWizardView which contains get_context_data and the done methods, both of which work fine. My problem is that I'm not really sure how to 'receive' the posted data.

I have read through the Form Wizard documentation but nothing stands out, the closest thing is the render(self, form=None, **kwargs): method, but that says it should be used "after the GET or POST request has been handled"

class SurveyWizardOne(SessionWizardView):                      

    def get_context_data(self, form, **kwargs):
        context = super(SurveyWizardOne, self).get_context_data(form, **kwargs)  
        if self.steps.current in ['5','6','7','8','9','10','11','12','13','14','15','16']:              
            step = int(self.steps.current)

            if step in (5, 6, 7):
                image = random.choice(PATH_ONE_IMAGES)   
                images.insert(step - 5, image)        
                PATH_ONE_IMAGES.remove(image)
                context['display_image'] = image

            elif step == 8:
                context['first_image'] = images[0]
                context['second_image'] = images[1]
                context['third_image'] = images[2]             

            elif step in (9, 10, 11):
                image = random.choice(PATH_ONE_IMAGES)   
                images.insert(step - 6, image)     
                PATH_ONE_IMAGES.remove(image)
                context['display_image'] = image

            elif step == 12:
                context['fourth_image'] = images[3]
                context['fifth_image'] = images[4]
                context['sixth_image'] = images[5]


            steps = ['5','6','7','9','10','11']              
            dv_steps = ['8','12']          

            context.update({'steps': steps,
                            'dv_steps': dv_steps
                             })


    def done(self, form_list, **kwargs): 
        return render(self.request, 'Return_to_AMT.html', {
            'form_data': [form.cleaned_data for form in form_list],            
        })  

So in essence, I'm not really sure what to do/try next. Could anyone provide any hints or tips?

Answer 1

Since the data is to be picked in SessionWizardView i would suggest to have a hidden field slider_value in a form. Now in the frontend this field is not visible.

The slider function will update the value in this hidden field which can be posted by posting the form. The value can then be accessed from the form object in session wizrd view.