2.0 breaks tabs in the modal after modal is reloaded about bootstrap-modal

[jschr]

First off.. thanks for actually trying it out, this helps a lot.

I'm unsure off the top of my head what the issue could be. I'm not sure if it's related to my 2.0 changes or perhaps a fix I made for this issue: #14

I'm looking at it now but if you have an easy way to show me an example that would be appreciated.

Thanks again.

[jschr]

So far I haven't been able to reproduce the issue. I'm loading in a tab set via an ajax call and they still work after opening the modal multiple times.

Hopefully you're able to provide and example of the issue.

[Yohn]

I just got done building an example, - http://skem9.com/tests/modal-test.php you can click on the "Send Goodie" on the left side, it opens the modal with the tabs you can click on to browse to a different gift to send, and then if you close the modal, and reopen it I'm not able to go through the tabs.. I'm using firefox 16.0.2

[jschr]

I still couldn't exactly reproduce your issue but after looking at your example it looks like it has something to do with modals not disposing properly. Looking at the DOM you will see two modal elements after clicking the 'Send Goodie' button. The tabs are looking for a tab-pane with an element id that now exists twice which is breaking them.

Can you try to latest version to see if that fixes the issue?

Thanks

[Yohn]

I just updated the code and Its still happening..
how I'm able to reproduce the issue -
click "Send Goodie"
modal opens up
click the backdrop to close it
click "Send Goodie" again
modal opens
click on "Skem9 Bar" or any of those links, and the tab doesnt come down..

I can see your point with the modal being in the dom twice, and that causing the conflict, but it does work with the older version.. I can change up my goodies.js plugin a bit to try to destroy it when its closed and see if that fixes it

[Yohn]

ok, I'm able to get it working now. It was definitely because it was in the DOM twice.. adding a separate class to the modal, and then removing it from the DOM at the top of the plugin did the trick

[jschr]

@Yohn I'm going to keep this open for a bit while I investigate it a little further. I still think it may not be disposing properly so I'd like to be sure it's not my code that is causing it as you did say it was working in the previous version.

[jschr]

@Yohn Is it possible that the old version is being included as well as the new one on your example page? I see that body as the class 'has-modal-container' which is removed in the new version.

Would it be possible to keep the example page in the previous broken state while I debug it?

[Yohn]

I just converted it back so you can investigate more
as for including the old version, I cant see how.. the older version is in /style/bs_plugins/ directory, and the v2 is in /tests/bs_plugins/ directory and I'm not including my compressed css or javascript files cause I had to change them to work with the upgrade

and then for the has-modal-container, I do still have <div class="modal-container"></div> in the source since we needed it in the previous version.. I can take that out if I dont need it..

[jschr]

It's not required anymore as well as with the modal-container element. I think I know what's going on now...

Everytime Goodies.show is called, a new modal is created and appended to body. When an element gets "modaled", I save off it's parent because it will be appended to a new element in order for the scrolling to work.

The destroy process will return the element to it's original state before it was "modaled" which means it will be appended back to body.

So, everytime Goodies.show is called it creates and appends a new modal to body but is never actually removed. I recommend either:

1. Don't append the modal to body at all, if there is no original parent element the modal will be removed.
2. Don't create a modal for each Goodies.show, instead have a reusable element that always exists on the body and just keep loading the contents into it and modal that.

There was still a bug in my destroy code that this issue thankfully caught. I also updated the documentation page to remove the comment in the AJAX demo that says make sure the modal is appended to DOM before calling .load because apparently that's not correct and is misleading.

Thanks for the help.

[Yohn]

awesome, thanks for the tips! I took out the $('body').append(div) and it seemed to work. I thought it needed to be on the page before it was called which is why I did that in the first place, so updating the docs would fix that misunderstanding

thanks for creating this plugin man! It saved me a lot of headaches lol