JavaScript

5:26 7 Feb '12

I've hit a wall trying to use javascript to write a table with some image tags. I'm looping through an array of image names, then setting their src attribute. The function is creating the <img> tags, but all that displays is the 'missing image' thumbnail. The function is fired via a button. Below is my code.

Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex">
 
<title>Testing Javascript</title>
 
<script type="text/javascript">
 
function getImages() {
 
// Declare variables
var allImages, vRow, vCell, vText, vImg;
var vCnt, i, j, x, y;
var vTable = document.createElement("TABLE");
var vTBody = document.createElement("TBODY");
 
// Insert vBody into vTable
vTable.appendChild(vTBody);
 
// create an array
var images = new Array();
 
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
 
// count values in the array
vCnt = images.length;
 
  // loop through the array of images and answers
  for (i=0; i < vCnt; i++)
  {
	// create a row
	vRow = document.createElement("TR");
 
	// create a TD tag
	vCell = document.createElement("TD");
 
	// create IMG element
	var image = images[i];
	vImg = document.createElement("IMG");
	vImg.setAttribute("src", "images/" + image);
 
	// insert the img tag into the td tag
	vCell.appendChild(vImg);
 
	// insert the cell into the row
	vRow.appendChild(vCell);
 
	// insert the row into the table
	vTBody.appendChild(vRow);
  }
 
// add the table to the doc
var vTableContainer = document.getElementById("vTableContainer");
vTableContainer.appendChild(vTable);
}
// end updatePage()
</script>
</head>
 
<body bgcolor = "#FFFFFF">
<h2>Javascript and Images</h2>
 
<div id="parentDiv">
 
<p>
Trying to set the image source with js...
</p>
 
<div id="childDiv">
 
<form method="GET">
<input type="button" value="DISPLAY IMAGES" onClick="getImages();" />
</form>
 
</div>
 
<div id="vTableContainer"></div>
 
</div>
</body>
</html>

Dean Oliver

6:40 7 Feb '12

Hi you can either do it the standard way as it is shown in this article
http://reference.sitepoint.com/javascript/Element/setAttribute[^]
Or I suggest you rather use the jquery api. it's alot easier for manipulating tags etc; It'll make your life far easier.
http://api.jquery.com/attr/[^]
Here's an excellent beginner's guide.
http://www.shopdev.co.uk/blog/jquery-from-scratch-a-beginners-guide/[^]
Hope this all helps.

16:24 7 Feb '12

Dean, Thanks for the reply. I've been working with the jquery api just a bit today, and I really like it. Thanks for the reference!
Sign In·View Thread·Permalink

Dean Oliver

21:56 7 Feb '12

Please vote if you found my answer useful. thanks
Sign In·View Thread·Permalink

18:12 7 Feb '12

I just checked about setAttribute. It seems that only Firefox implemented it properly. JQuery is a very good choice. for your information you can also use imgobject.src='my/image/source.jpg'; //it will do fine
Sign In·View Thread·Permalink

Images Won't display in IE 7

twseitex

2:50 19 Feb '12

(1) Please don't use names of collections for private vars

so var images = new Array();
better var arArrayOfImagesObjects=new Array();

images is al pre-dfined collection: document.images

see http://msdn.microsoft.com/en-us/library/ms537461.aspx

(2) To set scr:

valueof .src is not same like pure string

preload image

var imgObjekt1=new Image(); // height and width if you want
imgObjekt1.src='whatYouWant.jpg'; // maybe with path

vImg = document.createElement("IMG"); // check pionter !
if(vImg!=null)
{
// append into object (into child of body) // append into collection images automatically
// check pointer of appended object, use e.g. var imgAppendedImgObject

if(imgAppendedImgObject!=null)
{imgAppendedImgObject.src=imgObjekt1.src; // will be (now) rendered in body
// don't use setAttribute("src", "images/" + image);
}
}

(3) FIRST optimize your code during edit and THEN check errors at run time.

to createElement and appendChild

check always pointers != null

if you use a collection like images check too

declare vars inside of function --> local vars

declare vars inside of for{} --> declare 1 time outside of for and use inside

declare constants like "image1.jpg" outside of function --> use global code e.g. at begin of js-file (easy find and edit in js-file).

6:27 5 Feb '12

Would someone please tell me why this js won't display images in IE 7, but works perfectly in Firefox? I'm using Windows XP, and I've double-checked all my settings in IE 7. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
 
<SCRIPT LANGUAGE="JavaScript">
window.onload = fnWrite;
 
function fnWrite()
{
  // Declare variables
  var vTable = document.createElement("TABLE");
  var vTBody = document.createElement("TBODY");
  var vRow, vCell, vDiv, vImg;
  var i;
 
  var images = new Array();
  images[0] = "images/treble_f1.JPG";
  images[1] = "images/treble_c1.JPG";
  images[2] = "images/treble_d1.JPG";
  images[3] = "images/treble_e1.JPG";
 
  // Insert vBody into vTable
  vTable.appendChild(vTBody);
 
  // Insert a row
  vRow = document.createElement("TR");
  vTBody.appendChild(vRow);
  vCell = document.createElement("TD");
  vRow.appendChild(vCell);
 
  // Insert images
  for (i=0; i<images.length; i++)
  {
    vDiv = document.createElement("DIV");
    vCell.appendChild(vDiv);
 
    vImg = document.createElement("IMG");
    vImg.src = images[i];
    vImg.setAttribute("alt", "image");
    vCell.appendChild(vImg);
  }
  // Insert the table
  vTableContainer.appendChild(vTable);
}
</SCRIPT>
 
