Ajax Talk - Asynchronous javascript and xml discussion board
 FAQ   Search    Usergroups      Register   Profile   Check your messages   Log in 
Signup now to enjoy a range of free membership advantages !!
Ajax Talk - Moderators Wanted
Simple event.observe problem...element has no properties

 
Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX Help
View previous topic :: View next topic  
Author Message
Th3one
New one
New one


Joined: 02 Dec 2007
Posts: 1

PostPosted: Sun Dec 02, 2007 10:29 pm    Post subject: Simple event.observe problem...element has no properties Reply with quote

Hey guys,
Tring to create an ajax search box using prototype. Used prototype before, and can get my javascript file to work with other text boxes on other pages
Just not the textbox I want. Heres the javascript code I'm using (in the file _ajax/search.js):

Code:
Event.observe('q', 'keyup', search_term_change, false);

function search_term_change(){
   alert("Key Up in search box!");
}


All I get is an error saying element has no properties in the error console in firefox. I think it's something to do with the DOM or something?
I'm not very good with the DOM...still getting to grips.

I've included the page (minus most of its content) that contains the text input box (q) below. I've left the whole structure intact, just taken out some of the content.

If anybody could explain why it isnt working and/or give me the correct code to use that'd be awesome!

Probably something dead simple..but I cant work it out.
Tried lots of variations like:

Event.observe('q.value', 'keyup', search_term_change, false);
Event.observe(document.getElementById('q'), 'keyup', search_term_change, false);
Event.observe(document.getElementById('q').value, 'keyup', search_term_change, false);

But always get element has no properties error

Thanks guys Smile


Page code:
Code:

<!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>
<title></title>
<script type="text/javascript" src="_ajax/search.js"></script>
<link href="_css/styles.css" rel="stylesheet" type="text/css" media="all" />

<body>
<div class="body-wrap">

  <div id="header">
       <div id="account">
           
        </div>
  </div>
   
    <div class="clear"></div>
   
  <div id="nav">
       
    </div>
    <div class="clear"></div>
   
    <div id="content">
       <div id="cLeft">
       
           <div id="search">
                 <center><h3>Search For Gigs By Artist:</h3>
                <input type="text" id="q" value="Enter search term" onfocus="this.value='';"/>
                <div class="clear"></div>
                <input type="button" class="clear" value="Clear" onClick="document.getElementById('q').value=''"/>
        <input type="button" class="search" value="Search >>" />
        <img src="_images/site_gfx/search-bottom.jpg" width="512" height="13" alt="bottom" class="bottom" />
            </div>
           
        <div id="results">
                
                <div class="clear"></div>
                <div class="box">
                   <div class="oleft">
                       
                    </div>
                   
                    <div class="oright">
                       
                    </div>
                </div>
               
                <div class="clear"></div>
               
                <div class="box">
                   <div class="oleft">
                       
                    </div>
                   
                    <div class="oright">
                       
                    </div>
                </div>
               
                <div class="clear"></div>
               
                           
            <div id="footer">
               
                <div class="clear"></div>
               
            </div>
        </div>
       
        <div id="cRight">
           
            <div id="matchingartists">
               
            </div>
           
            <div id="bandpromote">
               
            </div>
           
            <div id="searcharea">
               
            </div>
                   
            <div id="advertisement">
               
            </div>
           
        </div>
       
        <div class="clear"></div>
    </div>   

</div>

</body>
</html>
Back to top
View user's profile Send private message
Jesdisciple
Frequent Poster
Frequent Poster


Joined: 20 Oct 2007
Posts: 36
Location: Tejas

PostPosted: Thu Dec 06, 2007 4:37 pm    Post subject: Reply with quote

Thank you for including a page! Most people don't do this, and if the code given doesn't demonstrate exactly how far you are in your project and what you need help with, I'm severely handicapped in my quest to help you. (To everyone else, hint hint!)

Small Complaints
Your <head> is never closed and prototype.js isn't included, although these may be due to the surgery you performed on the page to only provide necessary code. The rest of my complaints are relatively minor, so they will only be corrected in the code.

Getting to the Real Problem
I think the error was coming because Event.observe('q', 'keyup', search_term_change, false); was being called before the page loaded, so I call this from the body's onload... See how it works:
Code:
function main(){//added to allow page to load first
   Event.observe('q', 'keyup', search_term_change, false);
}


But I don't know why it deletes text when I type. Here's the whole code:
Code:
<!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>
      <title>Titled Document</title>
      <script type="text/javascript" src="../../library/js/prototype.js"></script>
      <script type="text/javascript">
         //_ajax/search.js (moved for smoother editing)
         
         function main(){//added to allow page to load first
            Event.observe('q', 'keyup', search_term_change, false);
         }
         
         function search_term_change(){
            alert("Key Up in search box!");
         }
      </script>
   </head>
   <body onload="main();">
      <div class="body-wrap">
         <div id="header">
            <div id="account"></div>
         </div>
         <div class="clear"></div>
         <div id="nav"></div>
         <div class="clear"></div>
         <div id="content">
            <div id="cLeft">
               <div id="search" align="center">
                  <h3>Search For Gigs By Artist:</h3>
                  <input type="text" id="q" value="Enter search term" onfocus="this.value='';"/>
                  <div class="clear"></div>
                  <input type="button" class="clear" value="Clear" onClick="document.getElementById('q').value=''"/>
                  <input type="button" class="search" value="Search >>" />
               </div>
               <div id="results">
                  <div class="clear"></div>
                  <div class="box">
                     <div class="oleft">
                     </div>
                     <div class="oright">
                     </div>
                  </div>
                  <div class="clear"></div>
                  <div class="box">
                     <div class="oleft">
                     </div>
                     <div class="oright">
                  </div>
               </div>
               <div class="clear"></div>
               <div id="footer">
                  <div class="clear"></div>
               </div>
            </div>
            <div id="cRight">
               <div id="matchingartists">
               </div>
               <div id="bandpromote">
               </div>
               <div id="searcharea">
               </div>
               <div id="advertisement">
               </div>
            </div>
            <div class="clear"></div>
         </div>
      </div>
   </body>
</html>

_________________
In ALL things, strive for ><>,
Chris
Back to top
View user's profile Send private message Visit poster's website AIM Address MSN Messenger
Display posts from previous:   
Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX Help All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
 Advertisements
 XML & Copyright Notice 
    


Powered by phpBB © 2001, 2005 phpBB Group

What is according to Wikipedia: Ajax Web2.0 XML E4X


Link to our site:

  


del.icio.us digg spurl wists simpy newsvine blinklist furl blogmarks yahoo! myweb smarking ma.gnolia segnalo reddit fark technorati cosmos


Normal Bookmark


Partner Button Links:
Codecrunch.com: Webmaster Tutorials    One Ajax


Partner Text Links:
quomon | web20log | ajaxmatters | tableless | 456bereastreet | music charts | gift ideas | competitions | free xbox 360 | link trade ?


Credits:
it consultancy & project management lead generation zoekmachine optimalisatie steal these buttons seo expert