Fancybox is not showing from Server side call

Question

I have to show fancybox from server side. I have written a javascript method and called that method in ScriptManager.RegisterStartUpScript in asp.net button click

Here is my code behind

 protected void btnSaveAndAddConcern_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "fancybox", "callFancyBox();", true);
    }

and this is my javascript function

 function callFancyBox() {
            $("#fancybox").attr("href", "/Agent/AddCampConcernPopup.aspx").fancybox({
                  'width': 550,
                  'height': 200,
                  'type': 'iframe',
                  'title': ''
              }).trigger("click");
          }

function is called but fancybox does not open. This javascript function works fine when i call it from client side. but when i call it from code behind fancybox never shows. I inspect the errors in console and it shows this error after calling from server side

"Uncaught TypeError: Cannot read property 'hide' of undefined"

I have jquery 1.10.2 and fancybox version 1.3.4

Again, fancybox is working perfectly when i call it from client side but issue is with server side calling.

Answer 1

It would be better if you add

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ajax", "callFancyBox()", true);

in place of

ScriptManager.RegisterStartupScript(this, this.GetType(), "fancybox", "callFancyBox();", true);

Also Add by class not ID so you can pass one function to many as shown below

 $(document).ready(function () { //this line you have to add for initiate script so it will solve your undefined error
            $('.fancybox').fancybox({
                type: 'iframe'                   
            });
 }

Answer 2

Use ScriptManager.RegisterClientScriptBlock instead of ScriptManager.RegisterStartupScript.

Try this

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "fancybox", "callFancyBox();", true);