On Tue, Mar 5, 2013 at 6:48 PM, <[email protected]> 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/django-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
