Member Avatar for AbberLine

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, '');
$cal->addEvent('Nieuwjaarsreceptie regio s Vilvoorde en Zaventem', 11, 1, 2008, '');


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

  • 2 Contributors
  • 3 Replies
  • 240 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AbberLine

Dani AI

Generated

A short diagnosis and practical follow‑ups.

IE7’s “Unknown runtime error” when assigning innerHTML most often means the browser rejected the resulting DOM rather than that getElementById itself failed. Common triggers are inserting block-level elements (tables, TR/TD) into an inline context (for example, a <table> wrapped into a <p>), creating nested <a> tags, or letting unescaped quotes break an inline onclick attribute. ’s note about visibility is a useful quick check, and ’s fix (moving visual styling onto the container and avoiding returning a wrapped table string) is effective because it avoids injecting markup that makes the DOM invalid for IE7.

Checklist of practical debugging points:

  • Inspect the generated HTML source for malformed attributes (unescaped quotes inside onclick="...").
  • Ensure the output container is a block-level element (prefer <div id="infoOut">) and placed outside any <table>/<p> that would make injected markup illegal.
  • Avoid embedding large HTML strings inside inline onclick attributes; use data attributes or attach handlers via script.
  • If full markup must be injected, create elements with DOM methods instead of building large HTML strings.

A robust pattern (HTML + JS, IE7‑compatible) is to store the HTML in a data attribute (escaped by PHP) and build the table via DOM methods when the link is clicked:

<!-- markup generated by PHP with event_info HTML escaped for attributes -->
<a href="#" data-info="&lt;a href='http://example'&gt;link&lt;/a&gt;">4</a>
<div id="infoOut"></div>
var out = document.getElementById('infoOut');
var links = document.getElementsByTagName('a');
for (var i=0;i<links.length;i++){
  var info = links[i].getAttribute('data-info');
  if (!info) continue;
  links[i].onclick = (function(txt){
    return function(){ // build elements to avoid illegal HTML insertion
      while(out.firstChild) out.removeChild(out.firstChild);
      var table = document.createElement('table');
      table.style.border = '1px solid red';
      var tr = document.createElement('tr');
      var td = document.createElement('td');
      td.innerHTML = txt;
      tr.appendChild(td);
      table.appendChild(tr);
      out.appendChild(table);
      return false;
    };
  })(info);
}

For PHP-to-JS safety, serialize content with json_encode() or escape with htmlspecialchars(..., ENT_QUOTES) before placing it in attributes. These practices avoid the IE7 parsing quirks that produced the original error while keeping the calendar links and event HTML intact.

Recommended Answers

All 3 Replies

Member Avatar for sqlchopper

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.

Member Avatar for AbberLine

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

Member Avatar for AbberLine

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

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.