</HEAD>
<BODY>
<H1>Javascript Won't Work in IE 7</H1>
<div id="vTableContainer"></div>
 
</BODY>
</HTML>

Richard MacCutchan

23:23 5 Feb '12

Try moving the line window.onload = fnWrite; after the `fnWrite()` function block. Unrequited desire is character building. OriginalGriff I'm sitting here giving you a standing ovation - Len Goodman
Sign In·View Thread·Permalink

4:15 6 Feb '12

Thanks for the reply, however that did not fix this problem. The IE browser does display the little thumbnail box, which tells me the image tag is there, but this line of code vImg.src = images[i]; for some reason is not setting the source for the image. I've even tried hard coding in the source with no luck.
Sign In·View Thread·Permalink

Re: Images Won't display in IE 7 - SOLVED

Richard MacCutchan

4:30 6 Feb '12

Sorry, it was a bit of a stab in the dark, but I know that there are some strange inconsistencies between IE and the other browsers. Unrequited desire is character building. OriginalGriff I'm sitting here giving you a standing ovation - Len Goodman
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Re: Images Won't display in IE 7 - SOLVED

4:43 6 Feb '12

Thanks for the reply. Well, I removed the javascript from the HTML page and put it in a js file, and now it works. Go figure... Thanks a lot, Microsoft. :(
Sign In·View Thread·Permalink

Richard MacCutchan

5:31 6 Feb '12

This[^] may help explain things. Unrequited desire is character building. OriginalGriff I'm sitting here giving you a standing ovation - Len Goodman
Sign In·View Thread·Permalink

jsc42

3:41 14 Feb '12

I've just tried your code with MS-IE7 on WXP and it works for me! I have a similar problem with code generated on the fly and displayed using IE.navigate using automation - the images come up with the red [x] box or the 4 symbol box but if I show the source, save it, run the saved version the images come up correctly. Are you using IE automation or simple file opening?
Sign In·View Thread·Permalink

Problem with args.isValid in JS [modified]

twseitex

2:59 19 Feb '12

A massive problem of Microsoft

If you want reders animated gifs then that will by chrashed by Internet Explorer
preload img with '?' after suffix (:gif?) have no result: animated gif even not rendered.

e.g.

// X00 is an existing image object
// X01 is an existing preloaded image object with filled .src of an animated gif

X00.src=X01.src+'?'; // only if IE exists
X00.src=X01.src; // for opera etc.

preload image

var imgObjekt1=new Image(); // height and width if you want
imgObjekt1.src='animated.gif'; // maybe with path, but not with '?'

vImg = document.createElement("IMG"); // check pionter !
if(vImg!=null)
{
// append into object (into child of body) // append into collection images automatically
// check pointer of appended object, use e.g. var imgAppendedImgObject

if(imgAppendedImgObject!=null)
{imgAppendedImgObject.src=imgObjekt1.src+'?'; // will be (now) rendered in body in IE
}
}

dayakar_dn

22:14 1 Feb '12

Hi,

i am not able set the args.isValid as false for JS function...which is not having custom validator..

find the code below:

<asp:LinkButton runat="server"  ID="btnApply" TabIndex="1"  CssClass=" primary"  OnClientClick = "return ApplyClick(this);" >
 
JS Code:
 
function Applyclick(args) {
 

if (errMsg != null) {
                       args.IsValid = false;
 
                      }
 
return false;
}

thanks in advance

modified 2 Feb '12.

Re: Problem with args.isValid in JS

Re: Problem with args.isValid in JS

22:36 1 Feb '12

I am sorry I dont know asp.net but yet what is args and who is calling ApplyPromotionClick ??? I know I am coward since the day I know that fortune favors the brave
Sign In·View Thread·Permalink

dayakar_dn

23:03 1 Feb '12

Sorry function name should be applyclick
Sign In·View Thread·Permalink

Re: Problem with args.isValid in JS

update several DIV using javascript with mysql data

23:10 1 Feb '12

In that case Check your Firefox or Chrome error message. I cant recall any html object property IsValid. I think you need to say more clearly what you need I know I am coward since the day I know that fortune favors the brave
Sign In·View Thread·Permalink

Sergio84

10:09 30 Jan '12

Hello everyone, I would like to know if you can help me out in a simply task yet I cant get my way around it.
Ive manage to update a single DIV but cant update a php file with several different DIV.
Data is comming from a mysql query using a separate php file.

This is what ive got, please can you help me write a simple code to recover more than one piece of data from a mysql query and update all the divs of an html,php file?

<pre lang="Javascript">

<<pre lang="xml">html>
<head>

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

setInterval(get,1000);

function get() {
$.post('data.php', {
},
function(output){
var datosobtenidos = $('#age').html(output);
document.getElementById('diesel').innerHTML = datosobtenidos; //"ADIOS";

});
}

</script>

</head>

<body>
<h2>JavaScript Auto Refresh Page</h2>
<p>This code will refresh you page in 6 seconds. We have used OnLoad() Event function to call our function.
Note : Please don’t use a lot of auto refresh page because it is kind of annoying and your sever bandwidth will be decreasing, one way you are increasing hits to server.

<p>
<div id="age"></div>
<br />
<br />

<div id="diesel"></div>
</p>

</body>

</html >

Re: update several DIV using javascript with mysql data