Slider onChange event is launched on page load #1526

vpxavier opened this Issue Apr 28, 2011 · 11 comments


None yet

3 participants


Hello every one,
I'm using version 1.0 alpha 4.1.
I have a simple form with just a slider in it.
My problem is that the onChange event is processed when the page is loading and each time I go to the page that contains the following form and not only if I change the slider's value.
Here is my form:

<form action="Scripts/update_all.php" id="formAll" method="post">
      <div data-role="fieldcontain">
            <select id="formToggle" name="value" data-role="slider" data-theme="c" onChange="this.form.submit()><!-- to fix -->
                  <option value="0" selected="true">OFF</option>
                  <option value="250">ON</option>

Is this a bug?
What am I doing wrong?
Thanks a lot,


Hello - Could you post this to the discussion forums first? If it turns out there is an issue, you can post it here with details on how to reproduce and sample code in JS Bin or JS Fiddle.

@toddparker toddparker closed this Apr 28, 2011
@vpxavier vpxavier reopened this Apr 29, 2011

I did two weeks ago and it seems that one other user found the same issue but nobody helped us at the moment (not a critic, just a fact). ;o)

Here's my post:


I created a test application to recreate the issue.
Using the following code, if you switch to the 'TEST' page, you'll see that the event is called when you're switching from the 'Home page' to the 'Test page' in stead of only when the slider's value changed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
        <title>Test Page</title>
        <!-- JQUERY MOBILE  -->

        <link rel="stylesheet" href="" />
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>       
        <!-- END OF JQUERY MOBILE -->

        <script type="text/javascript">
            // -----------------------------------------------------
            $(document).ready( function()

        <div id="home" data-role="page" data-theme="b"> 
            <div data-role="header" data-backbtn="false">
                <div data-role="navbar">
                        <li><a href="#" rel="external" class="ui-btn-active" data-icon="home" data-iconpos="top">Home</a></li>
                        <li><a href="#test" data-icon="myapp-test" data-iconpos="top">Test</a></li>

                </div><!-- /navbar -->
            <div data-role="content" height="300" class="grey">

            <div data-role="footer" style="text-align: center;" class="ui-bar">
            </div><!-- /footer -->
        </div><!-- END OF HOME PAGE -->
        <div id="test" data-role="page" data-theme="b">
            <div data-role="header" data-backbtn="false">
                <div data-role="navbar">
                        <li><a href="#home" data-icon="home" data-iconpos="top">Home</a></li>
                        <li><a href="#" class="ui-btn-active" data-icon="myapp-test" data-iconpos="top">Test</a></li>

                </div><!-- /navbar -->
            <div data-role="content">
                <form id="form" action="Scripts/update_test.php" method="post">
                <div data-role="fieldcontain">
                <input type="hidden" name="element_id" value="0"/>
                <input type="range" name="target" value="50" min="0" max="100" onchange="alert('The onChange event has been called');"/></div></form>

            </div><!-- /content -->
            <div data-role="footer" style="text-align: center;" class="ui-bar">

            </div><!-- /footer -->
        </div><!-- END OF TEST PAGE -->


Hi - Can you please post this sample code in JS Bin or JS Fiddle so it's easier to test and iterate on?


Hello, sorry for the late reply. I didn't see your request before.

Here's the JS Bin link:

Thanks for your help.


Hello, I'm wondering if you could assign the "critical" label as this has been confirmed as a bug and it is blocking for any website that needs a "range" slider in it.
Also, no one is able to give a working workaround.

Anyway, I know you guys are doing your best.
Thanks for the good job.

@vpxavier vpxavier closed this May 23, 2011
@vpxavier vpxavier reopened this May 23, 2011

Closed by mistake


Sure, bumped up. We're a bit heads-down on bigger re-factoring right now but we'll look at this as soon as we can.


Thanks a lot.


Hello, just a little more information about this.
It is still a problem in BETA 1.

It does the same with

And also if I use:

in stead of an onchange event.

Any help would be really appreciated as I need this for all my projects.
Again, thanks for the good work, I know you're all very busy.

@gseguin gseguin was assigned Jun 21, 2011
@gseguin gseguin added a commit that referenced this issue Jul 13, 2011
@gseguin gseguin Fix for issue #1526 3062d38
@gseguin gseguin added a commit that referenced this issue Jul 13, 2011
@gseguin gseguin Unit tests for issue #1526 584e307
@gseguin gseguin closed this Jul 13, 2011

Hello, I'm very happy to see that you seem to have found a fix for this issue.
Could you tell if this fix is for both the sliders and flip toggle switch?

Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment