Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post

    function event being uncontrollably fired...

    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

    Code:
    <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>

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,446
    Thanks
    13
    Thanked 361 Times in 357 Posts
    Quote Originally Posted by KevinJohnson View Post
    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.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Dormilich View Post
    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....

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,446
    Thanks
    13
    Thanked 361 Times in 357 Posts
    Quote Originally Posted by KevinJohnson View Post
    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).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Dormilich View Post
    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.

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,446
    Thanks
    13
    Thanked 361 Times in 357 Posts
    Quote Originally Posted by KevinJohnson View Post
    force microsoft to be standards-compliant.
    "I have a dream!"


    anyway, W3C DOM-2-Events would go like
    PHP Code:
    // in each script you can define:
    // (fn being you function’s name)
    window.addEventListener("load"fntrue);
    // or
    window.addEventListener("DOMContentReady"fntrue); 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by KevinJohnson View Post
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,566 Times in 4,530 Posts
    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:
    Code:
    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.
    Last edited by Old Pedant; 11-17-2010 at 12:10 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    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:
    Code:
    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....

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,566 Times in 4,530 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    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.



  •  

    Posting Permissions

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