mstratman / jQuery-Smart-Wizard

flexible jQuery plug-in that gives wizard like interface
http://mstratman.github.com/jQuery-Smart-Wizard/
303 stars 164 forks source link

Double-click Next button opens the next 2 steps #9

Closed wolispace closed 11 years ago

wolispace commented 12 years ago

Can the dblclick be trapped so it acts as a single click?

mstratman commented 12 years ago

Are you referring to the "Next", "Previous" and step-number buttons?

If so, those are currently hard-coded to the "click" event. Although I think it generally sounds like an unintuitive UI choice, it's not inconceivable to add a "buttonEvent" option that specifies what to bind to.

Just for my own curiosity, would you care to share what you're trying to do or why you want to use double clicks?

Either way, I'd be happy to accept a "buttonEvent" patch. Or I can add it myself, but I'm not sure when I will be able to get to it.

wolispace commented 12 years ago

Yes, its the Nex and Prev buttons I am referring to.

Please go to any demo page of SmartWizard 3 (did not appear to do it in 2) and try double-clicking "Next" instead of just single clicking at a nice logical pace.

It still amazes me how many people think they have to double-click links on a web page.

mstratman commented 12 years ago

So you're looking for double clicks in addition to rather than instead of single clicks?

mstratman commented 12 years ago

By the way, I don't think I changed the event bindings at all - so version 3 shouldn't behave differently than 2 with respect to clicks, as far as I know. But i could certainly be mistaken.

wolispace commented 12 years ago

Hi sorry for my tardy replies

What I'm hoping for is the dblClick to not generate 2 single clicks, as I know several users who accidentally double-click everything in sight and this causes problems with SmartWizard. - well for the way I have implemented it anyhow.

Here is a demo of a smartWizard that demonstrates the strange behaviour. Single click slowly through each step and its fine, then start again and double-click "Next"

Notice how you see the content of 2 panels at once after double-clicking "Next" - well I do in Firefox at least. Its as if the code could not keep up with the speed of 2 "Next" clicks in sequence.

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="http://mstratman.github.com/jQuery-Smart-Wizard/styles/smart_wizard.css" rel="stylesheet" type="text/css"> <script src="http://mstratman.github.com/jQuery-Smart-Wizard/js/jquery-1.4.2.min.js"&gt;&lt;/script&gt; <script src="http://mstratman.github.com/jQuery-Smart-Wizard/js/jquery.smartWizard.js"&gt;&lt;/script&gt; <script > $(document).ready(function(){ // Smart Wizard $('#block_wizard').smartWizard(); }); </script> <style> .swMain div.actionBar { position: absolute; bottom:0px; right:0px; }

block_wizard {

height:600px; }

.stepContainer { height:550px !important; } </style>

<body> <div id="block_wizard" class="swMain"> <ul> <li><a href="#block_Item_1"> <label class="stepNumber">1</label> <span class="stepDesc"> Item 1<br /> <small>Try dblClick Next</small> </span> </a> </li> <li><a href="#block_Item_2"> <label class="stepNumber">2</label> <span class="stepDesc"> Item 2<br /> <small>Skips to 3</small> </span> </a> </li> <li><a href="#block_Item_3"> <label class="stepNumber">3</label> <span class="stepDesc"> Item 3<br /> <small>But shows 2+3 content</small> </span> </a> </li> </ul> <div> <form > <div id="block_Item_1"> <table > <tbody> <tr><td>Text 1</td><td><input type="text" /></td></tr> <tr><td>Text 2</td><td><input type="text" /></td></tr> <tr><td>Text 3</td><td><input type="text" /></td></tr> </tbody> </table> </div> <div id="block_Item_2"> <table > <tbody> <tr><td>Text 3a</td><td><input type="text" /></td></tr> <tr><td>Text 4a</td><td><input type="text" /></td></tr> <tr><td>Text 5a</td><td><input type="text" /></td></tr> </tbody> </table> </div> <div id="block_Item_3"> <table > <tbody> <tr><td>Text 5b</td><td><input type="text" /></td></tr> <tr><td>Text 6b</td><td><input type="text" /></td></tr> <tr><td>Text 7b</td><td><input type="text" /></td></tr> </tbody> </table> </div> </form> </div> </div> </body> </html>

irfnkprc commented 11 years ago

Hi wolispace,

I found a solution to this. Not tested much.

    $(document).ready(function () {

        $('#wizard').smartWizard({
            onLeaveStep: leaveAStepCallback,
            onFinish: onFinishCallback,
            onShowStep: onShowStep
        });

        function onShowStep(obj, context) {
            $(".buttonPrevious").unbind("click").click(function (e) {
                e.preventDefault();
                $("#wizard").smartWizard("goBackward");
            });

            $(".buttonNext").unbind("click").click(function (e) {
                e.preventDefault();
                $("#wizard").smartWizard("goForward");
            });
        }

        function leaveAStepCallback(obj, context) {

            $(".buttonPrevious").unbind("click");
            $(".buttonNext").unbind("click");

            return true;
        }

        function onFinishCallback(objs, context) {

        }
    });
wolispace commented 11 years ago

Nice one irfnkprc.

I re-worked this logic into my code and it works a treat.

Ideally this logic would be built into SmartWziard (I will leave this open for mstratman to comment on), but until then this will do me,

Thanks

velanchandru commented 11 years ago

hi irfnkprc thanks for your wonderfull fix...it works great...

spyalert01 commented 10 years ago

hi irfnkprc, thanks for the suggestion. It works. The problem that I am facing is when the validation rule is performed and something when wrong. It will stay at the original step. This is fine. But after completing the validation and click next, it will never goto next function at all. How should I go about settling this?

avkpol commented 8 years ago

it works, thank you, irfnkprc!