IE7 document.getElementById problem

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 392,041 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,290 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2389 | Replies: 3 | Solved

•

Join Date: Dec 2007

Location: Belgium

Posts: 23

Reputation: AbberLine is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

AbberLine

Offline

Newbie Poster

IE7 document.getElementById problem

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:

 Help with Code Tags 
 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>
<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:

 Help with Code Tags 
 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);
// 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);

 Help with Code Tags 
 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;
// 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

 Help with Code Tags 
 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>");
 
// 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:

 Help with Code Tags 
 JAVASCRIPT Syntax (Toggle Plain Text) 
<script type="text/javascript">
function writeEvent(t1){
 document.getElementById("infoOut").innerHTML = makeEvent(t1);
}
<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. ~

•

Join Date: Jan 2005

Location: defiance, oh

Posts: 19

Reputation: sqlchopper is an unknown quantity at this point

Rep Power: 4

Solved Threads: 1

sqlchopper sqlchopper is offline

Offline

Newbie Poster

Re: IE7 document.getElementById problem

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.

•

Join Date: Dec 2007

Location: Belgium

Posts: 23

Reputation: AbberLine is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

AbberLine

Offline

Newbie Poster

Re: IE7 document.getElementById problem

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. ~

•

Join Date: Dec 2007

Location: Belgium

Posts: 23

Reputation: AbberLine is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

AbberLine

Offline

Newbie Poster

Re: IE7 document.getElementById problem

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:

 Help with Code Tags 
 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>";
  }
  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

 Help with Code Tags 
 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>
<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. ~