无法从asp.net代码后面调用jquery函数

时间:2011-10-06 08:57:45

标签: jquery asp.net

我是javascript / Jquery的新手

我制作了一个javascript / Jquery applet,我将用它来显示我的asp.net应用程序给最终用户的反馈。就像幻想弹出窗口滑入并具有不同的功能,具体取决于消息的状态是“错误”,“警告”还是“成功”。

(我知道之前已经完成了这项工作并且有插件和东西要做。我不发布这个原因我需要解决方案解决,我发布因为我需要了解我做错了什么并学习如何正确调用我的js / jq函数。)

调用jq函数的asp.net codebehind方法使用RegisterClientScriptBlock();如果我只是发出警报(“无论什么”),该方法有效;而不是调用弹出功能。如果我在文档之外创建一个虚拟js函数,它也可以工作。但是,当我尝试调用我的弹出警报功能时,没有任何反应。它甚至没有进入函数内部。

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>

1 个答案:

答案 0 :(得分:2)

这是因为您调用的函数和您正在调用的实际函数都绑定到文档加载事件。

RegisterClientScriptBlock脚本放在javascript处理程序之前,因为JQuery依次调用每个处理程序;当它注册后端生成的脚本时,AlertPopup函数尚未注册。因此,请移除事件处理程序以外的javascript函数,并将它们放在$(function(){});

之外