Skip to content
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

bypass events to jQuery UI Datepicker #25

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

dpesch
Copy link

@dpesch dpesch commented Apr 25, 2016

The following patch allows to bypass events/focus to elements outside of an active modal. This happens when you use a jQuery UI Datepicker in a jqModal overlay with modal: true. Then the year could not be changed any more, because the select won't be able to get the focus.

I've found the problem and solution here: http://stackoverflow.com/a/18188375/2627857 and adopted it for jqModal.

We call our modal now like this:

$element.jqm({
          modal: true,
          blockMsgClass: 'ui-datepicker'
          }

which allows us to use the ui-datepicker inside the modal. It would be very kind if you could accept or implement it in jqModal. Sorry for my rusty english

…s in parents with .blockMsgClass

jQuery UI Datepicker creates its calendar at the end of the document (mostly
outside an active modal jqm dialog) which disallows to change the year (select)
in a modal jqm. The solution was found in
<http://stackoverflow.com/a/18188375/2627857>
and adopted for jqModal.

This allows two solutions:
1. add `blockMsg` css class to the datepicker div
2. or set the (new) jqm option `blockMsgClass` to '`ui-datepicker`'

Both settings allow the focus event for the year select to bypass the "Focus Examination Function".
@briceburg
Copy link
Owner

Thank you kindly for the patch! I will review and package a release ASAP
(hopefully this evening!)

On Mon, Apr 25, 2016, 3:52 AM Dominik Pesch notifications@github.com
wrote:

The following patch allows to bypass events/focus to elements outside of
an active modal. This happens when you use a jQuery UI Datepicker in a
jqModal overlay with modal: true. Then the year could not be changed any
more, because the select won't be able to get the focus.

I've found the problem and solution here:
http://stackoverflow.com/a/18188375/2627857 and adopted it for jqModal.

We call our modal now like this:

$element.jqm({
modal: true,
blockMsgClass: 'ui-datepicker'
}

which allows us to use the ui-datepicker inside the modal. It would be
very kind if you could accept or implement it in jqModal. Sorry for my

rusty english

You can view, comment on, or merge this pull request online at:

#25
Commit Summary

  • patched the "Focus Examination Function" to bypass events for
    elements in parents with .blockMsgClass
  • added the jQuery UI Datepicker example to the blockMsgClass comment

File Changes

Patch Links:


You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#25

@dpesch
Copy link
Author

dpesch commented Apr 26, 2016

Thanks for your answer. I've just fixed a little typo

@@ -356,6 +363,7 @@
* (Function) onShow - User defined callback function fired when modal opened.
* (Function) onHide - User defined callback function fired when modal closed.
* (Function) onLoad - User defined callback function fired when ajax content loads.
* (String) blockMsgClass- User defined exclusion parent class which are allowed to get focus even outside the active modal (like the jQueryUI datepicker)
Copy link
Owner

@briceburg briceburg Apr 27, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dpesch lets call this modalAllow instead of blockMsgClass -- and support (Mixed) instead of a (String) class. -- This way we can use .closest (https://api.jquery.com/closest/) which is faster and suppports a string match, an element, or collection.

e.g.

// original support
$(e).jqm({modal: true, modalAllow: '.blockMsg'});  

// or more flexible support
$(e).jqm({modal: true, modalAllow: '#blockMsg'});  
$(e).jqm({modal: true, modalAllow: document.getElementByID('blockMsg')});   //etc. then....

// override modal behavior if modalAllow is provided and matches target or an ancestor of target
if (activeModalOpts.modalAllow && $target.closest(activeModalOpts.modalAllow).length > 0) {
  return true;
}

@briceburg
Copy link
Owner

@dpesch Thanks again for this. I made a few suggestions. Let me know if you'd like to implement them -- or I can merge as-is and make corrections.

@briceburg
Copy link
Owner

@dpesch did you like the idea to call the property modalAllow instead of blockMsgClass, and to use the jquery .closest() property instead? #25 (comment)

I can merge your work and refactor to the above -- or let me know if you prefer to do the work. Thanks!

@dpesch
Copy link
Author

dpesch commented May 3, 2016

I very much apologize, I haven't seen your reactions. closest() should be work great and modalAllow should be much more understandable. Thanks for your support!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants