JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

IE7 document.getElementById problem

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved
Reply

•
•
Join Date: Dec 2007
Posts: 23
Reputation: AbberLine is an unknown quantity at this point 
Solved Threads: 0
AbberLine's Avatar
AbberLine AbberLine is offline Offline
Newbie Poster

IE7 document.getElementById problem

 
0
  #1
Jan 17th, 2008
Hi,

I would like to make a blok of text appear when the user clicks a hyperlink. Therefor I created a test file in html:

HTML Syntax (Toggle Plain Text) 
  1. <html>
  2.  <head>
  3.   <title>InnerHTML - Test</title>	
  4.   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  5.  
  6.  <script type="text/javascript">
  7.   function writeEvent(txt){
  8.    document.getElementById("infoOut").innerHTML = makeEvent(txt);
  9.   }
  10.  
  11.   function makeEvent(text){
  12.    var output 
  13.    return "<table style='border:solid 1px red'><tr><td>"+text+"</td></tr></table>";
  14.   }
  15.  </script>
  16.  
  17.  </head>
  18.  <body>
  19.  <p>
  20.   <a href="#" onclick="writeEvent('<b> Partijbestuur</b> <br/> Te rode roos,<br/> Om: 19u30')">dag 1</a> <br/> 
  21.  
  22.   <a href="#" onclick="writeEvent('<b> Kaartavond</b> <br/> Te rode roos,<br/> Om: 19u30<br/> Inschijven: <a href=http://www.google.be> Hier</a> ')">dag 2</a> <br/> 
  23.  
  24.   <a href="#" onclick="writeEvent('<b>YO 2008</b><br/>Afspraak om 18:23 aan de kerk in hofstade<br/>tickets in voorverkoop bij hilde te krijgen')">dag 3</a><br/> 
  25.  </p>
  26.  
  27.  <p id="infoOut"></p>
  28.  </body>
  29. </html>

Which works fine in bouth Firefox and IE7. So I placed the code form the test file above into my php code. This php shows a calendar and highlights special dates.
Here are pieces that are the most impotand for this probem:

