Question

I am working in asp.net web-form project which so far works fine with fancybox once user click on link it show a form as fancybox popup. But same doesn’t work when i implement URL Routing, Routing works fine images show, css works but it some how block fancybox popup and show the same form in the tab rather than as a traditional fancybox

I tried to change the path of fancybox script file but it doesn’t work.

Sample link without URL Routing

Same code of the page which has a Register link to show simple asp.net web-form in a fancybox popup.

I am using function to re-initialize the script as i am using update panel also in part of the page. I tried even removing the part of the script which reinitialized the fancybox but it still doesn’t work i also used ResolveClientUrl as suggested in some article that doesn’t work either.

I would appreciate help in this regard

Sample Code

<script src='<%=ResolveClientUrl("~/fancybox/jquery.fancybox-1.3.4.js")%>' type="text/javascript"></script>   
    <script src="../fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
    <link href="../fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //Code to Reinitialize Fancybox script when using update panel START
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        function InitializeRequest(sender, args) { }
        function EndRequest(sender, args) { InitMyFancyBox(); }
        $(document).ready(function () {
            InitMyFancyBox();
        });
        //Code to Reinitialize Fancybox script when using update panel END

        function InitMyFancyBox() {

            //Code for Fancybox Star
            $(document).ready(function () {
                $("a.iiframe").fancybox({
                    'scrolling': 'no',
                    'width': 700,
                    'height': 450,
                    'autoScale': false,
                    'transitionIn': 'none',
                    'transitionOut': 'none',
                    'hideOnOverlayClick': false,
                    'hideOnContentClick': false,
                    'type': 'iframe'
                });
            });
            //Code for Fancybox End
        }

</script>

HTML for link

<asp:Panel ID="pnlRegForm" runat="server" CssClass="ActivitiesDDetails" Visible="false">
     <asp:HyperLink ID="hylRegister" runat="server" CssClass="iiframe">Register Now!</asp:HyperLink>
</asp:Panel>

CodeBehind

pnlRegForm.Visible = true;
hylRegister.NavigateUrl = "ActivityRegistration.aspx?EventID=123&Activity=33&Language=" + Helper.GetQueryStringValue("Language");

Folder Structure
This is a multilingual website and i keep language related pages in different folders like in English, Arabic, Spanish etc

 /
 /fancybox
 /english
 /english/Activity.aspx (Lists all activities with link as SEO Friendly links)
 /english/ActivityDetails.aspx (Shows activity details & link for the fancybox popup)
 /english/ActivityRegistration.aspx (Web form to be shown as popup)

 /Spanish
 /arabic
 /css
 /someotherfolders

Everything works fine if i don’t use URL routing, URL routing is implemented it stops the fancybox i am not sure how to fix it as i tried to change script path also. I would appreciate help in this regard

Answer 1

I resolved the issue as it was not able to access the jquery file from master page. corrected the path using Page.ResolveUrl