3
\$\begingroup\$

I have created a Data Verification page in a Django SessionWizardView where a user has to confirm an earlier submitted rating of an image using a jQuery UI Slider (-100 - +100)

The below slider starts off at the same point the user has previously rated the image at by adding a Django template variable. value: {{first_slider}},

My issue is that I would prefer to 'externalise' this script or to somehow otherwise condense it as I will need to add nine of such to the page.

I tried to make an external JS file and include the necessary Django template tags but this did not work.

wizard_form.html

{% extends "base.html" %}
{% load i18n %}
{% block head %}
{{ wizard.form.media }}
{% endblock %}
{% block content %}

<h1>Experiment</h1>

<p>Page: {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>

<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"/>                                                                     

                    <div class="slider" id="one"></div>                             
                    <div id="slider-result"></div>   
                    <input type="text" name="slider_value" id="hidden1"/>                           
                    <section></section>   
                    <script src="{% static "survey/js/slider_two.js" %}"></script>                  
            {% endif %} 
            {% if wizard.steps.current in dv_steps %}       

            <img src="{% static "survey/images/pathone/" %}{{first_image}}{{fourth_image}}{{seventh_image}}" height="300" width="250" style="border:1px solid black;" align="middle"/>                          
                      <div class="slider_three" id="one"></div>                     
                        <script >                                                                               
                            $('#submit').click(function() {
                                var username = $('#hidden').val();
                                if (username == "") username = 0;  
                                $.post('comment.php', {
                                    hidden: username
                                }, function(return_data) {
                                    alert(return_data);
                                });
                            });

                            $(".slider_three").slider({         
                                animate: true,
                                range: "min",
                                value: {{first_slider}},
                                min: -100,
                                max: +100,
                                step: 1,

                                slide: function(event, ui) { 
                                  $("#slider-result").html(ui.value);
                                  if($(this).attr("id") ==  "one")
                                      $("#hidden1").val(ui.value);
                                }
                            });
                        </script>                                   
                    <div id="slider-result">{{first_slider}}</div>
                    <input type="text" name="slider_value" id="hidden2"/>                           
                    <section></section> 

                    ....
                    ....

    {% if wizard.steps.prev %}
        <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
        <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
    {% endif %}

    <input type="submit" name="submit" value="{% trans "submit" %}"/>
</form>
{% endblock %}
\$\endgroup\$
3
+50
\$\begingroup\$

If you need to externalise/compact the $(".someslider").slider() function, I would do it like this:

  1. External script 'sliders_setup.js', depending on jQuery:

    (function(NAMESPACE){ // to keep things clean
        NAMESPACE.setup_slider = function(selector, value, selector_result){
            $(selector).slider({         
                            animate: true,
                            range: "min",
                            value: value,
                            min: -100,
                            max: +100,
                            step: 1,
    
                            slide: function(event, ui) { 
                              $(selector_result).html(ui.value);
                              if($(this).attr("id") ==  "one")
                                  $("#hidden1").val(ui.value);
                            }
                        });
        };
    }
    (window.NAMESPACE = window.NAMESPACE || {}));  // again, to keep code clean. Substitute NAMESPACE for any meaningful name you choose.
    
  2. Include jQuery, include sliders_setup.js, call it (inside tags) as:

    NAMESPACE.setup_slider('.slider_three', {{ first_slider }}, '#slider-result');
    

Which brings you to one fairly simple line per slider. Since wizard_form.html knows the value of {{ first_slider }} it will substitute it and the call to the JavaScript function will pass the integer as intended.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.