...

View Full Version : function event being uncontrollably fired...



KevinJohnson
11-15-2010, 04:03 PM
I'm writing an XML generating app here, and i have come across an interesting problem.
When i click on any part of the body of the document, the function addRow() is being triggered. This is odd, because the only event handler that should ever fire this is a Button that much be clicked, and it is also triggered once when the document is Loaded.
The biggest question is, ...why when i click anywhere on the document, is this even being triggered.

here's my code (sorry it's a bit long..but copy and paste and you should be able to replicate what i'm getting)

Some notes:
1. removing the script tabber.js does not change this error. It still happens
2. removing the onLoad= in the body, and manually adding in the first table cell, and row of the table seems to fix this, however, i need to eventually load a list of table cells from a CSV file. So that workaround won't be sufficient



<html>
<title>Site Management</title>

<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">


<script type="text/javascript">
//document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>

<script type="text/javascript">
var HumidorInnerHTML = [8];
var IntroInnerHTML = [6];
var ImageInnerHTML = [6];
var OthersInnerHTML = [8];
var WatchInnerHTML = [10];


// Intro InnerHTML
IntroInnerHTML[0] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
IntroInnerHTML[1] = "<input type='textbox' id='Intro_Caption" + IntroIndex + "'>";
IntroInnerHTML[2] = "<input type='textbox' value='85' id='Intro_Height" + IntroIndex +"'>";
IntroInnerHTML[3] = "<input type='textbox' value='56' id='Intro_Width" + IntroIndex + "'>";
IntroInnerHTML[4] = "<img src='delete.png' onClick=DeleteRow('" + IntroIndex + "','Intro_Table');>";
IntroInnerHTML[5] = "<img src='add.png' onClick=AddRow('" + IntroIndex + "','Intro_Table');>";

var MyTable;
var IntroIndex = 0;
var ImageIndex = 0;
var WatchIndex = 0;
var HumidorIndex = 0;
var OthersIndex = 0;




function AddRow(index, DIV)
{
MyTable = document.getElementById(DIV);

var newCell;
var newRow = MyTable.insertRow(index);

for (var i = 0; i < IntroInnerHTML.length; i++)
{
newCell = newRow.insertCell(i);
newCell.innerHTML = IntroInnerHTML[i];
}

IntroIndex++;
}

function Init()
{
AddRow(1, "Intro_Table");
}

function DeleteRow(index, DIV)
{
MyTable = document.getElementById(DIV);

MyTable.deleteRow(index);
}

function WriteXML()
{
// Write All XML Files

// Display Tab Variables
var Display_Small_Image = document.getElementById("Display_Small_Src").value;
var Display_Large_Image =document.getElementById("Display_Large_Src").value;
var Display_Caption =document.getElementById("Display_Caption").value;
var Display_Height = document.getElementById("Display_Width").value;
var Display_Width = document.getElementById("Display_Height").value;

//var XMLheader = "<?xml version="1.0" encoding="utf-8" standalone="yes"?><images><pic><image>";

var XMLdata = XMLdata + Display_Small_Image + "</image>" + "<caption><![CDATA[" + Display_Caption + "<width>" + Display_Width + "</width>" + "<height>" + Display_Height + "</height>" + "<detailimage>" + Display_Large_Image;

var XMLfooter = "</detailimage></pic></images>";

// Write the XML File to the Disk
}
</script>
</head>
<body onClick="Init();">
<div class="tabber">

<div class="tabbertab">
<h2>Display</h2>
<p>
<div>
<center><b><font size="5px">Display Options</font></b></center>
<br>
<table>
<tr>
<td>
<table>
<tr>
<td>Small Image</td><td><input type="file" id="Display_Small_Src" onChange="SmallImageChanged('Display_Small_Src', 'Display_Image_Small');"></td>
</tr>
<tr>
<td>Full Size Image</td><td><input type="file" id="Display_Large_Src" onChange="SmallImageChanged('Display_Large_Src', 'Display_Image_Large');"></td>
</tr>
<tr>
<td>Caption</td><td><input type="textbox" id="Display_Caption"></td>
</tr>
<tr>
<td>Width</td><td><input type="textbox" id="Display_Width"></td>
</tr>
<tr>
<td>Height</td><td><input type="textbox" id="Display_Height"></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<img src="NoImage.gif" style="height:150px; width: 150px; border: 1px solid red;" id="Display_Image_Small"></td><td>
<img src="NoImage.gif" style="height:150px; width: 150px; border: 1px solid red;" id="Display_Image_Large"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</p>
</div>


<div class="tabbertab">
<h2>Humidor</h2>
<p>
<div>
<center><b><font size="5px">Humidor Options</font></b></center>
<br>
<table border="1" id="Humidor_Table">
<tr>
<td>Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Picture 1</td><td>Picture 2</td><td>Remove</td> <td>Add</td>
</tr>

</table>
</div>
</p>
</div>

<div class="tabbertab">
<h2>Image</h2>
<p>
<div>
<center><b><font size="5px">Image Options</font></b></center>
<br>
<table border="1" id="Image_Table">
<tr>
<td>Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Remove</td> <td>Add</td>
</tr>

</table>
</div>
</p>
</div>

<div class="tabbertab">
<h2>Intro</h2>
<p>
<div>
<center><b><font size="5px">Intro Options</font></b></center>
<br>
<table border="1" id="Intro_Table">
<tr>
<td>Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Remove</td> <td>Add</td>
</tr>
</table>

</div>
</p>
</div>

<div class="tabbertab">
<h2>Others</h2>
<p>
<center><b><font size="5px">Others Options</font></b></center>
<br>
<div>
<table border="1" id="Others_Table">
</tr>
<td>Image</td> <td>Caption</td> <td>Height</td><td>Width</td><td>Image 1<td>Image 2</td><td>Remove</td><td>Add</td>
</tr>
</table>
</div>
</p>
</div>

<div class="tabbertab">
<h2>Watch</h2>
<p>
<center><b><font size="5px">Watch Options</font></b></center>
<br>
<div>
<table border="1" id="Watch_Table">
<tr>
<td>Preview Image</td> <td>Caption</td> <td>Height</td> <td>Width </td> <td>Image1</td> <td>Image2</td> <td>Image3</td> <td>Image4</td> <td>Remove</td> <td>Add</td>
</tr>


</table>
</div>
</p>
</div>
</div>
<br>
<center>
<input type="button" value="Save" onClick="WriteXML();">
</center>
</body>
</html>

Dormilich
11-15-2010, 04:07 PM
This is odd, because the only event handler that should ever fire this is a Button that much be clicked, and it is also triggered once when the document is Loaded.

that would be body.onload not body.onclick.

KevinJohnson
11-16-2010, 05:45 AM
that would be body.onload not body.onclick.

Yes, it is...i guess that's what i get for coding at 3am (once again)....
it works perfectly actually :)

except that there is a conflict with my Tabber.js script and using the onLoad event. So i'll need to track that down or change to a more simple tabbed interface....

Dormilich
11-16-2010, 08:34 AM
except that there is a conflict with my Tabber.js script and using the onLoad event.

thatís why the DOM-2-Event interface was developed. it would beautifully solve that problem were it not for IE, which does not support that at all (and doing its own thing).

KevinJohnson
11-16-2010, 02:39 PM
thatís why the DOM-2-Event interface was developed. it would beautifully solve that problem were it not for IE, which does not support that at all (and doing its own thing).

IE is not a problem.

i refuse to support it. it's that simple.

;)

when the customer of this web-app asks "why doesn't this work?" , i always ask: "are you using Chrome, Safari, Firefox, or Opera?" and they say "no", i tell them... change your browser to one of those 4, and it will work.

take a stand. force microsoft to be standards-compliant.

Dormilich
11-16-2010, 02:42 PM
force microsoft to be standards-compliant.
"I have a dream!"


anyway, W3C DOM-2-Events would go like

// in each script you can define:
// (fn being you function’s name)
window.addEventListener("load", fn, true);
// or
window.addEventListener("DOMContentReady", fn, true);

glenngv
11-16-2010, 11:22 PM
IE is not a problem.

i refuse to support it. it's that simple.

;)

when the customer of this web-app asks "why doesn't this work?" , i always ask: "are you using Chrome, Safari, Firefox, or Opera?" and they say "no", i tell them... change your browser to one of those 4, and it will work.

take a stand. force microsoft to be standards-compliant.
I don't understand your standards-compliant stance when your code is not standard at all. You're still using non-standard font, b, and center tags as well as innerHTML. You're also using table tag for non-tabular data.

Old Pedant
11-17-2010, 12:06 AM
Ah, come on, folks. It's true the IE lacks addEventListener, but for *MOST* purposes--and especially for adding onload listeners--the work around is easy:


if ( window.addEventListener != null )
{
window.addEventListener("load", yourFunctionName, true);
} else {
window.attachEvent("onload", yourFunctionName);
}

Sure, there are some cases where attachEvent doesn't work right, but for <body onload> replacement, it does just fine.

And, yeah, you can tell the world you won't support IE. But that won't wash in any corporate world. In fact, you'd better be able to support text-only browsers if you expect to sell to some corporate customers. Meaning your site needs to work with no JavaScript at all. (It can be a degraded experience, of course, but it *must* work.)

************

Glenn: Look at his other thread:
http://www.codingforums.com/showthread.php?t=209422

He's just not a very experienced developer. So many errors in that code. Looks like, for all his not using MSIE, he also doesn't use Firebug.

KevinJohnson
11-17-2010, 05:58 AM
Ah, come on, folks. It's true the IE lacks addEventListener, but for *MOST* purposes--and especially for adding onload listeners--the work around is easy:


if ( window.addEventListener != null )
{
window.addEventListener("load", yourFunctionName, true);
} else {
window.attachEvent("onload", yourFunctionName);
}

Sure, there are some cases where attachEvent doesn't work right, but for <body onload> replacement, it does just fine.

And, yeah, you can tell the world you won't support IE. But that won't wash in any corporate world. In fact, you'd better be able to support text-only browsers if you expect to sell to some corporate customers. Meaning your site needs to work with no JavaScript at all. (It can be a degraded experience, of course, but it *must* work.)

************

Glenn: Look at his other thread:
http://www.codingforums.com/showthread.php?t=209422

He's just not a very experienced developer. So many errors in that code. Looks like, for all his not using MSIE, he also doesn't use Firebug.


i run the IT department for a french company here in china. when i told them i could use all Linux and open-source based solutions which would save them a lot on security breaches and software-liscences, they told me i had free reign to configure however best would suit security and cost.

big corporatiotns are starting to see the light....

Old Pedant
11-17-2010, 06:45 AM
And that comment has WHAT to do with turning away customers who only have MSIE on their computers? The company I work for uses 95% or more open source, but they still go to great lengths to support as many browsers as possible. They just now finally made the decision that they were willing to live with a slightly (only slightly!) degraded experience in the newest version for people still running MSIE 5 and MSIE 6. And there are a handful of compromises in the MSIE 7 support, but only a handful.

KevinJohnson
11-17-2010, 07:26 AM
And that comment has WHAT to do with turning away customers who only have MSIE on their computers? The company I work for uses 95% or more open source, but they still go to great lengths to support as many browsers as possible. They just now finally made the decision that they were willing to live with a slightly (only slightly!) degraded experience in the newest version for people still running MSIE 5 and MSIE 6. And there are a handful of compromises in the MSIE 7 support, but only a handful.

i mostly only develop for mobile platforms. using WebKit primarily....and FireFox on ARM11 embedded devices.

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum