1

I have div which frequently appears and disappears based on users interaction on page. I want to trigger validation when the display property of element changes to display:none . What is the best way to do it?

NDM
  • 6,731
  • 3
  • 39
  • 52
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • possible duplicate of [Track display changes on HTML element with Javascript](http://stackoverflow.com/questions/16446541/track-display-changes-on-html-element-with-javascript) – Shadow The GPT Wizard Aug 05 '13 at 11:43
  • Most simple though not elegant way is using a timer running every millisecond and comparing the current state to the previous, triggering proper code when it's changed. Elegant way is described in the linked post. :) – Shadow The GPT Wizard Aug 05 '13 at 11:46
  • @ShadowWizard: It will be very annoying to show div repeatedly with a message that "you have not filled the form correctly". – Milind Anantwar Aug 05 '13 at 11:51
  • What? How is it relevant to what I wrote in the comment? – Shadow The GPT Wizard Aug 05 '13 at 11:53
  • 1
    @ShadowWizard: My bad. I haven't explained the whole situation. I show error message when datepicker object is hidden. Kind of summary when form is filled and datepicker is last field. How ever ill check whether the message is shown using some global variable. and your sudgestion will work .Thank i'll try implementing it now. – Milind Anantwar Aug 05 '13 at 11:57

2 Answers2

2

The DOM is a view. Things like "do something when this happens" is an event-like trigger, this belongs in your model.

Find all places where you set display: none; and replace it by a hookable process.

Halcyon
  • 57,230
  • 10
  • 89
  • 128
  • The code is coming from external js file where the operation of div display none is done for it. For making changes,i need to download it,modify and then add it to project. Isn't there any alternative without touching original js file. – Milind Anantwar Aug 05 '13 at 11:45
  • Maybe MutationObservers? – Halcyon Aug 05 '13 at 11:47
0

You may also try, since you are changing property from shown to hidden.

jquery's .hide(), has not only duration as parameter but on complete event also, by which you can do something when .hide() completes.

Optimus Prime
  • 6,817
  • 5
  • 32
  • 60