Cant invoke jquery function from asp.net code behind

Question

Im new to javascript/Jquery

I have made a javascript/Jquery applet witch i will use to display feedback from my asp.net application to the end user. Like a fancy pop up that slides in and have different functionality depending if the message is of status "error" "alert" or "success".

(I know this has been done before and there are plug ins and stuff to do it. Im not posting this cause i need the solution solved, im posting because i need to understand what i am doing wrong and learn how to properly invoke my js/jq functions.)

The asp.net codebehind method that invokes the jq function uses the RegisterClientScriptBlock(); The method works if i just put alert("whatever"); instead of invoking the pop up function. If i make a dummy js function outside of the document ready it also works. But when i try and invoke my pop up alert function nothing happens. It doesnt even go inside the function.

C#

public void SendPopUp()
{
string key = Guid.NewGuid().ToString();
StringBuilder javascript = new StringBuilder();

javascript.Append("$(document).ready(function() {");
javascript.Append(" AlertPopUp('Horror', 'Oh nooo, an error is simulated!', 'error');");

 javascript.Append(" });");

// Gets the executing web page 
Page page = HttpContext.Current.CurrentHandler as Page;


ScriptManager sm = ScriptManager.GetCurrent(page);


if (sm != null && sm.IsInAsyncPostBack)
{
    ScriptManager.RegisterClientScriptBlock(page, typeof(Page), key,javascript.ToString() , true);
}
else
{
    page.ClientScript.RegisterClientScriptBlock(this.GetType(), key,javascript.ToString() , true);
}


}

JAVASCRIPT

<script type="text/javascript">


    /*
    ------------USER FEEDBACK POPUP-------------
    ---------Lautaro Arino @Viatel 2011---------
    --------------------------------------------
    */




    $(function () {

        // ID of DIVS
        var popUpId = "AlertPopUp";
        var popUpCollapseId = "AlertCollapse";
        var popUpDisbandId = "AlertDisband";
        var titleId = "AlertTitle";
        var messageId = "AlertMessage";
        var bodyId = "AlertBody";
        var headerId = "AlertHeader";
        var imageId = "AlertImage";

        // Get the div objects
        var PopUpBox = $('#' + popUpId);
        var CollapseDiv = $('#' + popUpCollapseId);
        var DisbandDiv = $('#' + popUpDisbandId);
        var TitleDiv = $("#" + titleId);
        var MessageDiv = $("#" + messageId);
        var Image = $('#' + imageId);

        //Paths to error images
        var successImagePath = "images/okej.jpg";
        var alertImagePath = "images/alert.jpg";
        var errorImagePath = "images/error.jpg";
        var rootPathFromThisFile = "../../";

        //parameters
        var anmationSpeed = 300; //milliseconds. speed of the popup showing up, expanding and collapsing
        var fadOutSpeed = 5000; //milliseconds. speed of success messages fading out
        var popupWidth = PopUpBox.width();
        var collapseWidth = DisbandDiv.width() + Image.width();



        //EVENT HANDLERS 
        DisbandDiv.click(function () {
            disbandPoPUp();
        });


        PopUpBox.click(function () {

            if (state == "expanded") {
                collapse();

            } else if (state == "collapsed") {
                expand();
            }
        });

        //testbutton
        $('#btnerror').click(function () {

            AlertPopUp('Jättehemskt!', 'Oh nooo, an error is simulated!', 'error');
        });

        $('#btnalert').click(function () {
            AlertPopUp('Glöm ej. ', 'Glöm ej att köpa mjölk', 'alert');
        });

        $('#btnsuccess').click(function () {
            AlertPopUp('Woho!', 'Någonting har gått som det ska!', 'success');
        });




        //DISBAND
        function disbandPoPUp() {
            // alert("disbanding");
            PopUpBox.stop();
            PopUpBox.css('display', 'none');
            state = "off";
        };

        //COLLAPSE
        function collapse() {
            //  alert("collapsing");
            PopUpBox.animate({ "right": -popupWidth + collapseWidth + 10 + "px" }, 300);
            state = "collapsed";
        };

        //EXPAND 
        function expand() {
            //   alert("expanding");
            PopUpBox.animate({ "right": "-5px" }, 300);
            state = "expanded";
        };





        //AlertPopUp('Jättehemskt!', 'Oh nooo, an error is simulated!', 'error');

        function AlertPopUp(title, message, type) {
          //  alert("function invoked");

            //RESET POSITION
            PopUpBox.css('right', -popupWidth + "px");
            PopUpBox.css('opacity', '1.0');
            PopUpBox.stop(); // in case there is an animation or fade going on

            //SET MESSAGE

            TitleDiv.text(title);
            MessageDiv.text(message);



            // SET POP UP TYPE AND DISPLAY
            if (type == "success") {
                // SUCESS
                setBorderAndImage("green", successImagePath);
                setFadeOut();

            } else if (type == "alert") {
                //ALERT
                setBorderAndImage("orange", alertImagePath);
                displayPopUpExpanded();

            } else {
                //ERROR

                setBorderAndImage("red", errorImagePath);
                displayPopUpExpanded();
            }


            //DISPLAY EXPANDED
            function displayPopUpExpanded() {
                PopUpBox.css('display', 'block');
                expand();
            }



            //DISPLAY COLLAPSED
            function displayPopUpCollapsed() {
                PopUpBox.css('display', 'block');
                collapse();
            }


            function setFadeOut() {
                PopUpBox.css('display', 'block');
                PopUpBox.animate({ "right": "-5px" }, anmationSpeed,
                         function () {
                             state = "expanded";
                             startFadeKill();
                         }
                         );


                function startFadeKill() {
                    PopUpBox.fadeTo(fadOutSpeed, 1.0, function () {//this is just a delay before starting to fade out.
                        PopUpBox.fadeTo(fadOutSpeed, 0.0, function () {
                            //  alert("fade done");
                            disbandPoPUp();
                        });
                    });


                    PopUpBox.mouseenter(function () {
                        //alert("mouse");
                        PopUpBox.stop();
                        PopUpBox.fadeTo("fast", 1.0);
                    });
                }
            }


            //Set border color and image
            function setBorderAndImage(color, imagePath) {
                PopUpBox.css("border-color", color);
                DisbandDiv.css("background-color", color);

                //set image path
                Image.attr("src", rootPathFromThisFile + imagePath);
                }
        };



    })



</script>

Answer 1

It's because both your calling function and the the actual function you're calling are bound to the document load events.

The RegisterClientScriptBlock script is placed before the javascript handler, and since JQuery calls each handler in turn; when it registers the backend generated script, the AlertPopup function has not yet been registered. So remove the javascript functions other than the event handlers and place them outside $(function(){});