JavaScript

7-Feb-12 5:26

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 tags, but all that displays is the 'missing image' thumbnail. The function is fired via a button. Below is my code.

Thanks!

HTML

<!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 Oliver7-Feb-12 6:40

Dean Oliver

7-Feb-12 6:40

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.

PianoMan7-Feb-12 16:24

7-Feb-12 16:24

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!

Dean Oliver7-Feb-12 21:56

Dean Oliver

7-Feb-12 21:56

Please vote if you found my answer useful.

thanks Smile | :)

Mohibur Rashid7-Feb-12 18:12

7-Feb-12 18: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 Smile | :)

Images Won't display in IE 7

twseitex19-Feb-12 2:50

twseitex

19-Feb-12 2:50

(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).

PianoMan5-Feb-12 6:27

5-Feb-12 6:27

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!

XML

<!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 MacCutchan5-Feb-12 23:23

Richard MacCutchan

5-Feb-12 23:23

Try moving the line

JavaScript

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

PianoMan6-Feb-12 4:15

6-Feb-12 4:15

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.

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

Richard MacCutchan6-Feb-12 4:30

Richard MacCutchan

6-Feb-12 4:30

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

PianoMan6-Feb-12 4:43

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

6-Feb-12 4:43

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. Frown | :(

Richard MacCutchan6-Feb-12 5:31

Richard MacCutchan

6-Feb-12 5:31

This[^] may help explain things.

Unrequited desire is character building. OriginalGriff
I'm sitting here giving you a standing ovation - Len Goodman

jsc4214-Feb-12 3:41

jsc42

14-Feb-12 3:41

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?

Problem with args.isValid in JS

twseitex19-Feb-12 2:59

twseitex

19-Feb-12 2:59

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_dn1-Feb-12 22:14

dayakar_dn

1-Feb-12 22:14

Hi,

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

find the code below:

XML

<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 5:03am.

Re: Problem with args.isValid in JS

Mohibur Rashid1-Feb-12 22:36

Re: Problem with args.isValid in JS

1-Feb-12 22:36

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

dayakar_dn1-Feb-12 23:03

dayakar_dn

1-Feb-12 23:03

Sorry function name should be applyclick

Re: Problem with args.isValid in JS

Mohibur Rashid1-Feb-12 23:10

update several DIV using javascript with mysql data

1-Feb-12 23:10

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

Sergio8430-Jan-12 10:09

Sergio84

30-Jan-12 10:09

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

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

Mohibur Rashid7-Feb-12 19:38