Updating span inner html with jQuery .html not working in IE - javascript

I am trying to update a span with the value of a range input as it is being slided. It works in Chrome and Firefox but in IE (Tried both 10 & 11). There's no error in console, the span inner html is just blank. I tried with .text instead of .html but no luck. What is happening here?
function onRangeInput(myobj) {
$(myobj).val();
var theid= $(myobj).attr('id');
var spanid = theid + "_span";
$("#" + spanid).html($(myobj).val());
}
Okay, upon further looking, I guess this code is fine and there's something wrong in the way I am calling the fucntion. Here's the html,
<input type="range" id="rangefirst" name="rangefirst" min="0" max="100" value="51" onChange="rangeChanged(this)" oninput="onRangeInput(this)"/>
<span id="rangefirst_span"></span>
On Chrome and FF the function is getting called when the slider is moved. IE ignores the event. What am I doing wrong?

I created a JSFiddle for your question last update. oninput is not supported in IE 10; you can use something like this:
HTML:
<input type="range" id="rangefirst" name="rangefirst" min="0" max="100" value="51"/>
<span id="rangefirst_span"></span>
Javascript:
$('#rangefirst').on("change mousemove", function() {
onRangeInput(this);
});
function onRangeInput(myobj) {
var theid= $(myobj).attr('id');
var spanid = theid + "_span";
$("#" + spanid).html($(myobj).val());
}
JSFiddle: http://jsfiddle.net/L5Lqafus/2/
More information for oninput bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=853670

Related

Range slider appears to 'skip' values when using in anger

I am having an issue with the standard html5 range slider when calling the input event in Javascript. When using the slider in anger it appears to skip values. Because I am using this as zoom functionality alongside cropper.j this is giving me quite a headache as it is not honouring the values and stepping over steps of the slide process.
I have read extensively online and cannot seem to come by a solution for this. Is this a browser bug or is there an attribute I am missing?
<input type="range" min="0" max="100" value="0" step="10" class="crop__controls--slider" id="crop__controls--slider" />
...and the Javascript for this;
var event = (isIE()) ? 'change' : 'input'; //ie11 does not support input event
slider.off(event).on(event, function(e) {
var sliderValue = parseInt($(this).val(), 10);
var type;
if (sliderValue > currentZoomSetting) {
type = 'in';
} else {
type = 'out';
}
zoom(type);
currentZoomSetting = sliderValue;
});
Help on this would be much appreciated.
See below a fiddle that if, used excessively, shows that values are skipped using the input event.
var slider = document.getElementById('slider');
slider.addEventListener('input', sliderChange);
function sliderChange() {
console.log(this.value);
}
<input id="slider" type="range" min="0" max="100" value="0" step="10" />

jquery/JS simple data bind for dynamic controls

I have on the html page an and elements, created dynamically via js.
<input type="text" id="MyInput" name="MyInput"
class='form-control copyMe' placeholder="enter smth pls"/>
<div id="jsonTextAreaDiv" contenteditable="true">
<span id="MyInput_JSON"></span>
</div>
And I want to have text binding from input to span.
So, I go with next JS:
$(document).on('input', 'input.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = $(this).attr("id") + "_JSON";
document.getElementById(idToInsert).innerHTML = valToInsert;
});
Could be all in one line jquery, but... Anyway.
This binding works fine during entering text to input.
But once input looses focus - suddenly span looses inner text.
I don't know why. This is exactly my question, how is it happening?
I've "worked around" this issue with adding
$(document).on('input', 'input.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = $(this).attr("id") + "_JSON";
document.getElementById(idToInsert).innerHTML=valToInsert;
}).on('blur', '.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = $(this).attr("id") + "_JSON";
document.getElementById(idToInsert).innerHTML=valToInsert;});
This way it works like I want it. But this is ridiculous.
Any ideas regarding why does the value disappear from span at the first place?
Thanks in advance.
Change your input event to use the change event instead. IE does not support the 'input' event correctly. Alternatively, you could try using the keyup event.
$(document).on('change', 'input.copyMe', function(){
var valToInsert = $(this).val();
var idToInsert = "#" + $(this).attr("id") + "_JSON";
$(idToInsert).html(valToInsert);
});
Also, i changed your last line to jQuery as well. There's no reason to mix jQuery and pure JS together. It makes it easier to read if you keep it uniform.