PHP Syntax (Toggle Plain Text) 
  1. // Add an event								 
  2. 	public function addEvent($eventTitle, $eventDay, $eventMonth, $eventYear, $eventInfo) {
  3. 		$this->events[$eventYear][$eventMonth][$eventDay] = array('event_title' => $eventTitle, 'event_link' => '#', 'event_info' => $eventInfo);
PHP Syntax (Toggle Plain Text) 
  1. // Set day as either plain text or event link
  2. 			if (isset($this->events[$this->year][$this->month][$this->day]))
  3. 				$this->htmlDay = sprintf("<a href=\"%s\" title=\"%s\" onClick=\"writeEvent('%s')\">%s</a>", $this->events[$this->year][$this->month][$this->day]['event_link'], $this->events[$this->year][$this->month][$this->day]['event_title'], $this->events[$this->year][$this->month][$this->day]['event_info'], $this->day);
  4. 			else
  5. 				$this->htmlDay = $this->day;

This code was also tested before I added the onclick() event that shoud trigger the JS function to show the block of text.

Now I have this page that holds the calendar, the special days and the javascript

PHP Syntax (Toggle Plain Text) 
  1. // JavaScript
  2. $javascript = <<< EOT
  3.  
  4. <script type="text/javascript">
  5. function writeEvent(t1){
  6.  document.getElementById("infoOut").innerHTML = makeEvent(t1);
  7. }
  8.  
  9. function makeEvent(t2){
  10.  return "<center><table style='border:solid 1px red'; margin=3px; width=435px;><tr><td>"+t2+"</td></tr></table></center>";
  11. }
  12. </script>
  13.  
  14. EOT;
  15. echo $javascript;
  16.  
  17. // Include calendar class
  18. require_once('calendar.class.new.php');
  19.  
  20. // Create calendar object
  21. $cal = new calendar;
  22.  
  23. // Turn on navigation links
  24. $cal->enableNavigation();
  25.  
  26. // Add event on current day
  27. $cal->addEvent('YO 2008', 4, 1, 2008, 'YO 2008<br>test test om 18u30 wees op tijd!');
  28. $cal->addEvent('Patrijbestuur', 9, 1, 2008, 'http://www.example-event.com');
  29. $cal->addEvent('Nieuwjaarsreceptie regio s Vilvoorde en Zaventem', 11, 1, 2008, 'http://www.example-event.com');
  30.  
  31.  
  32. // Display calendar centered
  33. echo("<center>");
  34. $cal->display($_GET['month'], $_GET['year']);
  35. echo("</center><br/>");
  36.  
  37. // Output of event
  38. echo("<p id=\"infoOut\"></p>");

This does as it is supposed to do in firefox BUT in IE7 it does not.
when I click a special day in IE7 it does not show any blok of text and gives me the following error:
"error: unkown runtime error"

that points to the 3e line of this code:
JAVASCRIPT Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. function writeEvent(t1){
  3.  document.getElementById("infoOut").innerHTML = makeEvent(t1);
  4. }

This is realy wierd to me there is nothing wrong with this:
document.getElementById("infoOut").innerHTML = makeEvent(t1);

Please can anyone tell me how to solve this? Or tel me where I can find some sort of solution/explenation.

AbberLine
QUOTE lang=dutch ~ De moeilijkheid zit hem in de eenvoud ~ /QUOTE

Translated:
~ Simplicity is the best solution for a difficult problem, the problem is to keep it simple. ~
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2005
Posts: 19
Reputation: sqlchopper is an unknown quantity at this point 
Solved Threads: 1
sqlchopper sqlchopper is offline Offline
Newbie Poster

Re: IE7 document.getElementById problem

 
0
  #2
Jan 17th, 2008
i have found that is the field is visible = false javascript can not find it in IE7.
if you have it set to that then make it visable and see if that works.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 23
Reputation: AbberLine is an unknown quantity at this point 
Solved Threads: 0
AbberLine's Avatar
AbberLine AbberLine is offline Offline
Newbie Poster

Re: IE7 document.getElementById problem

 
0
  #3
Jan 18th, 2008
i'm not sure what you mean but i'll try and see what I get. Thank you for helping.
QUOTE lang=dutch ~ De moeilijkheid zit hem in de eenvoud ~ /QUOTE

Translated:
~ Simplicity is the best solution for a difficult problem, the problem is to keep it simple. ~
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 23
Reputation: AbberLine is an unknown quantity at this point 
Solved Threads: 0
AbberLine's Avatar
AbberLine AbberLine is offline Offline
Newbie Poster

Re: IE7 document.getElementById problem

 
0
  #4
Jan 18th, 2008
Found a solution, for those who would like to know:

The tags in the return value of my second javascript function seemed to be the problem
The WRONG code:
JAVASCRIPT Syntax (Toggle Plain Text) 
  1.   function writeEvent(txt){
  2.    document.getElementById("infoOut").innerHTML = makeEvent(txt);
  3.   }
  4.  
  5.   function makeEvent(text){
  6.    return "<table style='border:solid 1px red'><tr><td>"+
  7.     /*   Will not work in IE ---------------------------^ */
  8. text+"</td></tr></table>";
  9.   }

After reading what sqlchopper posted I went looking for something about visible/invisible and bumbed into this: the opposite for style.display='none' . The last post there inspired me for this solution:

The solution: Do NOT put strings/tags into the return value, use document.getElementById("id").style
JAVASCRIPT Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2.  
  3.   function writeEvent(txt){
  4.    document.getElementById("infoOut").style.border='solid 1px red';
  5.    document.getElementById("infoOut").style.width='435';
  6.    document.getElementById("infoOut").style.padding='5px'; 
  7.    /*  Send the style this way ---------^  */
  8.    document.getElementById("infoOut").innerHTML = makeEvent(txt);
  9.   }
  10.  
  11.   function makeEvent(text){
  12.    return text;     /* CHANGED THIS */
  13.   }
  14.  </script>

This also has his limitations and problems fitting for bouth IE and FF but its good enough for what I want to do.

AbberLine
QUOTE lang=dutch ~ De moeilijkheid zit hem in de eenvoud ~ /QUOTE

Translated:
~ Simplicity is the best solution for a difficult problem, the problem is to keep it simple. ~
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC