Re: How to pass a value from a Django View to a JQuery Slider bar.

[Tom Evans]

On Tue, Mar 5, 2013 at 6:48 PM,  <7equivale...@gmail.com> wrote:
> Alright guys, thanks for the input, I need something a bit more specific to
> my case due to my ignorance on the subject at hand, so I am posting the code
> for my View, Template, and JQuery.  So, basically I want to take the slider1
> object value in the View, and place it in the Javascript where value = 37
> has been coded.
>
> ////////////////////////////////// Here is my view
> //////////////////////////////////////
> def slider_page(request):
>
>   slider1 = Slider.objects.get(sliderID=1)
>   variables = RequestContext(request, {'slider1': slider1})
>   return render_to_response('slider_page.html', variables)
>
> ///////////////////////////////// Here is my Template
> //////////////////////////////////
>
> {% block external %}
>   <script type="text/javascript" src="/media/control.js"></script>
> {% endblock %}
>
> {% block content %}
>   <br></br>
>   <p>
>     <label for="power">Intensity:</label>
>     <input type="text" id="power" style="border:0; color:#f6931f;
> font-weight:bold;" />
>   </p>
>   <div id="slider_1"></div>
>   <br></br>
> {% endblock %}
>
> ////////////////////////////// Here is my JQuery
> //////////////////////////////////////
>
>   $(function (){
>     $( "#slider_1" ).slider({
>       range: "min",
>       value: 37,
>       min: 0,
>       max: 100,
>       slide: function( event, ui ) {
>         $( "#power" ).val(ui.value );
>       }
>     });
>     $( "#power" ).val($( "#slider_1" ).slider( "value" ) );
>     return false;
>   });
>

Er, just put your jquery into your template. The JS is specific to
that page (or pages with a #slider_1 on it, I suppose), so simply
include it into the page:

{% block content %}
  <br></br>
  <p>
    <label for="power">Intensity:</label>
    <input type="text" id="power" style="border:0;
color:#f6931f;font-weight:bold;" />
  </p>
  <div id="slider_1"></div>
  <br></br>
  <script type='text/javascript>
  $(function (){
    $( "#slider_1" ).slider({
      range: "min",
      value: {{ slider1.value }},
      min: 0,
      max: 100,
      slide: function( event, ui ) {
        $( "#power" ).val(ui.value );
      }
    });
    $( "#power" ).val($( "#slider_1" ).slider( "value" ) );
    return false;
  });
</script>
{% endblock %}


Alternatively, store the data on the slider HTML node and extract using JS:

{% block external %}
  <script type="text/javascript" src="/media/control.js"></script>
{% endblock %}

{% block content %}
  <br></br>
  <p>
    <label for="power">Intensity:</label>
    <input type="text" id="power" style="border:0;
color:#f6931f;font-weight:bold;" />
  </p>
  <div id="slider_1" data-slider-value="{{ slider1.value }}"></div>
  <br></br>
{% endblock %}

// separate JS file
  $(function (){
    $( "#slider_1" ).slider({
      range: "min",
      value: $(this).data('slider-value'),
      min: 0,
      max: 100,
      slide: function( event, ui ) {
        $( "#power" ).val(ui.value );
      }
    });
    $( "#power" ).val($( "#slider_1" ).slider( "value" ) );
    return false;
  });

Cheers

Tom

-- 
You received this message because you are subscribed to the Google Groups 
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-users+unsubscr...@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.