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

Fancybox Series

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

In the previus article I showed how to use fancybox to open a popup that will display some html inside the current page.
How to use fancybox, save values – Step 1

I don’t like use fancybox in that way, because the result is a very caotic page.

The solution I’ll show now is realyze a separte page .aspx and display it inside the popup.
With this approuch the code necessary to fill the control with data will be move from the .cs of the main page to the separate .cs of the popup.
Also the html will be move to the .aspx page, so it’s more easy to design the popup page.

With this approach we have to write the necessary code to load the data on page_load like a usual page.

We can realyze this in fancybox by 2 mode:

  • default
  • iframe

Now I show how to use the default mode and the mode I suggest.

Here the exactly point to port the example of the previus article to a separate popup

1) code in the main .aspx page:

<script type="text/javascript">
    $(document).ready(function () {
        $('#contrattoLink').fancybox();
    });
</script>

<a id="contrattoLink" href="popupPage.aspx">Open Popup</a></div>

Notice that I removed all the html of the popup and now the href of link doesn’t point to an element id but to the page we have created before.
To initialize fancybox I used it like before on 3rd line

2) Create a new .aspx page “popupPage.aspx” and put this code:

<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 saveFancyBoxListBoxTmp('<%=ListBoxContratti.ClientID%>');"/>
        <input id="BtnContratto_Cancel" onclick="$.fancybox.close();" type="button" value="Cancel" />
    </div>
</div>

Obviously on the page load specify the code necessary to load the items

Put this code on the popupPage.aspx

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

This code will be put in the popup page and it’s target is obtain the description and the value of oure listbox, combobox, or textbox.
If we want we can also avoid to pass the id as parameter and put it directly in code like this

function saveFancyBoxListBoxTmp() {
    // Obtain the text of the option selected
    var descrSelected = $("#<%=ListBoxContratti.ClientID%> option:selected").text();
    // obtain the value of the option selected
    var valueSelected = $("#<%=ListBoxContratti.ClientID%>").val();
    
    saveFancyBoxListBox(valueSelected, descrSelected);
}

...

<input type="button" id="BtnContratto_Save" value="Salva" onclick="return saveFancyBoxListBoxTmp();"/>

this is a your decision, I like this one because it’s more clean for me but there is no difference between the two solution.

Now we need to analyze: saveFancyBoxListBox

3) put the saveFancyBoxListBox on the main page (not the popup) defined as this:

function saveFancyBoxListBox(valueSelected , descrSelected ) {
    // Description set
    $("#<%=txtBoxContratto.ClientID%>").val(descrSelected);
    // Value set
    $("#<%=hiddenBoxContratto.ClientID%>").val(valueSelected);

    $.fancybox.close();
}

Like before we set the value on the right place.

That’s all code.
Now we can try to analyze it more in detail:
On the main page we initylize a link as fancybox to a separate aspx page.
Then we define the function saveFancyBoxListBox to store the value selected.
We can’t place it on the popup page because It can’t solve $(“#<%=txtBoxContratto.ClientID%>”) adn $(“#<%=hiddenBoxContratto.ClientID%>”).

Then we realyze the html of the popup and write the function to get the value to pass to parent windows.
Like before, we can’t do it on the main page because the main page don’t know $(“#<%=ListBoxContratti.ClientID%>”).

Using fancybox as default and not with iframe it’s possibile see all function and variable defined in the main page!!!
Other solution to store the result in the main page is this one:

on MainPage.aspx

var txtBoxContrattoID;
var hiddenBoxContratto;
$.ready(
   function()
   {
       txtBoxContrattoID = $("#<%=txtBoxContratto.ClientID%>");
       hiddenBoxContratto = $("#<%=hiddenBoxContratto.ClientID%>");
   }
);

on PopupPage.aspx

function saveFancyBoxListBoxTmp() {
    // Obtain the text of the option selected
    var descrSelected = $("#<%=ListBoxContratti.ClientID%> option:selected").text();
    // obtain the value of the option selected
    var valueSelected = $("#<%=ListBoxContratti.ClientID%>").val();
    
    // use the global variable containing the right Id
    // Description set
    $("#txtBoxContrattoID").val(descrSelected);
    // Value set
    $("#hiddenBoxContratto").val(valueSelected);
}

This solution permit to write all the js code to save the values in the popup and make the main page clean.
I don’t like this because it introduces many global variable, and in addition looking only in the code of the main page, is not possible understand who write the hidden field or the textbox.

Choose the solution you prefer.

In next post I’ll analyze how to use fancybox and iframe

Have a nice code

Update 2013-08-23

I’ve write a sample project with 3 sample, inline, ajax or iframe, to demostrate these post.

FancyBox sample code

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, c#, jquery e contrassegnata con , , , , . Contrassegna il permalink.

4 risposte a How to use fancybox, save values in separte popup page – Step 2

  1. MyName ha detto:

    Can you please give download link for sample: “default and not with iframe ”
    with parent and popup page.
    Thank you!

  2. Pingback: How to use fancybox, save values – Step 1 | 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...