Raphael asp.net - Microsoft JScript runtime error: Object expected

Question

I am new to Raphael, as well as asp.net. I am trying to test a simple raphael example with asp.net, but I keep geting the following error: Microsoft JScript runtime error: Object expected

this error occurs in this line:

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

this is the page full code:

    <%@ 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>

The same error occurs if insted of the mentioned line above I use:

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

Does anyone know what is the problem?

Answer 1

There are two things which need to be fix in your code

1. Check what is name of referenced Rafeal js file. Is it raphael-min.js or raphael.js.
2. In your code you mistype circle as cicle. correct it

Your corrected code is here

    <%@ 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>

If you want to see client side effects then do not trigger event from server side button.

Answer 2

It sounds like your raphael.js is not loading up, have you used the developer tools in your browser to check that all the scripts load (no 404s or 500s)?

Try accessing the scripts at their paths direct in the browser too.

Other than that, I would suggest the following;

1. Use jQuery 1.6.4 (better supported, bug fixes etc).
2. Use the jQuery ready function to make sure the page has finished loading before you have tried to call it.

It does look like your script is not loading fully first, so replace your js code with;

<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>