Skip to content
This repository

Slider onChange event is launched on page load #1526

Closed
vpxavier opened this Issue April 28, 2011 · 11 comments

3 participants

vpxavier Todd Parker Ghislain Seguin
vpxavier

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>
            </select>
      </div>
</form>

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

Todd Parker

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.

Todd Parker toddparker closed this April 28, 2011
vpxavier vpxavier reopened this April 29, 2011
vpxavier

Hello,
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:
http://forum.jquery.com/topic/not-solved-bug-slider-event-launched-on-page-load

vpxavier

Hello,
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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Page</title>
        <!-- JQUERY MOBILE  -->

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>       
        <!-- END OF JQUERY MOBILE -->

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

            }
        </script>
    </head>
    <body>
        <div id="home" data-role="page" data-theme="b"> 
            <div data-role="header" data-backbtn="false">
                <div data-role="navbar">
                    <ul>
                        <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>

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


            </div> 
            <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">
                    <ul>
                        <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>

                    </ul>
                </div><!-- /navbar -->
            </div>
            <div data-role="content">
                <form id="form" action="Scripts/update_test.php" method="post">
                <div data-role="fieldcontain">
                <H3>name</H3>
                <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 -->

    </body>
</html>
Todd Parker

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

vpxavier

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

Here's the JS Bin link: http://jsbin.com/ixabe5/

Thanks for your help.

vpxavier

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
vpxavier

Closed by mistake

Todd Parker

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.

vpxavier

Thanks a lot.

vpxavier

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

It does the same with
data-role="slider"
and
data-role="range"

And also if I use:
$('#myInput').change(function(){

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.

Ghislain Seguin gseguin referenced this issue from a commit July 12, 2011
Ghislain Seguin Fix for issue #1526 3062d38
Ghislain Seguin gseguin referenced this issue from a commit July 12, 2011
Ghislain Seguin Unit tests for issue #1526 584e307
Ghislain Seguin gseguin closed this July 12, 2011
vpxavier

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!

Timmy Willison timmywil referenced this issue from a commit July 12, 2011
Ghislain Seguin Fix for issue #1526 f621092
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.