Modifying jQuery plugin

Question

I am using the following plugin: http://codecanyon.net/item/dynamic-step-process-panels/118950 and I am trying to modify its behavior. Currently when the last tab is reached the next button becomes inactive, its class is changed from 'button activeButton' to 'button inactiveButton'. I need to change the next buttons class to one which I create myself, which will act as a submit button.

I have unsuccessfully tried to modify the div class in the following way:

<script type="text/javascript">

    $(document).ready(function() {
        $("#processPanel").processPanel({
            kind: "freeChoice",
            icons: true,
            nextPrevButtons: true,
            style: "green-blue",
            afterOpen: function(event, step, content, stepNumber){
                if(stepNumber==3)
                {
                    $(".button inactiveButton").attr('class', 'button activeButton-green-blue');
                }
            }
        });

Any advice would be greatly appreciated...

Try using the "onOpen" event handler instead of afterOpen

Scorpion-Prince
– Scorpion-Prince

2012-03-21 15:15:38 +00:00
Commented Mar 21, 2012 at 15:15 — Scorpion-Prince
– Scorpion-Prince, Commented Mar 21, 2012 at 15:15

Jonathan Lonowski · Accepted Answer · 2012-03-21 15:22:32Z

1

To match a single element with multiple classes, prepend each with a period and leave out the space:

$(".button.inactiveButton")...

With the space and inactiveButton not having a prefix, the selector is trying to match something like this:

<div class="button">
    <inactiveButton />
</div>

You may also look at using addClass and removeClass rather than setting the class attribute directly:

$(".button.inactiveButton")
    .removeClass('inactiveButton')
    .addClass('activeButton-green-blue');

This way, if the element has any other classes assigned to it, you won't remove them unintentionally.

edited Mar 21, 2012 at 15:22

answered Mar 21, 2012 at 15:14

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cronin O'M Over a year ago

I gave the altered button a title of 'Submit'and I am trying unsuccessfully to have it submit the form. $("[title='Submit']").click(function(){ alert('submit!'); $("#RoomAddForm").submit(); }); any advice?

Jonathan Lonowski Over a year ago

@CroninO'M Make sure that the button is available when binding .click: alert($('[title="Submit"]').size()); But, you may have to use delegated binding with either .on or .delegate: $('#RoomAddForm').on('click', '[title="Submit"]', function () { /* ... */ });

Cronin O'M Over a year ago

I think I understand what you mean. The element i'm binding the 'click' to doesn't exist on document load, so this is why it's failing? I tried your suggestion but I'm getting error:$("#RoomAddForm").on is not a function

Jonathan Lonowski Over a year ago

@CroninO'M What version of jQuery are you using? .on was added with 1.7 and .delegate with 1.4.2. But, yeah - event binding only works with elements that exist at that moment. Delegation works by taking advantage of event bubbling to have an existing ancestor capture the event for a descendant that may or may not exist yet.

Cronin O'M Over a year ago

Got the Submit functionality working, thanks @Jonathan Lonowski. Turs out my form wasn't structured properly. I gave the submit button an id of 'sub' and the following code worked: $("#RoomAddForm").delegate("#sub", "click", function() { $("#RoomAddForm").submit(); }); Thanks again...

Collectives™ on Stack Overflow

Modifying jQuery plugin

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related