Using Javascripts

Boogle · 10-19-2007, 02:48 AM

Hi,

This is a general wandering...ment (friends, Ross Gellar)...

Basically I always tried to steer away from Javascript before now as I always thought, "what if it's disabled, though?" but now i'm making slightly more complicated sites I am beginning to understand the need for more client-side interaction and less post-back roundtrips.

BUT i keep coming across one problem: everytime I create a Javascript function and try to add it to an event, it always tells me, "xxx.aspx does not contain a definition for MyFunction()"

this is... well i won't be profane but i don't just get it!

Example:

Code:


<script language="JavaScript" type="text/JavaScript">

function myFunction()
{
if(myDropDown.value == 'x')
{
alert('please select y');
}
}

</script>

<asp:DropDownList id="serviceDropDown" runat="server" onTextChanged="MyFunction()" />

this would emit error: xxx.aspx does not contain a definition for "MyFunction()"

Now i know people might say, "register the script" but then as i udnerstand it it requires a pageload event anyway so that defeats the whole object.

Please guys if i'm wrong in any of this point me out because this is only suppoorted by my experience and i've not got the time i'd like to properly assess/research the full situation!

Please could someone point me out in the right direction to implementing more client-side interaction and tell me where i'm getting confused in using JavaScripts?

Thanks a lot, guys
Boog's

Dan Williamson · 10-19-2007, 03:48 AM

Ok first of all Javascript is both a blessing and a crime, people can use obtrusive javascript, looping through pointless spam and dispicable code, but for now the unobtrusive and well structured Javascript can be brilliant.

-- Content - HTML
-- Presentation - CSS
-- Behaviour - Javascript

Thats generally what chapter one of Kevin Yank's Simply Javascript is about, or chapter 2 or 3 not sure lol.

I generally don't have an awful lot of experience in Javascript, but I also know nothing of ASP, my next project C#/ASP.NET but alas thats in the distant future.

Have you tried to make sure that the function actually works.

Code:

// JavaScript Document

function myFunction() {
	if(myDropDown.value == "x")
}
	alert("Please select Y");
}

and then perhaps if I remember correctly use a dropdown with a value of X and then run it with a bodyOnload or perhaps if you need to run anything before hand a seperate div.

Code:

<div id="test01" onload="myFunction">
</div>

Not entirely sure if thats how you call it in a DIV or if you need the ().

Boogle · 10-19-2007, 03:52 AM

The code was just a quick example; i wrote it out on the fly there rather than copy & paste as i just wanted to demonstrate the problem that whether the function works or not the compilation error always returns, " not definition for 'Myfunction()'"

I have scripts working for displaying different stuff in Divs...Thanks for the help, though, Dan it's appreciated!

Boog's

Costin Trifan · 10-19-2007, 08:46 AM

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 runat="server">
    <title>Test Page</title>

    <script type="text/javascript">

// FOR THE ASP.NET "DROPDOWNLIST" CONTROL

function onChange_ServerCtl()
{
    dropdown = document.getElementById("aspDropDownList");
    
    var sIndex  = dropdown.selectedIndex;
    var sValue = dropdown.options[sIndex].value;
    var sText =  dropdown.options[sIndex].text;
    
    alert(sValue);
    alert(sText);
}

// Call this function when page loads
function attachEventOnLoad() { 
    var el = document.getElementById("aspDropDownList"); 

    if (el.addEventListener) // MOZILA-based browsers, OPERA, ETC...
    {
      el.addEventListener("change", onChange_ServerCtl, false); 
    }
    else if (el.attachEvent) // IE browser
    {
      el.attachEvent("onchange", onChange_ServerCtl);
    }
}
    </script>

    <script type="text/javascript">

// FOR THE HTML "SELECT" CONTROL
function onChange_HtmlCtl()
{
    dropdown = document.getElementById("htmlDropDownList");
    
    var sIndex  = dropdown.selectedIndex;
    var sValue = dropdown.options[sIndex].value;
    var sText =  dropdown.options[sIndex].text;
    
    alert(sValue);
    alert(sText);
}

    </script>

</head>
<body onload="attachEventOnLoad();">
    <form id="theForm" runat="server">
        <select id="htmlDropDownList" onchange="onChange_HtmlCtl();">
            <option value="1">List Item 1</option>
            <option value="2">List Item 2</option>
            <option value="3">List Item 3</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:DropDownList ID="aspDropDownList" runat="server">
            <asp:ListItem Text="List Item 1" Value="1"></asp:ListItem>
            <asp:ListItem Text="List Item 2" Value="2"></asp:ListItem>
            <asp:ListItem Text="List Item 3" Value="3"></asp:ListItem>
        </asp:DropDownList>
    </form>
</body>
</html>

1. As you saw, there is no possible way to call a javascript function inside a server control unless you register the script first, so you have to "inject" (ok, maybe this is not the best word to describe the action..) your code by attaching to the element's selected (by you) event.
The attachEventOnLoad function does that.
Note that when you attach an event to a designated control you should call that function on the page load event.

2. The rest of the code is more than self-descriptive so it's no use to explain it. But, if you have any questions..I'll be around..

Boogle · 10-19-2007, 10:09 AM

Costin, you are my java knowledge man!

Can i ask you one question: Do you use a lot of it or do you prefer to stick to safe code, i.e. where everyone can benefit? it might take a few more round trips but with the validator controls from VS i think some of the hard work is taken care of?

Anyway, thanks again mate, big help!

Boog's

Dan Williamson · 10-19-2007, 11:32 AM

Quote:

Originally Posted by Boogle

Costin, you are my java knowledge man!

Can i ask you one question: Do you use a lot of it or do you prefer to stick to safe code, i.e. where everyone can benefit? it might take a few more round trips but with the validator controls from VS i think some of the hard work is taken care of?

Anyway, thanks again mate, big help!

Boog's

If you mean do people use Javascript a lot then yes people do, as it can do all sorts of things which can be good for the behaviour for your website, although you should never have a javascript dependant site, just like you should never have a image depenent website, as some people use text-only web browsers.

To be honest even if Javascript is turned off you just set it so that people don't have to enable it, it's not hard to do from what I believe.

Costin Trifan · 10-19-2007, 12:42 PM

@Boogle:

If you want my advice, stick to safe code. It's safer

Use JS only when you actually need it and when you cannot do that task with css or in the code-behind page.

Taltos · 10-20-2007, 11:41 AM

Gotta throw my

in here. Javascript, like most other things, is great if it's not abused. There are things that you need javascript to do. One thing I did notice on your example (yes, I did get that it was just a quickie) that is a very common problem of js and asp is running things at the server when you don't need to. There is nothing wrong with letting the client execute js that doesn't really require any server data or help. Js executed at the client runs very fast for most people. Now if you abuse it and have 3000 lines of js running at the client, then you are probably doing some things that can and should be done at the server. But for smaller scripts that don't require any data from the server, why not let them run on the client.

**steps down from the soapbox

**

Costin Trifan · 10-21-2007, 06:34 PM

I have to agree with Taltos on this one, because he'd said exactly what I thought about but I didn't said it.

When you develop an asp.net website you come to see that the javascript usage is reduced to a very small percentage because you have vb.net or C# to help you coding or adding some special functionality to your page.

There are the asp.net validators also, which makes your javascript validation library extremely useless...(in case someone will use that).

The only way I use javascript in an asp.net website is just for simple animations, browser check (if not done in the code behind page), toggle one object's visibility or any other simple actions like those which doesn't require a server transfer.

Boogle · 10-22-2007, 12:47 AM

That's really good to know, guys because I was hoping not to infest my sites with Javascript and make them more complicated than they have to be!

Thanks for the info guys, you've cleared up a self-debate of mine!

Boog's

Boogle · 10-22-2007, 04:42 AM

... I hate to be a party pooper but i'm getting an error from the code, Costin I never checked the code properly and presumed it would work as it looked sound.

