OnClick not loading image

**Scharschmidt** · 08-01-2012 11:28 AM

I've torn all of my hair out trying to figure this out. I am trying to use Javascript to load an image and display it in a div. It works just fine when I use an absolute for the file name. When I try to use a variable, it does nothing. When I trace the variable, it does contain the correct value. I'm stumped.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<title>List of Parks</title>
		<link href="guide.css" rel="stylesheet" type="text/css">
		<style type="text/css"></style>
		
		<script type="text/javascript" src="../jQuery/jQuery.js"></script>
		<script type="text/javascript">

		<!--
			function showImage()
		{
			document.getElementById('loadingImage').style.visibility='visible';
		}

		-->

		</script>
		
	</head>
		
<body>
	<div id="container">
		<div id="state"></div>
		
		<div id="list">		
			<?php foreach ($datas as $name): 
				{
				if ($name['state'] == 'PA')
				{
			?>	

			<input type="hidden" name="id" value="<?php echo $name['id']; ?>">
			
			<h2><?php echo htmlspecialchars($name['name'], ENT_QUOTES, 'UTF-8');?></h2>
			<?php htmlspecialchars($name['site'], ENT_QUOTES, 'UTF-8');?>
			<?php $link = $name['site']; ?>
			<ul id="link">
			<li class="l1"><?php echo "<a href=$link>$link</a>" ?></li>
			</ul>
			<br>
			<?php echo htmlspecialchars($name['description'], ENT_QUOTES, 'UTF-8');?>
			<?php echo htmlspecialchars($name['street'], ENT_QUOTES, 'UTF-8');?>
			<br>
			<?php echo htmlspecialchars($name['city'], ENT_QUOTES, 'UTF-8');?> ,
			<?php echo htmlspecialchars($name['state'], ENT_QUOTES, 'UTF-8');?>
			<?php echo htmlspecialchars($name['zip'], ENT_QUOTES, 'UTF-8');?> 

		<?php $file = $name['id'];
		$image = '../maps/'.$file.'.gif';?>	
		<input type="button" value="click for map" onclick="showImage();"/>

			<div id="trailmap">
				<img id="loadingImage" src="<?php $image ?>" style="visibility:hidden"/>
			</div>
			
			<?php echo $image?>
		
		<hr width="100%" size="3" black />	
			
			
			<?php 
				}
				}
				endforeach; ?>			
			</div>
	</div>
	
	<div class="fixbox">
	<div id="statemap"></div>
	<div id="home"></div>
	<div id="guide"></div>
	</div>
	
</body>
</html>

**bionoid** · 08-01-2012 02:45 PM

I see one problem where you forgot to put in "echo":

Code:

...

			<div id="trailmap">
				<img id="loadingImage" src="<?php echo $image; ?>" style="visibility:hidden"/>
			</div>

...

**Scharschmidt** · 08-01-2012 02:49 PM

Thanks. Unfortunately I figured that out and there is a whole other problem.

The variable $image does iterate properly. However, whichever button I hit, it always displayed ../maps/1.gif even though the file name (which corresponds with the id should change with each listing.

Here's where it gets weird. I deleted that file, and put another one in it's place. So now there is a different image in ../maps/1.gif. It still displays the image that was there before, even though it's been deleted. I went to another browser and did the test, and it took the new first image. I went back, re-opened Firefox, and it still displays the deleted image.

What the hell?

**bionoid** · 08-01-2012 02:56 PM

If you're still using the code above then I don't see how it's supposed to work, there are a couple of static id fields (all id's in a document should always be unique), so how does it know which image to show?

Your other problem just sounds like a caching issue.

If you have the site available online, it would be easier to problem solve. Otherwise you could also just post the result of what PHP produces.

**Scharschmidt** · 08-01-2012 03:13 PM

The caching issue sounds like the best bet. But I don't know anything about how to solve that. Is there a way to clear the cache?

**bionoid** · 08-01-2012 03:16 PM

To clear cache:

Internet Explorer: Tools -> Internet Options -> Delete -> Tick Temporary Internet Files -> Delete
Firefox : Tools -> Clear Recent History... -> Tick Cache -> Clear Now

Sometimes using CTRL+F5 to refresh the page work too.

Did you sort out the id problem already?

**Scharschmidt** · 08-03-2012 10:36 AM

Sorry for disappearing. I had to take a break from this before I lost my mind. The cache is not the issue. Which is good, because I can only fix this on my own computer. Whatever.

The id problem is solved because the entire listing is in a php foreach loop. For each listing it pulls the information to display (name, address, etc) and an id number. The id number also corresponds to the name of the image file.

When I trace the id, it works. When I trace the variable that I am using that includes the path and filename, it works. But when I hit the button, it does not display the correct image. It's a little baffling, because at that point in the program the variable that represents the filename is correct. So I don't know why when I use the variable, it doesn't pull the right image.

**bionoid** · 08-03-2012 11:36 AM

I've made a few changes to your code (in red), see if that's working better:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<title>List of Parks</title>
		<link href="guide.css" rel="stylesheet" type="text/css">
		<style type="text/css"></style>

		<script type="text/javascript" src="../jQuery/jQuery.js"></script>
		<script type="text/javascript">

		<!--
			function showImage(id)
		{
			document.getElementById('loadingImage' + id).style.visibility='visible';
		}

		-->

		</script>

	</head>

<body>
	<div id="container">
		<div id="state"></div>

		<div id="list">
			<?php foreach ($datas as $name):
				{
				if ($name['state'] == 'PA')
				{
			?>

			<input type="hidden" name="id" value="<?php echo $name['id']; ?>">

			<h2><?php echo htmlspecialchars($name['name'], ENT_QUOTES, 'UTF-8');?></h2>
			<?php htmlspecialchars($name['site'], ENT_QUOTES, 'UTF-8');?>
			<?php $link = $name['site']; ?>
			<ul id="link">
			<li class="l1"><?php echo "<a href=$link>$link</a>" ?></li>
			</ul>
			<br>
			<?php echo htmlspecialchars($name['description'], ENT_QUOTES, 'UTF-8');?>
			<?php echo htmlspecialchars($name['street'], ENT_QUOTES, 'UTF-8');?>
			<br>
			<?php echo htmlspecialchars($name['city'], ENT_QUOTES, 'UTF-8');?> ,
			<?php echo htmlspecialchars($name['state'], ENT_QUOTES, 'UTF-8');?>
			<?php echo htmlspecialchars($name['zip'], ENT_QUOTES, 'UTF-8');?>

		<?php $file = $name['id'];
		$image = '../maps/'.$file.'.gif';?>
		<input type="button" value="click for map" onclick="showImage(<?php echo $name['id']; ?>);"/>

			<div id="trailmap">
				<img id="loadingImage<?php echo $name['id']; ?>" src="<?php echo $image; ?>" style="visibility:hidden"/>
			</div>

			<?php echo $image?>

		<hr width="100&#37;" size="3" black />


			<?php
				}
				}
				endforeach; ?>
			</div>
	</div>

	<div class="fixbox">
	<div id="statemap"></div>
	<div id="home"></div>
	<div id="guide"></div>
	</div>

</body>
</html>

We can try clean it up, making it a more readable afterwards, send it through the validator etc.

**Scharschmidt** · 08-03-2012 03:05 PM

Wow Wow Wow that worked. I had given up and come up with a compromise that I didn't like nearly as much. I'm so very happy. Thank you SO MUCH.

**Scharschmidt** · 08-03-2012 03:09 PM

Now that I'm done dancing around with happiness...can you please explain why this worked? I kind of get it, but not really.

**Scharschmidt** · 08-03-2012 03:42 PM

One small issue that I don't know if it can be fixed...

