CODEWITHSUNDEEP
jqueryfancybox
user1482261
user1482261

Reputation: 191

Update content when fancybox already open

I call fancybox 2 on afterLoad event every time after $.post method

$.post ... function(html){
$.fancybox({afterLoad:function(){this.content = html;}});
}

It works fine when Fancybox is closed, but when I make this request one more time from already opened Fancybox I get error "Content cannot be loaded"!

I've trued beforeLoad, beforeShow and some other events, but no luck. How can I make it work?

Upvotes: 1

Views: 10235

Answers (4)

João Augusto
João Augusto

Reputation: 61

For fancybox 3, come up with this solution:

$(`.foo`).on('click', function(e) {
    e.preventDefault();
    const self = $(this);

    $.fancybox.open({
        type: 'ajax',
        src: self.attr('href'),
        opts: {
            afterShow: function(instance, current) {
                $('.bar').on('click', function(e) {
                    e.preventDefault();
                    instance.showLoading(current);

                    $.ajax({
                        type: 'GET',
                        url: $(this).attr('href'),
                        success: function(content) {
                            instance.hideLoading(current);
                            instance.setContent(current, content);
                            instance.update();
                        }
                    });

                });
            }
        }
    });
});

Upvotes: 2

Node Programmer
Node Programmer

Reputation: 103

in case if you are not using iframe. You can try following

jQuery.fancybox({'content' : html});

Upvotes: 2

nachtigall
nachtigall

Reputation: 2497

To load new content into an already opened fancybox, you can do the following. This way, the fancybox will not close in between updating the fancybox window with the new content:

// is fancybox already popped up?
fancyboxIsOpen: false,

openFancyBox: function (urlToBeLoaded) {
    if (urlToBeLoaded === null) {
        this.closeFancyBox();
    } else {
        if (this.fancyboxIsOpen) {
            this.openInAlreadyOpenedFancyBox(urlToBeLoaded);
        } else {
            this.openFirstFancyBox(urlToBeLoaded);                
        }
    } 
}, 

openFirstFancyBox: function (urlToBeLoaded) {
    var that = this;
    $.fancybox.open({
        type: 'ajax',
        href: urlToBeLoaded,
        afterClose: function() {
            this.openFancyBox(null);
            return true;
        },
        afterShow : function() {
            that.fancyboxIsOpen = true;
            var ahref = jQuery(".fancybox");
            ahref.on("click", function(event){
                //stop the click action, we do not want to load the href in the window
                event.preventDefault();         
                var currentTarget = $(event.currentTarget);
                var urlToBeLoaded = that.getFancyBoxId(currentTarget);
            });     
        }
    });         
}, // end openFirstFancyBox




openInAlreadyOpenedFancyBox: function (urlToBeLoaded) {
    var that = this;

    $.fancybox.showLoading(); // show loading icon
    $.ajax({
        type: "GET",
        url: urlToBeLoaded,
        success : function(content, textStatus, jqXHR) {
            $.fancybox.hideLoading();                        
            jQuery(".fancybox-inner").html(content);
            $.fancybox.update();
        },
        error : function(xhr, status) {
            $.fancybox.hideLoading();
            return false;
        }
    });
},

closeFancyBox: function () {
    this.fancyboxIsOpen = false;
    $.fancybox.close();
},

getFancyBoxId: function (currentTarget) {
    var id = currentTarget.attr("href");  
    return id;        
},

The important stuff is jQuery(".fancybox-inner").html(content); to replace the content of the current fancybox with the new content, and optionally $.fancybox.update(); to resize the window according to the new content.

Upvotes: 2

Manuel van Rijn
Manuel van Rijn

Reputation: 10315

Don't you just want to do something like this?

$.post ... function(html){
    $.fancybox( html );
}

Upvotes: 2

Related Questions