IE7 document.getElementById problem

Question

AbberLine 19 Newbie Poster

16 Years Ago

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>
 <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:

// 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);

// 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

// 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:

<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

javascript

2 Contributors
3 Replies
229 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by AbberLine

sqlchopper 0 Newbie Poster

16 Years Ago

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 to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

AbberLine 19 Newbie Poster · Answer 1 · 2008-01-18T15:06:48+00:00

i'm not sure what you mean but i'll try and see what I get. Thank you for helping.

AbberLine 19 Newbie Poster · Answer 2 · 2008-01-18T16:20:24+00:00

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:

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

<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