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, '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

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

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.