我是 javascript/Jquery 新手
我制作了一个 javascript/Jquery 小程序，我将用它来向最终用户显示来 self 的 ASP.NET 应用程序的反馈。就像一个滑入的花哨弹出窗口，根据消息的状态是“错误”、“警报”还是“成功”，具有不同的功能。
(我知道这之前已经做过，并且有插件和其他东西可以做到这一点。我不发布这个是因为我需要解决解决方案，我发布这个是因为我需要了解我做错了什么并学习如何正确解决调用我的 js/jq 函数。)
调用jq函数的asp.net代码隐藏方法使用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>
请您参考如下方法:
这是因为您的调用函数和您正在调用的实际函数都绑定(bind)到文档加载事件。
RegisterClientScriptBlock脚本放置在 javascript 处理程序之前，并且由于 JQuery 依次调用每个处理程序；当它注册后端生成的脚本时，AlertPopup功能尚未注册。因此，删除除事件处理程序之外的 javascript 函数，并将它们放在 $(function(){}); 之外。