Live output in jQuery HTML5 range slider

I'm trying to get a live output from a HTML5 input range slider into a javascript variable. Right now, I'm using <input type="range" id="rangevalue" onchange="arduino()">
The way I have it working is doing what I want, but it's not "live."
I want to have it so while you're dragging the slider, it updates the variable, and not only once you let go. For example: when I'm dragging the slider from 1 to 5, I want the variable to update while I'm dragging, so it will update with 1,2,3,4,5 and not only jump from 1 to 5 once I release the slider.
Is it possible to do such a thing? Any recommendations? I was using the jQuery slider plugin, but it was not touch compatible, which eliminated its purpose.
Thanks for all help in advance!
EDIT - I must not have explained well enough, I know how to get the value of a range slider, I just want to get a "live" output from it.
$("#rangevalue").mousemove(function () {
$("#text").text($("#rangevalue").val())
})
jsFiddle example
Or in plain JS:
var inp = document.getElementById('rangevalue');
inp.addEventListener("mousemove", function () {
document.getElementById('text').innerHTML = this.value;
});
Yes it is possible. What we need to do is use .mousedown() and .mouseup() with a Boolean value to keep track that we are holding down the mouse mousedown. When the mouse is held down set mousedown to true and use a setTimeout that keeps updating the value. This way while you are dragging slider the value is being constantly updated. For example:
HTML
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">
JavaScript
var mouseDown = false
$("#rangevalue").mousedown(function() {
mouseDown = true;
updateSlider()
});
$("#rangevalue").mouseup(function() {
mouseDown = false;
});
function updateSlider() {
if(mouseDown) {
// Update the value while the mouse is held down.
$("#text").text($("#rangevalue").val());
setTimeout(updateSlider, 50);
}
}
Here is a fiddle
You could also use the oninput attribute.
<input type="range" min="5" max="10" step="1"
oninput="arduino()" onchange="arduino()">
More Information on Bugzilla
I think, this solution a good fit for this problem
$("#rangevalue").on("input", function(){
updateSlider()
});
function updateSlider() {
// Update the value while the mouse is held down.
$("#text").text($("#rangevalue").val());
setTimeout(updateSlider, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">
I think it is working with your Code.
<input type="range" id="rangevalue" onchange="arduino()">
<p id="t"></p>
<script>
function arduino() {
document.getElementById("t").innerHTML = document.getElementById("rangevalue").value;
}</script>
JSFiddle

jQuery .change() event not firing in IE

I've got a dialog that performs a calculation that is dependant on three input fields. When any of them are changed it checks whether they are all filled and if they are it processes and gives its response.
It works absolutely fine in FF, Chrome, Opera etc, but in any version of IE it just stops working. The rest of my jQuery works fine, but I can't work out exactly where the problem is here. I think it might be to do with the .change() event or the multiple event binding but I really don't know.
Here's the offending code:
var loan = $("#ltv-loan-amount");
var mortgage = $("#ltv-mortgage");
var property = $("#ltv-property");
$("#ltv-dialog input").change( function() {
if(loan.val() && mortgage.val() && property.val())
{
var ltv = parseInt( ( ( parseInt(loan.val()) + parseInt(mortgage.val()) ) / parseInt(property.val()) )* 1000 );
ltv /= 10;
if(ltv > 0 && ltv < 85)
{
$("#ltv-result").html("<span id=\"ltv-form-result\">" + ltv + "%</span></p><p><a id=\"ltv-link\" href=\"#sidebar-head\">Congratulations, your LTV has passed. Please now proceed with your application opposite.</a>");
$("#amount").val(loan.val());
$("#mortgage_balance").val(mortgage.val());
$("#prop_value").val(property.val());
$("#ltv-link").click(function() {
$( "#ltv-dialog" ).dialog( "close" );
});
}
else if (ltv > 84)
{
$("#ltv-result").html("<span id=\"ltv-form-result\">" + ltv + "%</span></p><p>Unfortunately your LTV is greater than 85%. You may still qualify for a loan if you reduce the loan amount.");
}
else
{
$("#ltv-result").html("</p><p>Please check your input above as you currently have a negative ltv.");
}
}
});
and the HTML in question:
<div id="ltv-dialog" title="Do You Qualify for a Loan?">
<p>Please enter the fields below and your LTV will be calculated automatically.</p>
<div id="ltv-form">
<div class="ltv-row">
<label for="ltv-loan-amount">Loan Amount:</label>
<input type="text" name="ltv-loan-amount" id="ltv-loan-amount" class="p000" />
</div>
<div class="ltv-row">
<label for="ltv-mortgage">Mortgage Value:</label>
<input type="text" name="ltv-mortgage" id="ltv-mortgage" class="p000" />
</div>
<div class="ltv-row">
<label for="ltv-property">Estimated Property Value:</label>
<input type="text" name="ltv-property" id="ltv-property" class="p000" />
</div>
</div>
<div class="ltv-row">
<p>Loan to Value % (LTV): <span id="ltv-result"></span></p>
</div>
</div>
An Update
The change event appears to be firing, but only when the text box changes from a value to null.
As you are targeting text input elements, have you tried using a different event? So instead of change use, for example, keyup? $("#ltv-dialog input").keyup( function() {. This will fire after every keypress.
Using jQuery .on() also might solve your problem. Use it like this :
jQuery("#ltv-dialog").on("change", "input", function(){
alert("It works !");
//your javascript/jQuery goes here
}
);
jsfiddle
I had the same issue: Below fix worked for me:
Instead of: $("#ltv-dialog input").change( function() {
I used: $('#ltv-dialog').on('input', function() {
Please try with using each instead of change / click , which is working fine even first time in IE as well as other browsers
Not Working a first time
$("#checkboxid").change(function () {
});
Working fine even first time
$("#checkboxid").each(function () {
});
Use the live function, it usually makes it work ...
$("#YOURTHING").live("change", function(){
// CODE HERE
});

How to real-time move the range type input's slider using javascript without refreshing page?

<input type="range" value="0" min="0" max="100">
I did try the following, but the slider no response.
var i = 0;
setInterval(function(){
document.querySelector('input[type=range]').value = i++;
}, 1000);
or impossible?
you can do it with stepUp and stepDown functions
document.getElementById("myslider").stepUp(1);
document.getElementById("myslider").stepDown(1);
working demo : http://jsfiddle.net/dp6cwoom/
works fine in Chrome http://jsfiddle.net/gCSFV/
<input type="range" value="0" min="0" max="100">
<script type="text/javascript"><!--
document.querySelector('input[type=range]').value = 30;
--></script>
Works ok in Safari4 (Win).
Ensure, your code is after input element or is called inside onload or similar function.
It should work.
As per the MDC doc on document.querySelector
Its dsupported by IE8, FF3.5, Chrome1, Safari3.2 and so is input type=range
Syntax
element = document.querySelector(selectors);
Returns null if no matches are found;
otherwise, it returns the first
matching element.
Be careful that querySelector returns only first element of the matched ones.
So, document.querySelector('input[type=range]') wont be as desirable as something like document.querySelector('#myrange')
I found a way but not very good: to modify the style of input dynamically.
var i = 0,
oRange = document.querySelector('input[type=range]');
setInterval(function(){
oRage.value = i;
oRage.style.fontSize = i + 'px';
i++;
}, 1000);

Categories