Raphael asp.net - Microsoft JScript 运行时错误：预期对象

Question

我是 Raphael 以及 asp.net 的新手。我正在尝试使用 asp.net 测试一个简单的 raphael 示例，但我不断收到以下错误：Microsoft JScript 运行时错误：预期对象

此错误出现在这一行：

var paper = Raphael("diii", 320, 200);

这是页面完整代码：

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master"AutoEventWireup="true" CodeFile="Lingua.aspx.cs" Inherits="Lingua" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <script type="text/javascript" src="Scripts/raphael.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
function createCircle() {
    var paper = Raphael("diii", 320, 200);
    var circle = paper.circle(50, 40, 10);
    cicle.attr("fill", "#f00");
    circle.attr("stroke", "#fff");
}
    </script>
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
    <asp:DropDownList ID="DropDownList1" runat="server">
    <asp:ListItem Value="ger">one</asp:ListItem>
    <asp:ListItem Value="ara">two</asp:ListItem>
     </asp:DropDownList>
    <asp:Button ID="Button1" runat="server" onClientClick="return createCircle();" 
    Text="Add" />
    <div id="diii"></div>
    </asp:Content>

如果我使用上面提到的行，也会出现同样的错误：

var paper = Raphael(10,50,320,200);

有谁知道问题出在哪里？

Answer 1

您的代码中有两件事需要修复

1. 检查引用的 Rafeal js 文件的名称。是 raphael-min.js 还是 raphael.js。
2. 在您的代码中，您将 circle 错误地输入为 cicle。更正它

您更正的代码在这里

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master"AutoEventWireup="true" CodeFile="Lingua.aspx.cs" Inherits="Lingua" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript" src="Scripts/raphael-min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
function createCircle() {
var paper = Raphael("diii", 320, 200);
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
}
</script>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="ger">one</asp:ListItem>
<asp:ListItem Value="ara">two</asp:ListItem>
 </asp:DropDownList>
<asp:Button ID="Button1" runat="server" onClientClick="return createCircle();" 
Text="Add" />
<div id="diii"></div>
</asp:Content>

如果您想查看客户端副作用，请不要从服务器端按钮触发事件。

Answer 2

听起来您的 raphael.js 没有加载，您是否使用浏览器中的开发人员工具检查所有脚本是否加载（没有 404 或 500）？

尝试直接在浏览器中访问脚本路径。

除此之外，我会建议以下内容；

1. 使用 jQuery 1.6.4（更好的支持、错误修复等）。
2. 在尝试调用页面之前，使用 jQuery 就绪函数确保页面已完成加载。

看起来您的脚本没有先完全加载，因此请将您的 js 代码替换为;

<script type="text/javascript">
    $(document).ready(function () {
        createCircle();
    });
    function createCircle() {
        var paper = Raphael("diii", 320, 200);
        var circle = paper.circle(50, 40, 10);
        cicle.attr("fill", "#f00");
        circle.attr("stroke", "#fff");
    }
</script>