| | |
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
![]() |
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:
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:
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
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:
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
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)
<html> <head> <title>InnerHTML - Test</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function writeEvent(txt){ document.getElementById("infoOut").innerHTML = makeEvent(txt); } function makeEvent(text){ var output return "<table style='border:solid 1px red'><tr><td>"+text+"</td></tr></table>"; } </script> </head> <body> <p> <a href="#" onclick="writeEvent('<b> Partijbestuur</b> <br/> Te rode roos,<br/> Om: 19u30')">dag 1</a> <br/> <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/> <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/> </p> <p id="infoOut"></p> </body> </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)
// Add an event public function addEvent($eventTitle, $eventDay, $eventMonth, $eventYear, $eventInfo) { $this->events[$eventYear][$eventMonth][$eventDay] = array('event_title' => $eventTitle, 'event_link' => '#', 'event_info' => $eventInfo);
PHP Syntax (Toggle Plain Text)
// Set day as either plain text or event link if (isset($this->events[$this->year][$this->month][$this->day])) $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); else $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)
// JavaScript $javascript = <<< EOT <script type="text/javascript"> function writeEvent(t1){ document.getElementById("infoOut").innerHTML = makeEvent(t1); } function makeEvent(t2){ return "<center><table style='border:solid 1px red'; margin=3px; width=435px;><tr><td>"+t2+"</td></tr></table></center>"; } </script> EOT; echo $javascript; // Include calendar class require_once('calendar.class.new.php'); // Create calendar object $cal = new calendar; // Turn on navigation links $cal->enableNavigation(); // Add event on current day $cal->addEvent('YO 2008', 4, 1, 2008, 'YO 2008<br>test test om 18u30 wees op tijd!'); $cal->addEvent('Patrijbestuur', 9, 1, 2008, 'http://www.example-event.com'); $cal->addEvent('Nieuwjaarsreceptie regio s Vilvoorde en Zaventem', 11, 1, 2008, 'http://www.example-event.com'); // Display calendar centered echo("<center>"); $cal->display($_GET['month'], $_GET['year']); echo("</center><br/>"); // Output of event 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)
<script type="text/javascript"> function writeEvent(t1){ document.getElementById("infoOut").innerHTML = makeEvent(t1); }
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. ~
Translated:
~ Simplicity is the best solution for a difficult problem, the problem is to keep it simple. ~
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:
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
This also has his limitations and problems fitting for bouth IE and FF but its good enough for what I want to do.
AbberLine
The tags in the return value of my second javascript function seemed to be the problem
The WRONG code:
JAVASCRIPT Syntax (Toggle Plain Text)
function writeEvent(txt){ document.getElementById("infoOut").innerHTML = makeEvent(txt); } function makeEvent(text){ return "<table style='border:solid 1px red'><tr><td>"+ /* Will not work in IE ---------------------------^ */ text+"</td></tr></table>"; }
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)
<script type="text/javascript"> function writeEvent(txt){ document.getElementById("infoOut").style.border='solid 1px red'; document.getElementById("infoOut").style.width='435'; document.getElementById("infoOut").style.padding='5px'; /* Send the style this way ---------^ */ document.getElementById("infoOut").innerHTML = makeEvent(txt); } function makeEvent(text){ return text; /* CHANGED THIS */ } </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. ~
Translated:
~ Simplicity is the best solution for a difficult problem, the problem is to keep it simple. ~
![]() |
Similar Threads
- DHTML & Javascript menu - trouble with z-index (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: image tooltips
- Next Thread: NEW AJAX user question
| 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





