Controlling order of jQuery click events

Question

I am working on a small project, it requires a few buttons that when you click on them it expand menus beneath them to show the user some options which they can select, however - how can I dynamically control the order of events?

For example: I need to select a colour before I can select a size and so on with more options.

EDIT:

Take this for example: http://www.notebookbuilder.co.uk

I have developed this (a long time ago), look at the functionality of this.

I want to be able to easily maintain this, because at the moment it's an absolute nightmare to add and edit features.

As you can see you cannot move onto 'the next level' before you select your notebook size, then when you have selected your size the material option appears - but you cannot click on colour.

Your description is rather vague and could do with more details. This is what I can gather from it. You've got a collection of buttons. Clicking a button reveals a menu under the respective button. Where does needing to control the order of events and selecting a colour/size come into this? — Russ Cam, Aug 25 '11 at 13:59
ok, I can see what you're trying to achieve now. Basically, each subsequent button's state (active or disabled) is dependent on the previous button having an "option" selected in its corresponding dropdown. — Russ Cam, Aug 25 '11 at 14:07
possible duplicate of [How to order events bound with jquery](http://stackoverflow.com/questions/290254/how-to-order-events-bound-with-jquery) — mkoryak, Aug 25 '11 at 14:13
If you are satisfied with one of our answers you should accept one — 8vius, Aug 25 '11 at 16:43

score 2 · Accepted Answer · answered Aug 25 '11 at 14:09

If I understand correctly, you have, say, 5 "actions", displayed on the same page at the same time, and you want to user to execute action 1 (for example, select a color) before being able to execute action 2 (for example, select a size).

Create an array of size 5, put "false" in each element, when action 1 completes, put true in element 1 of the array, when the user clicks on action 2, check that the array element 1 is true before allowing the user to interact with it.

If you want it even more mantainable and generic, use an object instead of an array, and use a label for each action (for example "color", "size" etc..). If also allow you to make more complex checks (like, for example, if the user can select size and color in ay order, but must have chosen both before selecting payment method ... could not find a better example :D). This way you can also give the user a feedback "You must select a color first".

Suppose the object where you keep which actions are completed is called "actions" :

$('#buttonSize').click(function() {
    // Do whatever you need
    // ...
    actions['size'] = true;
});

$('#buttonColor').click(function() {
    // Check here
    if (!actions['size'] === true) {
        alert("Select a size first");
    }
    // Do whatever you need
    // ...
    actions['color'] = true;
});

And so on.

Thanks for that mate, also these functions need to change after the user has completed the process, because if you use the app above, some differents actions occur on the button actions when the app has completed the process of displaying the notebook, for example the 'Please redraw notebook' appears when changing colour, size, material etc — Nathan Fitzgerald - Fitzgenius, Aug 25 '11 at 14:22

score 0 · Answer 2 · answered Aug 25 '11 at 14:11

0

Depends, seeing from the example you posted when an option is selected a class is set on that field, so in that case for the next option you can check if the previous option has the set class and unlock (goes without saying all options are locked).

Same applies if you do it with a set of checkboxes or dropdown list, just check to see if the previous option is selected and unlock the following if so.

answered Aug 25 '11 at 14:11

8vius

5,786
14
74
136

Thanks, but is there any way to do this without having many click functions in one plugin wrapper? Could I not just create a function lets say openMenu() and have some arguments passed into that depending on what button has been clicked and whether or not the data to be displayed is via ajax? – Nathan Fitzgerald - Fitzgenius Aug 25 '11 at 14:14
I believe in that case take a look at the other answer posted so far, and simply make a function that does that but pass in the array with the preset values you want. – 8vius Aug 25 '11 at 14:17

Controlling order of jQuery click events

2 Answers2