search

humaan / Modaal

An accessible dialog window library for all humans.
http://humaan.com/modaal/
MIT License
2.72k stars 183 forks source link

Wordpress Contact 7 #96

Closed uitlaber closed 6 years ago

uitlaber commented 7 years ago

I include form in modaal. But form not working.

danhumaan commented 7 years ago

Hi @uitlaber - You'll have to provide more details for us to be able to help as it could not be working for any number of reasons, and understanding if it is Modaal or something else is important.

Firstly are you sure it's Modaal, and secondly if so do you have a demo or preview we can look at?

uitlaber commented 7 years ago

@danhumaan Maybe plugin move my form html how it's work?

danhumaan commented 7 years ago

thanks for that - the plugin certainly using jquery's clone method and also removes the original markup from the DOM to avoid sort of conflict with the hidden contents. What i'm seeing in your example is a non working form even when the Modaal is not open. I manually revealed the form but it still doesn't appear to do anything.

It's a hard one to decipher for a few reasons, but from what I can see the issue does not appear to be Modaal related. The form appears to be trying to submit via ajax? Are you sure that is doing what you expect it to do? What I would suggest trying is to get the form working outside of the Modaal instance, then put it in an inline Modaal and test again. If that's still not working, temporarily move it out of the current page into a much simpler one and confirm that there isn't anything else in the page you shared conflicting and stopping things from working.

Modaal has been developed and tested using ajax forms in an open modaal so we can confirm that using the current version, this approach should be fine.

uitlaber commented 7 years ago

Outside modaal form is working. It is possible to add markup modaal html like bootstrap? And dont move or clone it?

maciekkus commented 6 years ago

Hi, I've encountered exactly the same problem as @uitlaber had. Please consider my PR. Cheers

ghost commented 6 years ago

@maciekkus thanks a lot! You're solution works fine, i think the problem is with duplicated Id's or other DOM reasons.

jQuery .detach() method fixes this problems, resume of oficial jQuery documentation:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

ghost commented 6 years ago

Please @danhumaan fix it in the new version or if you prefeer i can make a pull request of this fix.

danhumaan commented 6 years ago

hi @maciekkus and @cestarlich - are you able to provide more context on how you're using the forms which are not working using a jsfiddle or similar? We've developed a number of sites using Modaal with forms, in it's current state with no issue, and I would like to look deeper into the problem you're experiencing before we apply a fix.

I understand the detach works, which is great - thank you. But before we consider applying the pull request we would like to test the scenario that causes the bug to understand cause better and what we need to fix.

Thanks

danhumaan commented 6 years ago

Thanks to everyone who has contributed to this, and also thanks for your patience while we find time to dedicate to Modaal. Clone has been replaced with detach, tested and will be included in the next release.