943,923 Members | Top Members by Rank

Ad:
Jan 17th, 2008
0

IE7 document.getElementById problem

Expand Post »
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
Similar Threads
Reputation Points: 50
Solved Threads: 0
Newbie Poster
AbberLine is offline Offline
23 posts
since Dec 2007
Jan 17th, 2008
0

Re: IE7 document.getElementById problem

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.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
sqlchopper is offline Offline
19 posts
since Jan 2005
Jan 18th, 2008
0

Re: IE7 document.getElementById problem

i'm not sure what you mean but i'll try and see what I get. Thank you for helping.
Reputation Points: 50
Solved Threads: 0
Newbie Poster
AbberLine is offline Offline
23 posts
since Dec 2007
Jan 18th, 2008
0

Re: IE7 document.getElementById problem

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
Reputation Points: 50
Solved Threads: 0
Newbie Poster
AbberLine is offline Offline
23 posts
since Dec 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: image tooltips
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: NEW AJAX user question





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC