On fly change the text, image src not supported by IE?

N

Nick

I have the following code, and it works well on Mozilla 1.6. (However,
the image src property cannot be set on Mozilla 1.2.1).

Unfortunately, all the code:
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = itemInfo.price;
doesn't work on IE. What's the proper way to set them in IE?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>popup</title>
<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>
</head>
<body onload="javascript:show_details(opener.itemID);">

<table cellpadding="2" cellspacing="2" border="1"
style="text-align: left; width: 100%;">
<tbody>
<tr align="center">
<td style="vertical-align: top;"><img src="na.jpg" title=""
alt="Picture" ID="itemImage"/><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
 
I

Ivo

Nick said:
I have the following code, and it works well on Mozilla 1.6. (However,
the image src property cannot be set on Mozilla 1.2.1).

Unfortunately, all the code
doesn't work on IE. What's the proper way to set them in IE?
Click to expand...

With the code below, if there is an element with id "price" and an an
innerHTML property and an object itemInfo with a property price, then IE
will display it. Microsoft singlehandedly invented innerHTML so it would be
kinda strange if they suddenly stopped supporting it. Now I do see a nice
accessible div with id="price" below, so I guess the problem lies with the
itemInfo variables. Do you get the expected response if you write
alert(itemInfo.price) in the function?

<script language="javascript">
<!---
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>
</head>
<body onload="javascript:show_details(opener.itemID);">
Click to expand...

You may drop the bit "javascript:". Unless you have specified a different
default content-type for scripts with a meta tag in the head, anything
inside the onload="..." will automatically be interpreted as javascript.

<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>
Click to expand...
<snip>

HTH
Ivo
 
N

Nick

Ivo said:
With the code below, if there is an element with id "price" and an an
innerHTML property and an object itemInfo with a property price, then IE
will display it. Microsoft singlehandedly invented innerHTML so it would be
kinda strange if they suddenly stopped supporting it. Now I do see a nice
accessible div with id="price" below, so I guess the problem lies with the
itemInfo variables. Do you get the expected response if you write
alert(itemInfo.price) in the function?
Click to expand...
Thanks, it turn out be the scope problem because I wrote:

<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
var imageSrc;
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
...
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>

The items.js in the first <script> tag defined the object variable
items, which is global visibla in Mozilla, but the second <script> in IE
cannot see the variable. That's cause the problem.

I don't want to combine it into one because items.js will be a large
object variable definition. And the second <script> tag is for
"presentation layer" so it had better go with the html code. Any
solution to make a javascript variable definition global in the whole html?

Btw, looks mozilla 1.2.1 doesn't support

document.images.itemImage.src = itemInfo.imageUrl;

But Mozilla 1.6 can run the above line without problem.
 
I

Ivo

Nick said:
Thanks, it turn out be the scope problem because I wrote:

<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
var imageSrc;
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
...
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>

The items.js in the first <script> tag defined the object variable
items, which is global visibla in Mozilla, but the second <script> in IE
cannot see the variable. That's cause the problem.

I don't want to combine it into one because items.js will be a large
object variable definition. And the second <script> tag is for
"presentation layer" so it had better go with the html code. Any
solution to make a javascript variable definition global in the whole
Click to expand...
html?

Once a scriptfile is read, it becomes part of the page source. Any global
variables that you create in script.js are as global as the functions are
other things that may be in the file. I can't say without having seen
script.js why IE is not picking up the "items" variable while Mozila is. You
pass one variable to the show_details function, "opener.itemID", why not the
"items" variable as well?
Ivo
 
N

Nick

Ivo said:
html?

Once a scriptfile is read, it becomes part of the page source. Any global
variables that you create in script.js are as global as the functions are
other things that may be in the file. I can't say without having seen
script.js why IE is not picking up the "items" variable while Mozila is. You
pass one variable to the show_details function, "opener.itemID", why not the
"items" variable as well?
Ivo
Click to expand...

Now I put everything in the html file (File is shown below), Mozilla 1.6
always works fine. But IE 6 always error. When using VS.Net debug, it
said that the fill_details is not defined and stop at the <body
onload="javascript:fill_details(opener.itemID)...>.

It's so strange...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>popup</title>
<!--script src="items.js" language="JavaScript"></script-->
<script language="javascript">
<!---
var items = {
Default : {descr:'n/a', price:'n/a', color:'n/a', imageDir:'', top:0,
left:0, width:350, height:350},
ring1 : {descr:'Ring 1 description.', price:120, color:'gold',
imageDir:'', top:100, left:100, width:300, height:350},
};

// Member methods
function getImageUrl(ID) {
return this[ID].imageDir + ID + '.jpg';
}

// Assign member methods
items.imageUrl = getImageUrl;

// Member method
function getARecord(ID) {
var result = {descr:this[ID].descr, price:this[ID].price,
color:this[ID].color, imageUrl:this.imageUrl(ID),
left:this[ID].left, top:this[ID].top, width:this[ID].width,
height:this[ID].height};
return result;
}

