This is driving me crazy. I'm working with jquery mobile 1.4.5 and firebase and I have this code:
<html>
<body>
<div>
<label for="size">Stroke thickness:</label>
<input type="range" name="size" id="size" value="5" min="1" max="100" data-highlight="true">
</div>
<script>
//Keeps updated with the current size in firebase
currentSize.on("value", function(snapshot)
{
siz = snapshot.val();
$("#size").val(siz);
$("#size").slider("refresh");
});
$("#size").on('slidestop', function(event)
{
var a = $("#size").val();
currentSize.set(a);
});
</script>
</body>
</html>
As you can see I update the value of the slider from firebase. This works fine.
The problem is when I try to set it. It simply doesn't work and I've tried many ways, unless I put the data-role="none" attribute, then it works like a charm, but of course without the nice mobile theme.
I'll really appreciate any help.
Related
Hello,
i have a little problem that maybe you could help me with. I searched the internet for quite a long time but i didn't find any answers.
I have a little web shop using Spring and Thymeleaf. My task is now to implement the option to change the quantity of a cart item inside the cart. This value is stored in a variable ${item.quantity}.
So in conclusion if I press "up" or "down" on the input field, the item in the cart should change its quantity and the total price of all cart items should be evaluated again.
I used an <input type="number"> combined with an onchange event running a javascript function, but all my tries went wrong.
Here is the code snippet of cart.html template:
<input
type="number"
onchange="change(this.value)"
min="1"
max="5"
th:value="${item.quantity}"
>
And this is my javascript code:
<script th:inline="javascript">
/*<![CDATA[*/
function change(data) {
var quantity = /*[[${item.quantity}]]*/ data;
location.reload(false);
}
/*]]>*/
</script>
but this doesn't work.
Hopefully you understand what I mean and someone can help me, because I really don't have any idea how to else do this.
You need to send the changed quantity back to the server. As a first step do it without JavaScript. Use a simple form, for example:
<form action="/change-quantity">
<input type="hidden" name="itemId" th:value="${item.id}">
<input type="number" min="1" max="5" th:value="${item.quantity}">
<input type="submit" value="Update">
</form>
Now you need to write a POST controller for the path /change-quantity that looks up the item by the ID, change it's quantity and finaly redirects back to the page you came from.
I'm trying to get a web volume slider for a RasPi Project. Therefore I need a way to transfer the value of the slider live to the server.
Currently the slider is working fine, but I do not get the data to the server.
I already found a way to do it it via a submit button, but that’s not what I’m looking for because I need the volume “live” at the server.
Best regards
geerkins
<script>
function verarbeiten(auswertung){
//var test = auswertung;
//alert(test);
return auswertung;
}
</script>
<form oninput="numerisch.value=verarbeiten(auswertung.value)">
<!--<form oninput="numerisch.value=auswertung.value">-->
<input type="range" name="auswertung" min="0" max="10" value="5" orient="vertical">
<br>
<output name="numerisch">5</output>
</form>
I've previously used popups with JQueryMobile 1.3 and older without problem. With the new 1.4 RC1 I'm finding my popups don't update when I select a different item.
You can see an example here with JQueryMobile 1.3
http://jsfiddle.net/vinomarky/56hQ9/
And another here using JQueryMobile 1.4RC1 - identical code, but the select box no longer updates when different options are chosen;
http://jsfiddle.net/vinomarky/B9TqL/1/
Any ideas of what to try? the code is as follows;
Lognormal
<div data-role="popup" id="popupBasic16">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="radio" name="updown" id="updown46" value="Lognormal" checked="checked" />
<label for="updown46">Lognormal</label>
<input type="radio" name="updown" id="updown47" value="Normal" />
<label for="updown47">Normal</label>
</fieldset>
</div>
</div>
And Javascript
$('select').selectmenu();
$('#updown46').click(function () {
$('#log_or_norm .ui-btn-text').html('Lognormal');
$('#popupBasic16-screen').click();
document.select_choices.log_or_norm.value = "Lognormal";
$('select').selectmenu('refresh');
});
$('#updown47').click(function () {
$('#log_or_norm .ui-btn-text').html('Normal');
$('#popupBasic16-screen').click();
document.select_choices.log_or_norm.value = "Normal";
$('select').selectmenu('refresh');
});
Two methods
$('#log_or_norm').text('Normal');
Another
$('#log_or_norm ').empty().append('Lognormal');
Fiddle
http://jsfiddle.net/B9TqL/3/
Your Javascript has some errors as document.select_choices is not defined. If you want to update the value of your button use jQuery:
$('#log_or_norm').text("Lognormal");
It seems that in jQuery 1.4 they changed the HTML structure of the buttons, that's why your code $('#log_or_norm .ui-btn-text').html('Lognormal'); doesn't work. Check the full page of changes here.
Demo here.
i'm trying to make a slider example with HTML5 and Javascript but the code doesn't work
<script type="text/javascript">
function slider_change(val){
document.getElementById('slider_value').innerHtml=val;
}
</script>
<input type="range" id="slider" min="0" max="100" value="50"
step="2" onChange="slider_change(this.value)" />
<br/><br/>
Slider value : <span id="slider_value" >50</span>
appears the slider but no change in the inner HTML of the span .
The property is called innerHTML, not innerHtml
Good to see you have done everything right except innerHTML .. replace innerHtml by innerHTML
I am disabling my range input however in chrome it shows it grayed out but it is still usable.
<input type="range" disabled min="0" max="100"/>
I would assume the above would not allow you to change its value.
Am I doing it wrong?
jsFiddle
Relevant specification Disabled
Here is the Chrome bug report, guess just need to wait for version 15 as the commenters mentioned.
Bug 54820
you can remove all binded events of that specific scroll group to make that scroll disable like:
<div id="fieldset1">
<input type="range" disabled min="0" max="100" readonly="1"/>
</div>
<script>
$(":range").rangeinput();
$('#fieldset1 *').unbind(); // for all events
</script>
its works ..
no need to disable text field; beacause on form submission that field will not be posted ..
My solution JSFIDDLE (Works fine in default android browser)
html
<input id="range" type="range" value="10" min="0" max="30" step="10"/>
<button id="disableBtn">Disable</button>
JS
document.getElementById('disableBtn').addEventListener('input', filter);
document.getElementById('disableBtn').addEventListener('click', disable);
function disable(){
document.getElementById('range').disabled = !document.getElementById('range').disabled;
}
function filter(){
if(document.getElementById('range').disabled){
document.getElementById('range').value = document.getElementById('range').defaultValue;
}
}
I found a corny solution for chrome, because it doesn't seem like you can disable it from user input. Put a div over it so a user cannot interact with it. Not pretty but works:
<div style="position:relative;">
<div style="position:absolute;z-index:5;width:100%;height:100%;"></div>
<input type="range" disbaled=True min="0" max="100" value="0"/><span id="v">100</span>
</div>