My little world of sharing

Nov15

Open FancyBox on button click event using jquery

Fancybox is very useful javascript plugin to open popup window to display more data in different page or in the same page. It is quite flexible to work with and very user friendly. Recently in one of my Oracle APEX application I have wanted to implement fancy box on standard button instead of traditional hyperlink usage.

First of all make sure you have implemented jQuery and fancybox plugin into your application. I have done this in APEX 3.2 which does not include jQuery plugin and fancybox either even though jQuery has been added with full library in APEX 4.x.

I have included the following files in image directory

<script src="/i/themes/calm/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/i/themes/calm/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="/i/themes/calm/jquery.fancybox-1.3.4.css" type="text/css" />

You can download these plugins from jQuery and Fancybox website.

Now create a simple HTML button or template style button in APEX page like the image bellow –

Below is the property of this HTML button. Make sure you the Target is selected to URL and type javascript:void(); under the URL Section. 

Now lets assign the fancybox functionality to this button. Add the following javascript into the header section of the page.

$(function() {

    $('#ADD_DISTRICT').click(function() {

        $.fancybox({
            'width': '60%',
            'height': '80%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'href': 'f?p=&APP_ID.:218:&SESSION.::NO:218:P218_PERMIT_ID:&P211_PERMIT_ID.',
            'type': 'iframe',
            'onClosed': function() {
                window.location.href = "f?p=&APP_ID.:211:&SESSION.::&DEBUG.::";
            }

        });

        return false;
    });

});

In the above code, I have set the fancybox URL dynamically to use application_id, session, page and passing the parameter to another page 211. This will open the page in fancybox window. I have also included functionality to refresh the parent page when fancybox is closed. This will update the report in the parent page and display recent changes.

In action image –

6 Comments

  1. Storage Dayton

    Wonderful blog you have here but I was curious about if you knew of
    any message boards that cover the same topics talked
    about here? I’d really like to be a part of group where I can get advice from other knowledgeable people that share the same interest. If you have any suggestions, please let me know. Thanks!

  2. pruthvi

    it’s work

  3. Cairns Tours

    It’s difficult to find experienced people in this particular topic, however, you sound like you know what you’re talking about!

    Thanks

  4. shah jevin

    it is a good tutorial

  5. shah jevin

    from where i found the code of this tutorial can you mail me on shahjevin@gmail.com

  6. Pratiksha Mehta

    I am using fancybox for login but its not working .Which are the steps for login page as fancy box.Please

Leave a Comment

Your email address will not be published. Required fields are marked *