items.getARecord = getARecord;

function fill_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = 'Price: ' + itemInfo.price;
if (itemInfo.width != 0 && itemInfo.height != 0)
window.resizeTo(itemInfo.width, itemInfo.height);
if (itemInfo.top != 0 && itemInfo.left != 0)
window.moveTo(itemInfo.left, itemInfo.top);
}
//--->
</script>
</head>
<body onload="javascript:fill_details(opener.itemID);">

<table cellpadding="2" cellspacing="2" border="1"
style="text-align: left; width: 100%;">
<tbody>
<tr align="center">
<td style="vertical-align: top;"><img src="na.jpg" title=""
alt="Picture" ID="itemImage"/><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
 
N

Nick

Nick said:
Ivo said:
html?

Once a scriptfile is read, it becomes part of the page source. Any global
variables that you create in script.js are as global as the functions are
other things that may be in the file. I can't say without having seen
script.js why IE is not picking up the "items" variable while Mozila
is. You
pass one variable to the show_details function, "opener.itemID", why
not the
"items" variable as well?
Ivo
Click to expand...

Now I put everything in the html file (File is shown below), Mozilla 1.6
always works fine. But IE 6 always error. When using VS.Net debug, it
said that the fill_details is not defined and stop at the <body
onload="javascript:fill_details(opener.itemID)...>.

It's so strange...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>popup</title>
<!--script src="items.js" language="JavaScript"></script-->
<script language="javascript">
<!---
var items = {
Default : {descr:'n/a', price:'n/a', color:'n/a', imageDir:'',
top:0, left:0, width:350, height:350},
ring1 : {descr:'Ring 1 description.', price:120, color:'gold',
imageDir:'', top:100, left:100, width:300, height:350},
};

// Member methods
function getImageUrl(ID) {
return this[ID].imageDir + ID + '.jpg';
}

// Assign member methods
items.imageUrl = getImageUrl;

// Member method
function getARecord(ID) {
var result = {descr:this[ID].descr, price:this[ID].price,
color:this[ID].color, imageUrl:this.imageUrl(ID),
left:this[ID].left, top:this[ID].top, width:this[ID].width,
height:this[ID].height};
return result;
}

items.getARecord = getARecord;

function fill_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = 'Price: ' +
itemInfo.price;
if (itemInfo.width != 0 && itemInfo.height != 0)
window.resizeTo(itemInfo.width, itemInfo.height);
if (itemInfo.top != 0 && itemInfo.left != 0)
window.moveTo(itemInfo.left, itemInfo.top);
}
//--->
</script>
</head>
<body onload="javascript:fill_details(opener.itemID);">

<table cellpadding="2" cellspacing="2" border="1"
style="text-align: left; width: 100%;">
<tbody>
<tr align="center">
<td style="vertical-align: top;"><img src="na.jpg" title=""
alt="Picture" ID="itemImage"/><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Click to expand...
never mind my previous message. The error is caused by a extra comma
when initialize the object items....
 
N

Nick

Ivo said:
It usually is.
Good luck, Ivo
Click to expand...
Thanks, but Mozilla doesn't have problem with the extra ",". And I even
thought use this feature because I will use spreadsheet/database to
generate the initialize javascript code and I wounldn't worry about the
last ",".

Anyway, this example also shows how difficult to debug javascript, even
with MS VS.Net....
 
T

Thomas 'PointedEars' Lahn

Ivo said:
"Nick" [...] wrote [...]:
Click to expand...

Please do not write so-called attribution novels. Most of the
information in your attribution is superfluous as it is already
contained in the headers of the posting you reply to, while it
makes your posting and threads where your postings are quoted,
not as easy legible.
You may drop the bit "javascript:". Unless you have specified a different
default content-type for scripts with a meta tag in the head, anything
inside the onload="..." will automatically be interpreted as javascript.
Click to expand...

No, only with UAs that use JavaScript as the default scripting language.
Thus standards-compliant HTML calls for explicitely specifying the
default scripting language to be used in values of intrinsic event
handler attributes:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
...
</head>

See <http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.2>.


PointedEars
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
Thomas 'PointedEars' Lahn
Ivo said:
"Nick" [...] wrote [...]:
Click to expand...

Please do not write so-called attribution novels. Most of the
information in your attribution is superfluous as it is already
contained in the headers of the posting you reply to, while it
makes your posting and threads where your postings are quoted,
not as easy legible.
Click to expand...

Ignore such remarks; he has yet to grow up. Evidently there is plenty
of time for that; but alas no progress.

The correct, agreed situation is described in the RFCs and allied
documents; they are authoritative, unlike pointy-head.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to wrap <td> content . 16
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Sort by number of characters 1
Image shifts to the right when export the page to pdf 4
Only one table shows up with the information 2
Javascript DOM 1
Help with code 0

Members online

Total: 47 (members: 3, guests: 44)
Robots: 469

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top