Cant calls jquery function from asp.net code

Question

Im new for javascript / jQuery

I created a javascript / jQuery applet that I will use to display feedback from my asp.net application to the end user. Like a fancy tooltip that has slides and has different functionality, depending on whether the message has the status “error”, “warning” or “success”.

(I know that this was done before, and there are plugins and stuff to do this. I do not send this reason, I need a solution, I send a message because I need to understand what I'm doing wrong, and find out how call js / jq functions correctly.)

The asp.net codebehind method, which calls the jq function, uses RegisterClientScriptBlock (); The method works if I just put a warning ("anything"); instead of calling a popup function. If I create a dummy js function outside the document, it will work as well. But when I try to call the pop-up alert function, nothing happens. It does not even enter the function.

WITH#

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

This is because both your calling function and the actual function you are calling are bound to document load events.

RegisterClientScriptBlock script javascript, JQuery ; script, AlertPopup . javascript, , $(function(){});