bypass events to jQuery UI Datepicker

[dpesch]

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

[briceburg]

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 [email protected]
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

• M CHANGELOG.md
  https://github.com/briceburg/jqModal/pull/25/files#diff-0 (3)
• M jqModal.js
  https://github.com/briceburg/jqModal/pull/25/files#diff-1 (19)

Patch Links:

• https://github.com/briceburg/jqModal/pull/25.patch
• https://github.com/briceburg/jqModal/pull/25.diff

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

[dpesch]

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

[briceburg]

@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]

@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]

@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]

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!