Fancybox Series
-
How to use fancybox, save values – Step 1
-
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:
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 initlyze 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 $(“#”) adn $(“#”).
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 $(“#”).
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 thisone:
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
