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

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?

There are two things which need to be fix in your code
Check what is name of referenced Rafeal js file. Is it raphael-min.js or raphael.js.
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.

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;
Use jQuery 1.6.4 (better supported, bug fixes etc).
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>

Related

Using JS functions with Jquery in ASP Pages

I'm trying to run a JS function that uses JQuery to append information to the HTML of an ASP page and I just can't get it to work. I've made some research about it but maybe it's something a lot simpler.
%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Pruebas.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
</body>
</html>
more specifically this is the function im trying to run
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
im trying to call this function from the C# code behind the page like this
protected void Button1_Click(object sender, EventArgs e)
{
String p = "this is a message";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "myfunction", "add('" + p + "');", true);
}
If I try to run a JS function that produces a console log or an alert on the page it works fine. Maybe it is related to the Postback property in the ASP button?
If anyone can shed some light on this I will be thankful.
There is no any .auto-style1 class in your code. Please add a class in div to work this code.
<form id="form1" runat="server">
<div class="auto-style1">
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>

Jquery is not working with Master Page using ASP.NET C#

This code works fine in .aspx page no issues. but if i use master page then nothing works fine here,i tried placing the JQuery script in Master page, even then nothing is working. is there any thing setting need to be done here. Still not getting why info div is not loading count. Below is the link
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
I refer following blog also:
http://mwtech.blogspot.co.il/2009/04/2-ways-to-load-jquery-from-aspnet.html
MasterPage.master code:
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"> </script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx code
<script type="text/javascript">
var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';
var Editor2 = '#Editor2';
var Editor1InfoArea1 = '#Info1';
$(document).ready(function () {
TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
TrackCharacterCount(Editor2, Editor1CountLimit, Editor1InfoArea1);
});
function TrackCharacterCount(ctl, limit, info) {
var editor = $(ctl).contents().find('iframe').eq(2);
$(editor).load(function () {
var txt = $(this).contents().find('body').text();
$(info).html(txt.length); //set initial value
$(this).contents().keyup(function () {
var txt = $(this).contents().find('body').text();
if (txt.length > limit)
$(info).html(txt.length).css("color", "red");
else
$(info).html(txt.length).css("color", "");
});
});
}
function ValidateEditor1Length(source, args) {
var editor = $(Editor1).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
function ValidateEditor1Length1(source, args) {
var editor = $(Editor2).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div id="Info">Info</div>
<%-- <cc1:Editor ID="Editor1" runat="server" />--%>
<cc1:Editor ID="Editor1" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="Editor1" ClientValidationFunction="ValidateEditor1Length" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
<div id="Info1">Info</div>
<%-- <cc1:Editor ID="Editor2" runat="server" />--%>
<cc1:Editor ID="Editor2" runat="server" />
<asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="Editor2" ClientValidationFunction="ValidateEditor1Length1" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
Thank you.
There should be a file called jquery-1.3.2.js and/or jquery-1.3.2.min.js.
You need to reference one of those two. The VSdoc file you are using is just for intellisense purposes in older versions of Visual Studio.
Your Script tag should look like this:
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
In addition you might want to update to a newer verison of JQuery. According to Jquery.com/download, the uptodate-versions are 1.11.3 and 2.1.4.
Inside visual Studio you can also use the package manager console to install a new version of Jquery using the following command(s):
Install-Package jQuery
Update-Package jQuery

JavaScript Inside UpdatePanle

I can't get this working. I want to fadeout a div after a postback. This div is inside an updatepanel. I understand that because of updatepanel it will be a partial refresh. But within this context, how can i still use fadeout?
<asp:Content ID="Content1" ContentPlaceHolderID="content_head" runat="Server">
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div_msg").delay(1500).fadeOut("slow");
});
</script>
</asp:Content>
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
<ContentTemplate>
<asp:Panel ID="pnl_msgs" runat="server" Visible="false">
<div id="div_msg">
<asp:Label ID="lbl_msg" runat="server" Text="Label"></asp:Label>
</div>
</asp:Panel>
<asp:Button ID="but_status_new" runat="server" Text="New" CssClass="new-button-flat" onclick="but_status_new_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
I am not writing any js code in but_status_new_Click function.
Instead document.ready try using function pageLoad since ASP.NET AJAX has its own page lifecycle:
function pageLoad() {
$("#div_msg").delay(1500).fadeOut("slow");
}
Oh and move reference to jQuery to ScriptManager itself
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="js/jquery-1.6.2.min.js" />
</Scripts>
</asp:ScriptManager>

how do i add a script to an aspx form in visual web developer

