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

Modal & Collapsible 'Close' conflicting #3736

Closed
kvnxush opened this Issue Jun 6, 2012 · 7 comments

Comments

Projects
None yet
5 participants
@kvnxush

kvnxush commented Jun 6, 2012

I have a modal nested within a collapsible div, and closing the modal after launching it is causing the collapsible to close as well. Has anyone come across this or found a solution?

@sri85

This comment has been minimized.

Show comment
Hide comment
@sri85

sri85 Jun 7, 2012

Can u provide a jsfiddle?

sri85 commented Jun 7, 2012

Can u provide a jsfiddle?

@kvnxush

This comment has been minimized.

Show comment
Hide comment
@kvnxush

kvnxush Jun 7, 2012

I think I've narrowed down the problem to this... I have a class being applied to a parent container on expand and on hidden for the collapsible. The code is as follows:

$('.item-details').on('show', function () {
$(this).parent().addClass('active-item');
})
$('.item-details').on('hidden', function () {
$(this).parent().removeClass('active-item');
})

I have a feeling that because the modal is nested withing the collapsible div (.item-details). The functions being triggered on 'show' and 'hidden' for the modal are interfering with the on 'show' and 'hidden' for the collapsible. This is proven by the fact the the modal is displayed when I expend the collapsible, and the added class is being removed from the parent div when I close the modal.

Is there a way to explicitly call the on 'show' or 'hidden' for just the collapsible without interfering with the modal's on 'show' or 'hidden'?

kvnxush commented Jun 7, 2012

I think I've narrowed down the problem to this... I have a class being applied to a parent container on expand and on hidden for the collapsible. The code is as follows:

$('.item-details').on('show', function () {
$(this).parent().addClass('active-item');
})
$('.item-details').on('hidden', function () {
$(this).parent().removeClass('active-item');
})

I have a feeling that because the modal is nested withing the collapsible div (.item-details). The functions being triggered on 'show' and 'hidden' for the modal are interfering with the on 'show' and 'hidden' for the collapsible. This is proven by the fact the the modal is displayed when I expend the collapsible, and the added class is being removed from the parent div when I close the modal.

Is there a way to explicitly call the on 'show' or 'hidden' for just the collapsible without interfering with the modal's on 'show' or 'hidden'?

@cemo

This comment has been minimized.

Show comment
Hide comment
@cemo

cemo Jun 22, 2012

@fat This problem started to be really very problematic.

All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the
past participle on completion of the action.

show | shown
hide | hidden

Plugin owners are using same convention. Bootstrap datepicker had same issue. To solve this problem one must be use if else statements with event.target if it is applicable.

That is to say, more and more people will make same mistakes because of this convention.

My proposed solution is changing the event names to reflect the owner of the plugin as modal-shown

cemo commented Jun 22, 2012

@fat This problem started to be really very problematic.

All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the
past participle on completion of the action.

show | shown
hide | hidden

Plugin owners are using same convention. Bootstrap datepicker had same issue. To solve this problem one must be use if else statements with event.target if it is applicable.

That is to say, more and more people will make same mistakes because of this convention.

My proposed solution is changing the event names to reflect the owner of the plugin as modal-shown

@fat

This comment has been minimized.

Show comment
Hide comment
@fat

fat Jun 22, 2012

Member

please reopen with a jsfiddle. thanks

Member

fat commented Jun 22, 2012

please reopen with a jsfiddle. thanks

@fat fat closed this Jun 22, 2012

@cemo

This comment has been minimized.

Show comment
Hide comment
@cemo

cemo Jun 22, 2012

Sure,

http://jsfiddle.net/cemokoc/wVgdc/

@fat, @kvnxush I can not reopen, please reopen it.

cemo commented Jun 22, 2012

Sure,

http://jsfiddle.net/cemokoc/wVgdc/

@fat, @kvnxush I can not reopen, please reopen it.

@nyilmaz

This comment has been minimized.

Show comment
Hide comment
@nyilmaz

nyilmaz Jul 6, 2012

Have you added a patch related to this issue?

nyilmaz commented Jul 6, 2012

Have you added a patch related to this issue?

@cemo

This comment has been minimized.

Show comment
Hide comment

cemo commented Jul 6, 2012

@nyilmaz

Form here :)

#3936

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment