www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: OnClick not loading image

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    16

    OnClick not loading image

    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>

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    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>
    
    ...
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Mar 2012
    Posts
    16
    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?

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    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.
    JavaScript: Learn | Validate | Compact | bionoid

  5. #5
    Join Date
    Mar 2012
    Posts
    16
    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?

  6. #6
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    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?
    Last edited by bionoid; 08-01-2012 at 03:20 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  7. #7
    Join Date
    Mar 2012
    Posts
    16
    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.

  8. #8
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    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.
    JavaScript: Learn | Validate | Compact | bionoid

  9. #9
    Join Date
    Mar 2012
    Posts
    16
    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.

  10. #10
    Join Date
    Mar 2012
    Posts
    16
    Now that I'm done dancing around with happiness...can you please explain why this worked? I kind of get it, but not really.

  11. #11
    Join Date
    Mar 2012
    Posts
    16
    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?

  12. #12
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    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);
    ?>
    JavaScript: Learn | Validate | Compact | bionoid

  13. #13
    Join Date
    Mar 2012
    Posts
    16
    $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?

  14. #14
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    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.
    Last edited by bionoid; 08-03-2012 at 04:28 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  15. #15
    Join Date
    Mar 2012
    Posts
    16
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles