我是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>
答案 0 :(得分:2)
这是因为您调用的函数和您正在调用的实际函数都绑定到文档加载事件。
RegisterClientScriptBlock
脚本放在javascript处理程序之前,因为JQuery依次调用每个处理程序;当它注册后端生成的脚本时,AlertPopup
函数尚未注册。因此,请移除事件处理程序以外的javascript函数,并将它们放在$(function(){});