When you hit the button on listing #1, the right map comes up. If you then hit the button for listing #2, the right map takes its place. This works for everything, as long as you are hitting the button for a listing that has a HIGHER id than the one you pressed before. If you try to hit #4 after you hit #5, it doesn't work. Any thoughts?

**bionoid** · 08-03-2012 03:50 PM

I'm not sure of what your recordset looks like. I am assuming that $name['id'] is the primary key for that entry, but if not then we should use something else as each id in the document needs to be unique for this to work properly.

I dont suppose you can post the structure of $datas so I can see?

PHP Code:


<?php

    print_r($datas);

?>

**Scharschmidt** · 08-03-2012 04:09 PM

$name['id'] is indeed the primary key id.

I'd be happy to post the structure of $datas, but I'm not entirely sure what you mean. Are you looking for the myPhp database structure? What does print_r($datas); do?

**bionoid** · 08-03-2012 04:25 PM

Ok, well seeing as though we are on the right track anyway, I have tried fixing the errors in the document while formatting it my kind of way:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>List of Parks</title>

		<link href="guide.css" rel="stylesheet" type="text/css" />
		<style type="text/css"></style>

		<script type="text/javascript" src="../jQuery/jQuery.js"></script>
		<script type="text/javascript">

			function showImage(id)
			{
				document.getElementById('loadingImage' + id).style.visibility = 'visible';
			}

		</script>

	</head>
	<body>
		<div id="container">
			<div id="state"></div>
			<div id="list">

<?php

	foreach ($datas as $name) {
		if ($name['state'] === 'PA') {

			echo
				'<input type="hidden" name="id" value="' . $name['id'] . '" />' .
				'<h2>' . htmlentities($name['name']) . '</h2>' .
				'<ul id="link">' .
					'<li class="l1">' .
						'<a href="' . $name['site'] . '">' . $name['site'] . '</a>' .
					'</li>' .
				'</ul>' .
				'<br />' .
				htmlentities($name['description']) . ' ' .
				htmlentities($name['street']) .
				'<br />' .
				htmlentities($name['city']) . ', ' .
				htmlentities($name['state']) . ' ' .
				htmlentities($name['zip']) . ' ' .
				'<input type="button" value="click for map" onclick="showImage(' . $name['id'] . ');" />' .
				'<div id="trailmap">' .
					'<img id="loadingImage' . $name['id'] . '" src="../maps/' . $name['id'] . '.gif" style="visibility: hidden;" alt="" />' .
				'</div>' .
				'<hr width="100%" size="3" />';

		}
	}

?>

			</div>
		</div>
		<div class="fixbox">
			<div id="statemap"></div>
			<div id="home"></div>
			<div id="guide"></div>
		</div>

	</body>
</html>

For my testing I was using data that looks like this (print_r):

Code:

Array
(
    [0] => Array
        (
            [id] => 1
            [state] => PA
            [name] => name
            [site] => site
            [description] => description
            [street] => street
            [city] => city
            [zip] => zip
        )

    [1] => Array
        (
            [id] => 2
            [state] => PA
            [name] => name
            [site] => site
            [description] => description
            [street] => street
            [city] => city
            [zip] => zip
        )

)

There are still a few validation issues like you have the ids "link" and "trailmap" that would be written out per entry.
If you are using them for styling then I suggest changing them to a class instead.

**Scharschmidt** · 08-03-2012 04:40 PM

The code supplied seemed to have the same issue.

Link is used as a piece of data (I need that as the display part of the <a href

Trailmap will probably be deleted. I think I set that up for a feature that I want to add later.

I really appreciate all of this help. I've been working in Php for just a couple of weeks and I've never used JavaScript or JQuery before I started this a few days ago. Since I had to drop out of school, not having an instructor to ask is just about killing me. I'm so grateful for communities like this.

Thread: OnClick not loading image

Thread Tools

Display

OnClick not loading image

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions