Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Slider onChange event is launched on page load #1526

Closed
vpxavier opened this Issue · 11 comments

3 participants

@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

@toddparker

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
@vpxavier vpxavier reopened this
@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>
@toddparker

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
@vpxavier vpxavier reopened this
@vpxavier

Closed by mistake

@toddparker

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.

@gseguin gseguin was assigned
@gseguin gseguin referenced this issue from a commit
@gseguin gseguin Fix for issue #1526 3062d38
@gseguin gseguin referenced this issue from a commit
@gseguin gseguin Unit tests for issue #1526 584e307
@gseguin gseguin closed this
@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!

@timmywil timmywil referenced this issue from a commit
@gseguin gseguin Fix for issue #1526 f621092
@timmywil timmywil referenced this issue from a commit
@gseguin gseguin Unit tests for issue #1526 3f2a013
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.