wrong DOM element re-injection after closing fancybox #103

Closed
stryju opened this Issue Jan 18, 2012 · 15 comments

Projects

None yet

6 participants

@stryju

when loading DOM element to fancybox, it's being relocated to it, but when u close the fancybox, the element doesn't go back on it's place, just goes directly to the body

@fancyapps
Owner

As it gets hidden, it does not matter where it goes. Does it?

@stryju

it does

example: grab a part of form, then select the checkboxes and close it - it should get back to form, so i can submit my data correctly

it used to work great in fancybox 1.x ;-)

@stryju

just put a placeholder with id #fancybox-placeholder after element, grab element, then on close place it after/before the placeholder and remove it

@fancyapps
Owner

Yes, v1.x used to work like that. I simplified this when rewrote the code, but looks like I`ll have to take this feature back :)

You can for now put those checkboxes back to place on form submit.

@stryju

i could fix it and make a pull req - works out for u?

@chapati23

also have this problem. i have multiple small articles which behave like a gallery.
i open fancybox with .article-1 in it. with a keypress-event i switch to article-2 via $.fancybox({ contents: $('.article-2') })

this logic of course depends on the proper dom-order. because if i now wanna go back to article-1 it's not there anymore

@fancyapps
Owner

@stryju well, maybe, this is not on my priority list.

@philip-paetz you can use like $.fancybox({content : $('.article-2'), type : 'inline'}); in order to preserve element. do you really need to have the same dom-order? I would like to see your example

@chapati23

site's not online yet unfortunately, the problem with type: inline is, i end up with duplicate ID's after changing the content because a duplicate of the element ends up at the end of the DOM

@fancyapps
Owner

fancybox is not duplicating elements, it is moving them

@fancyapps fancyapps closed this Feb 3, 2012
@fancyapps fancyapps reopened this Feb 3, 2012
@chapati23
@djpentz

My problem is that I dynamically load a table with the hidden elements that are then shown in fancybox. When the user makes their edits, they are saved to the server, and the table is reloaded dynamically, this time with the edits. Now there are two hidden elements with the same ID. The one that fancybox closed and hid, and the new one reloaded dynamically in the table. When I then try and redisplay that element with fancybox, it creates prev-next links in the fancybox as it should do if it were handed two elements.

In my opinion it would be best if fancybox placed a hidden marker at the spot it removes the elements, and then places it back there when fancybox is closed. I don't really have an alternative hackaround other than changing to pull the elements via ajax instead of embedding them in the table. That will work, but will make the application appear less 'snappy'.

@fancyapps
Owner
@djpentz

Yes, or another idea would be to mark all hidden elements with a special css class marker and remove any existing hidden elements before reloading the table. My problem with this is that it is extra work I am doing because of an unexpected (and some would say, undesirable) side effect of using the Fancybox plugin, when really, the plugin should work for me - not the other way around. In other words, there are 2 choices 1) one plugin gets fixed once so all N customers don't have to work around it, or 2) all N customers continue to work around one plugins side effects.

To me, option 1 is the more logical one. Just saying. For now though, my workaround will be to remove all hidden divs before reloading the table.

@dlibanori

I think if you open and close a modal, you have to get the same DOM.

@JFKDIAZ

I guess as a workaround, we could catch (beforeLoad) the parent element of the inline content so we can return the inline content to its original position afterClose like :

   beforeLoad: function(){
    inlineTarget = this.href;
    parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
    $(inlineTarget).parent(parentNodename).addClass("returnTo");
   },
   afterClose: function(){
    $(inlineTarget).appendTo(".returnTo");
    $(".returnTo").removeClass("returnTo");
   }

declaring previously the variables var inlineTarget, parentNodename;

I guess it should work for whatever parent element (div, form, etc) we used.

See demo here http://www.picssel.com/playground/jquery/inlineContentDOMposition_27jul12.html

@fancyapps fancyapps closed this Aug 21, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment