SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XHTML Transitional no onClick?

    I just tried validating a new site I built using XHTML Transitional DTD doctype, and I got it down to just one error - which I'm thinking is something against XHTML rules. I have an instance of <a href="javascript:void(0)" onClick="javascript:aFunction()">text</a>, and it says "there is no attribute "onClick". So is using onClick and other such js functions illegal in xhtml transitional?
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is because XHTML elements and attributes have to be lowercase. You currently have "onClick"; try "onclick" with a lower case "c".
    ( see here: http://www.w3.org/TR/xhtml1/#h-4.2 )
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And there should be no javascript: in the attribute value, since the content of the onclick attribute is script code, not a URI. You should use the Content-Script-Type HTTP header (or a meta equivalent) to specify that the content type for inline script code is text/javascript.

    Code:
    <a href="javascript:void(0)" onclick="aFunction()">text</a>
    Birnam wood is come to Dunsinane

  4. #4
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, so like this?

    Code:
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    Also, I am getting one more error:

    Code:
    document type does not allow element "a" here.
    At:
    Code:
    …ick="javascript:switchFlowers(\'1\')">&laquo; Back - Page 1</a>';
    I'm not sure what that means? Does it just mean that I should replace > with &gt; ?

    Code:
    if(page == '2')
    		{
    			document.getElementById('row1').style.display = 'none';
    			document.getElementById('row2').style.display = 'none';
    			document.getElementById('row3').style.display = 'table-row';
    			document.getElementById('row4').style.display = 'table-row';
    			document.getElementById('flower-page-link').innerHTML = '<a href="javascript:void(0)" onclick="switchFlowers(\'1\')">&laquo; Back - Page 1</a>';
    		}
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Possibility View Post
    Thanks, so like this?

    Code:
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    That's right.

    Quote Originally Posted by Possibility View Post
    Also, I am getting one more error:

    Code:
    document type does not allow element "a" here.
    Yes, here you'll run into a tricky one. The problem is that the content declaration of the script element type is different in HTML and XHTML. In HTML it's declared as CDATA, while XHTML declares it as (#PCDATA). There's a big difference in how characters like '<' and '&' are handled.

    Now, if you are using real XHTML this won't be a problem. Just escape all instances of '<' and '&' with '&lt;' and '&amp;'. If you are using pretend-XHTML (served as HTML), then you're in a fix. You can't do the escape thing, because that won't work when the document is parsed as HTML – which it must be if you serve it as text/html.

    The only reasonable solution would be to move the script code out to a separate file and include that, so you don't need to have any JavaScript code in your XHTML document.

    Or you could replace the .innerHTML (which may not be such a great idea with XHTML to begin with) with proper DOM functions, but that'll get you into another problem, since for XHTML you should use document.createElementNS() etc, while HTML requires document.createElement().
    Birnam wood is come to Dunsinane

  6. #6
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, Tommy. I think I'll just move my JS to an external file.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  7. #7
    SitePoint Enthusiast cssiscool's Avatar
    Join Date
    Feb 2006
    Location
    East Moline, Illinois
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes onClick must be onclick. but this doesn't work in all cases.

    this bit of javascript this.className cannot be this.classname or it simply won't function.

    the way around that is to put the html tag that contains that bit of javascript into a document.write so the valiator will ignore it

    like this

    Code:
    <script type="text/javascript">
    document.writeln('<a href="http:\/\/www.yahoo.com\/" class="off" onmouseover="this.className=\'on\'" onmouseout="this.className=\'off\'">Yahoo<\/a>');
    </script>
    here is a form you can use to make your own document.writesthat i downloaded fron about.com
    http://dwight.clickthesky.com/hhelpe...egenerator.htm

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't use document.write() with XHTML. See Why document.write() doesn't work in XML if you don't know why,
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •