Question

I’m using a jquery slider add-on that when it is manipulated, it writes the value to a linux file.

The Slider controls a text input box. The box is readonly, so it is always blurred. The problem I can’t understand is why the onchange command will not work. If I remove the readonly attribute on my input command, I run into the same problem.

I know that my javascript function works, because I can change the value of the text input box and press enter and it will update. But what I need it to do is to update the number whenever the slider changes it, so I can’t use the keyup or keydown command, because a slider controls it, not the user’s input.

<script type="text/javascript">

$(document).ready(function() {

    $( "#LeftRecordSlider" ).slider({

        range: "min",

        orientation: "vertical",

        value: 50,

        min: 0,

        max: 100,

        slide: function( event, ui ) {

            $( "#LeftRecordAmount" ).val( ui.value );

        }

    });

    $( "#LeftRecordAmount" ).val( $( "#LeftRecordSlider" ).slider( "value" ) );

});

</script>

<script type="text/javascript">

    function ChangeVolume(volumetype,volumelevel)
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {//IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {//IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("VolumeOutput").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","ChangeVolume.php?volumetype="+volumetype+"&volumelevel="+volumelevel,true);
            xmlhttp.send();
        };



</script>


<label for="LeftRecordAmount">Left Record Volume:</label>

<input type="text" onchange="ChangeVolume('LeftRecord',this.value)" id="LeftRecordAmount" style="border:0; width:3em; color:#0080ff; font-weight:bold;" readonly/>

<div id="VolumeOutput"></div>

Answer 1

Try to call event or method explicit. Follow the below approaches

$( "#LeftRecordSlider" ).slider({
    range: "min",
    orientation: "vertical",
    value: 50,
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $("#LeftRecordAmount").val( ui.value );
    },
    stop : function(event, ui){
        eval($("#LeftRecordAmount").attr("onchange")); // first approach
        ChangeVolume('LeftRecord',ui.value) // second approach
    }

});

User any of them.