How to use fancybox, save values – Step 1

Fancybox Series

  1. How to use fancybox, save values – Step 1
  2. How to use fancybox, save values in separte popup page – Step 2

I use fancybox many times and I think it’s help is not so clear, so I preferred do a little series on how to use it

Fancybox is a javascript library similar to lightbox and many other library.
Fancybox is based to jquery, so is necessary to include jquery before.

It’s target is open a “popup”, it can be used to realize a picture gallery or to show some html part or a full html/aspx/php page.
In his site is possible to see how implement a simple gallery and how to configure the result popup

Usaully fancybox will be used to open a popup by click some link.
Here an example to that show how to display some html part in a popup and save some value to hidden field

popup show html part

<script type="text/javascript">
    $(document).ready(function () {
        $('#contrattoLink').fancybox();
    }
</script>
<div>
    <div style="display: none;">
        <div id="funcyBox_Contratto" style="padding: 10px; margin: 20px;">
            <div>Select something</div>
            <div style="margin: 7px 0px 5px 0px;">
                <asp:ListBox ID="ListBoxContratti" runat="server"></asp:ListBox>
            </div>
            <div style="text-align: right;">
                <input type="button" id="BtnContratto_Save" value="Salva" onclick="return saveFancyBoxListBox('<%=ListBoxContratti.ClientID%>', '<%=txtBoxContratto.ClientID%>', '<%=hiddenBoxContratto.ClientID%>');"/>
                <input id="BtnContratto_Cancel" onclick="$.fancybox.close();" type="button" value="Cancel" />
            </div>
        </div>
    </div>
</div>

<a id="contrattoLink" href="#funcyBox_Contratto">Open Popup</a></div>

In the previus code the important point are:
1) realyze a tag “<a>” with an id
2) at the document.ready obtain the object tab “<a>” and call .fancybox() method
3) Fancybox will display the value of href so fancybox will display the div with id=”funcyBox_Contratto”
Notice that the parent div of href value (“funcyBox_Contratto”) must be setted:

<div style="display:none;">

without this style, the div will be displayed in the page.

With this code the popup will be displayed, to save values to the parent page I realyzed a function called saveFancyBoxListBox.
This function need the id of the listbox that contain the values, the id of the parend textbox that will display the description and the id of hidden field where save the value selected.
Here the code:

function saveFancyBoxListBox(listBxId, txbxDestination, hiddenDestination) {
    // Obtain the text of the option selected
    var descrSelected = $("#" + listBxId + " option:selected").text();
    // obtain the value of the option selected
    var valueSelected = $("#" + listBxId).val();

    // Description set
    $("#" + txbxDestination).val(descrSelected);
    // Value set
    $("#" + hiddenDestination).val(valueSelected);

    $.fancybox.close();
}

Notice that in this function and in the previus “cancel button” the code to close fancybox is:

$.fancybox.close();

notice also that the button aren’t submit button or asp:Button

In this post I’ve explained how to open fancybox and disply some part of HTML, in addiction how to save some values and how to close fancybox by code.
I suggest to use this situation if the pase is short and not complex otherwise look the next post.

In the next post I’ll explain how use fancybox to open a .aspx page and how to save the values, it’s little different.

Annunci

Informazioni su Andrea Regoli

Project Manager .Net Developer WPF WP7 Asp.Net c# javascript ajax SQL sharepoint
Questa voce è stata pubblicata in Asp.Net, jquery, usability e contrassegnata con , , , , . Contrassegna il permalink.

2 risposte a How to use fancybox, save values – Step 1

  1. Rati Murty ha detto:

    I strayed on this place a couple weeks back and I absolutely cannot get enough!

    Please keep writing!

  2. Pingback: How to use fancybox, save values in separte popup page – Step 2 | Un programmatore tra i cordoli

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...