New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider onChange event is launched on page load #1526

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

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 28, 2011

Contributor

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.

Contributor

toddparker commented Apr 28, 2011

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

@vpxavier

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Apr 29, 2011

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

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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Apr 29, 2011

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>

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 2, 2011

Contributor

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

Contributor

toddparker commented May 2, 2011

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

@vpxavier

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier May 10, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier May 23, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier May 23, 2011

Closed by mistake

Closed by mistake

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 23, 2011

Contributor

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.

Contributor

toddparker commented May 23, 2011

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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier May 23, 2011

Thanks a lot.

Thanks a lot.

@vpxavier

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Jun 21, 2011

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.

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.

@ghost ghost assigned gseguin Jun 21, 2011

gseguin added a commit that referenced this issue Jul 13, 2011

gseguin added a commit that referenced this issue Jul 13, 2011

@gseguin gseguin closed this Jul 13, 2011

@vpxavier

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier 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!

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