SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prototype framework: "$(id) has no properties" error..

    Hi!
    I'm trying to control the look of an active link. Firebug always gives me the same error "$(id) has no properties".
    Using Prototype javascript framework I want to change the class name of the <a> tag.

    I put an example online to simplify things...
    Take a look at http://www.naocoisas.com/ActiveTabEx/index.php

    thanks very much for your help!
    Tiago

  2. #2
    Awesome Addict
    Join Date
    Mar 2004
    Location
    Toronto, Canada
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're passing setActiveTab() a string when what you want to be passing it is a DOM element. Try this instead:
    Code:
    Code JavaScript:
     
    // the 'this' keyword will refer to the element that was clicked-- in this case, the thing with an #id of 'link1'
    Event.observe($('link1'), 'click', setActiveTab(this));
     
    // I would avoid using 'id' and instead call the argument 'elm' -- as in 'element'
    function setActiveTab(elm) {
      if($(elm).className == 'inactive') {
        $(elm).removeClassName('inactive');
        $(elm).addClassName('link1Active');  // this line was missing quotes
      }
      // and don't forget to return false so the default action won't be followed
      return false;
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gregor002, thanks for your reply!
    I followed your suggestions and now firebug returns the error: "element has no properties"

    then, I changed the function to this:
    function setActiveTab(elm) {
    $(elm).removeClassName('inactive');
    $(elm).addClassName('activeLink');
    }
    without the conditional if($(elm).classname == 'inactive')
    and firebug returns the error:
    "$(elm).removeClassName is not a function
    setActiveTab(Window index.php)"

    I stopped calling the property "classname" in the conditional and now I think the parameter "this" is refering to the window itself.
    So I changed it to "link1", "link2" and "link3"
    and firebug returns the error:
    "$(elmID) has no properties"

    help!

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    //don't want the ()s, as we don't want to call the function, just pass it
    Event.observe($('link1'), 'click', setActiveTab);
     
    //event-listeners receive the event object as their argument (in most browsers),
    // 'this' in the context of a listener is the element it's being called on
    function setActiveTab(event) {
      if(this.className == 'inactive') {
        this.removeClassName('inactive');
        this.addClassName('activeLink'); 
      }
      //and then stop the event, prototype gives us this:
      Event.stop(event);
    }

  5. #5
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gjones, thanks for your reply... but... the solution doesn't work.
    Firebug returns the following error:
    "element has no properties"

    take a look here

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my mistake, I assumed too much.
    The error is happening because at the time the code tries to attach the handler, the elements haven't yet been added to the document. You need to either put the javascript after the elements (at the bottom of the page, just before </body> is as good as anywhere) or put them inside a function that runs when the window loads:
    Code:
    Event.observe(window,'load',function() {
      Event.observe('link1','click',setActiveTab);
    });

  7. #7
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, this are my first contact with javascript. My experience is mainly with java...
    I tried what you've said but now, for some reason, the links don't work...
    I've tried both ways (putting the code just before the </body>, and inside the function that you've mentioned).

    Any alternative..?

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    className needs the capital N, in the comparison you have a small n.

  9. #9
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally!! Not only the Tabs are working but the content is refreshed with Ajax.Updater Object too. ufff...
    The problem was mainly in the refreshment of the page. With Ajax everything works fine becauses he only refreshes the "content" div.
    I had to change a lot of things.

    The final result is here.

    ps: gregor002 and gjones, once again, thank you very much for your help!

    Here's the code:
    index.php
    Code PHP:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>ACTIVE TAB EXERCISE</title>
     
    <style type="text/css">
    body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 3em; }
    li { list-style-type:none; display:inline; }
    h1 { font-size:0.4em; }
    p { font-size:0.2em; }
     
    div#mainNav a { color:grey; }
    div#mainNav a:hover { color:red; }
    div#mainNav a:active { color:red; }
    
    div#mainNav.link1 li#tab1 a{ color:red; }
    div#mainNav.link2 li#tab2 a{ color:red; }
    div#mainNav.link3 li#tab3 a{ color:red; }
    
    </style>
     
    <script type='text/javascript' src='./prototype.js'></script>
    <script type='text/javascript'>
     
    	/*
    	 * PROBLEM: change classname of div "mainNav" to link1, link2, and link3.
    	 * Set the color of the link with css.
    	 */
     
     
    	Event.observe(window,'load', function(event) {
    		//default
    		new Ajax.Updater('content','./content.php', { method:'get', parameters:"menu="+"1" });
     
    		//add Event listener to all the links
    		Event.observe($('event1'), 'click', function(event) {
    			$('mainNav').className = 'link1';
    			new Ajax.Updater('content', './content.php', { method: 'get' , parameters:"menu="+"1"});
    			Event.stop(event);
    		});
    		Event.observe($('event2'), 'click', function(event) {
    			$('mainNav').className = 'link2';
    			new Ajax.Updater('content', './content.php', { method: 'get' , parameters:"menu="+"2"});
    			Event.stop(event);
    		});
    		Event.observe($('event3'), 'click', function(event) {
    			$('mainNav').className = 'link3';
    			new Ajax.Updater('content', './content.php', { method: 'get' , parameters:"menu="+"3"});
    			Event.stop(event);
    		});
    		Event.stop(event);
    	});
     
    </script>
    </head>
     
    <body>
    <div id="mainNav" class="link1">
    <ul>
    <li id="tab1"><a id="event1" href="#">link1</a></li>
    <li id="tab2"><a id="event2" href="#">link2</a></li>
    <li id="tab3"><a id="event3" href="#">link3</a></li>
    </ul>
    </div>
     
    <div id="content"></div>
    </body>
    </html>

    content.php
    Code PHP:
    <?php
    	if($_GET['menu'] == '1') {
    		echo "<h1>Content 1</h1>
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    		Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, 
    		id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse 
    		id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. 
    		Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. 
    		Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, 
    		fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. 
    		Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, 
    		blandit sed, blandit a, eros.
    		</p>";
    	}
    	if($_GET['menu'] == '2') {
    		echo "<h1>Content 2</h1>
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    		Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, 
    		id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse 
    		id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. 
    		Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. 
    		Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, 
    		fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. 
    		Maecenas vitae nulla consequat libero cursus venenatis. 
    		Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
    		</p>";
    	}
    	if($_GET['menu'] == '3') {
    		echo "<h1>Content 3</h1>
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    		Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, 
    		id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse 
    		id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. 
    		Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. 
    		Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, 
    		fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. 
    		Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, 
    		accumsan eu, blandit sed, blandit a, eros.
    		</p>";
    	}
    ?>
    Last edited by tfncruz; Aug 31, 2007 at 07:08. Reason: add the code


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
  •