The error is on the line with all the *****'s and the error is: 'Object Required'

Code:


function attachEventOnLoad() 
    {
        var el = document.getElementById("serviceDropDown");
        if (el.addEventListener) // MOZILA-based browsers, OPERA, ETC...
        ******{
        el.addEventListener("change", onChange_ServerCtl, false); 
        }
        else if (el.attachEvent) // IE browser
        {
        el.attachEvent("onchange", onChange_ServerCtl);
        }         
    }

Any ideas why? i've done a bit of research on the addEventListener and attachEvent and can't see any errors as to their use. Also the use of the dropdown (ASP for me) seems perfectly logical and used correctly...

Any help appreciated,

Boog's

nic · 10-22-2007, 06:37 AM

onTextChanged="MyFunction()

Your trying to mix clientside-javascript with serverside-generic-OS-shell-script
if its a form field use...

<select name="selector" size="20">
<option onselect="MyFunction();" value="x">x</option>
.......
......
</select>

Costin Trifan · 10-22-2007, 07:00 AM

I see nothing wrong with the code, dude... When I run that page locally everything looks fine.

Are you sure you haven't change anything in your page? Like the name of a control?
When you got that error" Object required" is because the script don't receive the expected object referenced in the script. Also, do you still have that function in the body onload event?

Please verify your code again and compare it with the one I gave you.

Costin Trifan · 10-22-2007, 07:53 AM

I uploaded the code to my account, so you can see it in action:
http://optimizaremaster.org/v7n_site...l/Default.aspx

Boogle · 10-22-2007, 07:57 AM

Hey Costin, that's an excellent help...AGAIN! I hope the higher powers of this forum take note of your devoted mentoring?! And it's exactly what i want too,

Thanks again dude, I will let you know when i've got it working- gotta do somert else at mo!

Cheers,
Boog's

Costin Trifan · 10-22-2007, 08:03 AM

You're most welcome!

Boogle · 10-22-2007, 08:49 AM

OK one last question: Does this matter if i'm using MasterPage and the control is on a child page? I'm still recieving the error... after a copy and paste :-s Sorry to be a dunce and quite annoying here but it'd be a good thing if i could get this working... most importantly understand it though!

Thanks,

Boog's

Costin Trifan · 10-22-2007, 01:11 PM

Quote:

Does this matter if i'm using MasterPage and the control is on a child page?

yes, it does.

Quote:

I'm still recieving the error... after a copy and paste

...of course

Quote:

Sorry to be a dunce and quite annoying here but it'd be a good thing if i could get this working

Quote:

... most importantly understand it though

ok, let's get started:

The Master page code:

Code:

<%@ Master Language="VB" CodeFile="xMaster.master.vb" Inherits="boogle_TabMenu_xMaster" %>
<!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 runat="server">
    <title>Test javascript Page</title>

    <script src="DropDownList.js" type="text/javascript"></script>

    <script type="text/javascript">

// Get the DropDownList ID
var xCtl = '<%=aspDropDownList.ClientID %>';

window.onload = attachEventOnLoad;

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                <br />
                <br />
                <label for="aspDropDownList">
                    ASP.NET control:
                </label>
                <asp:DropDownList ID="aspDropDownList" runat="server">
                    <asp:ListItem Text="List Item 1" Value="1"></asp:ListItem>
                    <asp:ListItem Text="List Item 2" Value="2"></asp:ListItem>
                    <asp:ListItem Text="List Item 3" Value="3"></asp:ListItem>
                </asp:DropDownList>
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

DropDownList.js

Code:

// Call this function when page loads
function attachEventOnLoad()
{
    var el = document.getElementById(xCtl);
    if (el.addEventListener) // MOZILA-based browsers, OPERA, ETC...
    {
      el.addEventListener("change", onChange_ServerCtl, false); 
    }
    else if (el.attachEvent) // IE browser
    {
      el.attachEvent("onchange", onChange_ServerCtl);
    }
}

// FOR THE ASP.NET "DROPDOWN