I've searched the net and watched videos on this but no one really helps. What I want to do is add an already typed java script file to my aspx form in Visual web developer.
All tell me that i should just add:
<html>
<head>
<title><title>
<script src="JScript.js" type="text/javascript"></script>
</head>
</html>
but....
in an aspx form theres no <head> or <body> tags only:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" >
</asp:Content>
If even possible to add java script to this aspx form please give me the code or help me do this right.
I have a picture and i want a button to change the picture to the next one in the gallery on my web page
Edit 1
Here is the html code to the buttons and picture
<tr>
<td> <asp:Button ID="Button1" runat="server" Text="Prev" OnClientClick="init();"/> </td>
<td> <img ID="pic" alt="" src="010.JPG" runat="server" width="200" height="200" /> </td>
<td> <asp:Button ID="Button2" runat="server" Text="Next" OnClientClick="init();"/> </td>
</tr>
And here is the code to the javascript init()
var imagePath = new Array();
var imageIndex = 0;
function init(){
addPath("Bell.jpg");
addPath("Dads.png");
getImagePath(0);
}
function addPath(path){
var index = imagePath.length;
imagePath[index++] = path;
}
function getImagePath(index){
var length = imagePath.length;
if(index <= length){
if(index >= 0){
document.getElementById("pic").src = imagePath[index];
document.getElementById("pic").alt = imagePath[index];
imageIndex = index;
}
} else {
document.getElementById("pic").src = "DOES NOT EXIST";
document.getElementById("pic").alt = "DOES NOT EXIST";
}
}
it doesn't appear to be calling the javascript init() method however
The above is now solved thank you
BUT Edit 2
the init function needs to run when you load the page before the buttons will know where to point the image source to. How can I call the init() when the page loads up?
You need to put here
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" />
<script src="JScript.js" type="text/javascript"></script>
</asp:Content>
Edit 1
function getImagePath(index){
var length = imagePath.length;
if(index <= length){
if(index >= 0){
document.getElementById("<%= pic.ClientID %>").src = imagePath[index];
document.getElementById("<%= pic.ClientID %>").alt = imagePath[index];
imageIndex = index;
}
} else {
document.getElementById("<%= pic.ClientID %>").src = "DOES NOT EXIST";
document.getElementById("<%= pic.ClientID %>").alt = "DOES NOT EXIST";
}
}
Also
function init(){
addPath("Bell.jpg");
addPath("Dads.png");
getImagePath(0);
return false;
}
Just put the script in your Content.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" />
<script src="JScript.js" type="text/javascript"></script>
</asp:Content>

how to show loading image when tab content is loading?

I have a tabcontainer with three panel, inside that I have gridview. When I user click on the tab the gridview is loaded. I want untill the gridview is loading, an img gif should be shown, and should got hide after the grid loads completely.
For that I had written code as:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="example.aspx.cs"
Inherits="example" %>
<%# Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript">
$(function() {
$("#mytab").mytab({
ajaxOptions: {
type: 'POST',
data: postData,
beforeSend: function() {
$('#loader').show();
},
complete: function() {
$("#loader").hide();
}
}
});
});
</script>
</head>
<body>
<form id="form2" runat="server">
<iframe id="iFrame2" runat="server" height="2px" width="2px"></iframe>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div>
<asp:ScriptManager ID="ScriptManager2" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
</div>
<asp:Panel ID="loader" runat="server" Wrap="true" CssClass="body" >
<table cellpadding="5" cellspacing="5" style="width:322px; height:245px; border:1">
<tr>
<td style="width:322px; height:245px; border:1">
<asp:Image ID="Image1" Width="322px" Height="245px" BorderWidth="0" runat="server" ImageUrl="Images/loading.gif" />
</td>
</tr>
</table>
</asp:Panel>
<cc1:TabContainer ID="mytab" runat="server" Width="100%"
Visible="true" AutoPostBack="true" >
<cc1:TabPanel runat="server" HeaderText="application" ID="TabPanel1"
>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<table class="outline-tabs">
<tr class="pagination-row">
</tr>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" CssClass="tblGrid" AllowSorting="True">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</cc1:TabPanel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
But when I run the application I get a error as:
Microsoft JScript runtime error: Object expected
What is wrong with the above code, any file is missing, since I'm using jquery.
Try this instead of your ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#mytab").mytab({
ajaxOptions: {
type: 'POST',
data: postData,
beforeSend: function() {
$('#loader').show();
},
success: function(data) {
console.dir(data)
},
error: function(error) {
console.dir('ERROR: ' + error)
}
complete: function() {
$("#loader").hide();
}
}
});
})
</script>
with the console.dir(); you trace your incoming data-object in chrome or firebug. ie isnt a good browser for development.
hope this helps.
Ah, I see. The examplecode uses tabs instead of mytab. This means that the example code uses jquery-ui (you find it here: http://jqueryui.com/).
For tabs you find the docs here (http://jqueryui.com/demos/tabs/ klick on the link "view source").
So have a look in your compiled source with firebug or webinspector and look for jquery, jquery-ui and all source-files like images and css for jquery-ui.
If not implemented -> get the source.
After this you should be able to run your code.
For more help please post your compiled(!) source code.

Categories