Javascript onclick doesn't work in IE

mohtasham1983 · 01-23-2008, 11:26 PM

Hi,

I have been searching on google to find the answer for my question, but I have not succeeded to find the answer for my question, that's why I m trying to find my answer in here.

I have a dynamic page with 10 anchors and 10 div element in it. Each anchor is named like anchor_1, anchor_2, ... and each div is called div_1, div_2, ... .

I have created an oclick event handler for each anchor to change the content of the corresponding div element. For example, if you press on a_23, div_23 contents should be changed.

PHP Code:



<a id="anchor_23" onclick="vote_link(this)"></a>

And I have a javascript function called vote_link(this) which grabs this.id and find the corresponding div element and change it. Everything works in FF, but in IE it even doesn't call my function

I have bunch of onclick event handlers and since they worked on FF I thought everything is alright. Fortunately or Unfortunately I don't have IE on my computer to test everything immediately, so almost non of my javascript simple functions work in IE.

Any idea how to solve this problem?

Simon Bridge · 01-24-2008, 01:22 AM

http://www.thescripts.com/forum/thread460633.html
... lots of reasons an onclick won't work. Best to provide a concrete example.

http://www.thescripts.com/forum/thread632970.html

j-ray · 01-24-2008, 06:49 AM

href='javascript:vote_link(this)' if within an anchor tag?
maybe useful but dont know...

mohtasham1983 · 01-24-2008, 01:53 PM

Thanks, but that didn't help me. I'm trying to use YUI library. They have several useful functions that can help me to some level. Because all data are inside a tab, not everything works fine, when the tab content are changed as I wanted. That's why I tried to use inline event handlers. In YUI they have a function that can return an array of element based on their class or tag name which is pretty interesting. However their tabview function event handler seem to be interesting, but for some reason I can't get them working fine with my specific application.

mohtasham1983 · 01-26-2008, 09:04 PM

I just noticed that I had done exact same thing previously and it is working fine with Internet Explorer.I have something like this in my page:

PHP Code:



 onclick='show_comment({$game_id});'

I believe the only difference between this page and my current page is in their document type. The page that is working fine with onclick event has the following structure:

PHP Code:



<!DOCTYPE HTML PUBLIC 
                     
                 "-//W3C//DTD HTML 4.01 Transitional//EN" 
                 "http://www.w3.org/TR/html401/loose.dtd" 
                 "-//W3C//DTD XHTML 1.0 Strict//EN" 
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The one that I'm using and not working is the following:

PHP Code:



<xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" indent="yes"/>

Unfortunately, I don't know how to use the equivalent document type for xslt.

internetSurfer · 01-27-2008, 11:20 AM

No access to XP @ the moment to test this.

I was looking @ the parsing for doctype and javascript.

Controlling the DOCTYPE and XML Declaration
http://www.xml.com/lpt/a/1027

XML CDATA
http://www.w3schools.com/xml/xml_cdata.asp

Code:

<script>
<![CDATA[
function matchwo(a,b)
{
if (a < b && a < 0) then
   {
   return 1;
   }
else
   {
   return 0;
   }
}
]]>
</script>

XSL and DTD
http://www.contentwithstyle.co.uk/Blog/98/

Code:

<xsl:text disable-output-escaping="yes">
<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>
</xsl:text>

mohtasham1983 · 01-29-2008, 03:21 AM

Alright, after playing around with my code I just realized that it has nothing to do with the document type. I just created an anchor element in a new empty xhtml file and called the function and it worked in FF and Opera. I guess it should be working in IE, too. I don't have IE to test with right now. The other day when I checked IE and Opera, I realized that they have the same behavior to this event.

Then I did exact same thing with my site but it didn't work in it.

After that instead of calling an external function I wrote something like this:

PHP Code:



<a onclick="alert('hi'); return false;"> button </a>

and in my surprise it worked both in Opera and FF. So I copied the javascript function from the external file and placed it at the end of my page inside script tag and called my function again. But, it didn't work either.

Anyone had the same problem before?

jlinkels · 01-31-2008, 05:20 AM

Javascript is a hell to debug and developing in Opera and trying to get it to work in IE can double your development times.

I see that in your first example you don't have a semicolon (

after the function call statement. Not sure whether it is required, but IE can be picky.

Next, surround your function call with "Alert()" calls so you know what piece of code is executed. IE skips the entire onclick block if there is just one error in the JS.

Installing a VM is almost a necessity to test you HTML in IE.

jlinkels

mohtasham1983 · 02-01-2008, 01:57 AM

Thank you. But I realized that when working with xslt, you cannot write a javascript file in an empty file. You have to include your external javascript file inside an xsl file so that you can call functions inside your external javascript. But unfortunately, if you are working with a javascript library like YUI, you cannot use them unless you place all of them in xsl files which doesn't seem to be the best way. I have not figured it out yet how to eliminate that problem.

As you said it's a good practice to include return false; after calling a function.

mohtasham1983 · 02-01-2008, 02:29 AM

Thank you. But I realized that when working with xslt, you cannot write a javascript file in an empty file. You have to include your external javascript file inside an xsl file so that you can call functions inside your external javascript. But unfortunately, if you are working with a javascript library like YUI, you cannot use them unless you place all of them in xsl files which doesn't seem to be the best way. I have not figured it out yet how to eliminate that problem.

As you said it's a good practice to include return false; after calling a function.