none
Why my click events are not working

    Question

  • I'm desesperately trying to get a simple click event set within a minimalist basic gadget:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <title>Test</title> <style type="text/css"> body, #content { width: 200px; height: 200px; padding: 0; margin: 0; background: #fff } </style> <script type="text/javascript">
     function loadMain() {
    document.getElementById('content').attachEvent("onclick", function() {
    document.getElementById('content').innerHTML = 'it works';
    });
    }
    </script>
    </head>
    <body unselectable="on" scroll="no" onload="loadMain();">
    <div id="content"></div>
    </body></html>
    This shows a white rectangle that should update when clicked (and that's what IE does). But nothing happens! However if I add an empty onclick="" property to my <div> tag, then suddenly the event is properly registered and fired. I've searched and checked examples and it seems nobody has this puzzling issue setting events programmaticaly.
    Monday, March 01, 2010 8:08 PM

All replies

  • I just had this problem. Try adding "return false;" to the end of your onClick function. This may not resolve your issue as my troubles were with an onClick function on a link, but it's worth a shot.
    Monday, March 01, 2010 8:41 PM
  • Thanks, tried but it didn't help. I don't think the event handler is set at all so whichever way it ends likely has no impact on making it works.

    I can't believe nobody else is having this issue, my test gadget is as simple as possible and works with IE. Other gadget code I've seen set events the same way and seem to work fine. I tried using jQuery to set events it's also a no-go :(
    Monday, March 01, 2010 10:02 PM
  • I copy and pasted your code into an HTML file and it works perfectly.

    I am getting errors for unselectable and scroll in your body tag they are not valid attributes of the body tag; however, it worked. I made a small change to the style to help clarify where the box is to click. Code is below.


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <title>Test</title>
    <style type="text/css" >
    body { width: 200px; height: 200px; padding: 0; margin: 0; background:white; }
    
    #content { width: 50px; height: 50px; padding: 0; margin: 0; background:blue; }
    </style>
    <script type="text/javascript">
    
        function loadMain() {
    
            document.getElementById('content').attachEvent("onclick", function () {
    
                document.getElementById('content').innerHTML = 'it works';
    
            }); 
        }
    </script>
    </head>
    <body onload="loadMain();">
    
    <div id="content" ></div>
    
    </body></html>
    

    ---------------------------------------------- Help the community and mark posts as Answered if it helps you out ----------------------------------------------
    Tuesday, March 02, 2010 7:26 AM
  • I created a new gadget folder, copy & pasted your code along with the following manifest (so just these two files in C:\Program Files\Windows Sidebar\Gadgets\test.Gadget ) and the event still doesn't work. Would you mind to share what manifest you are using? I'm trying this on Windows 7 x64.

    <?xml version="1.0" encoding="utf-8" ?>
    <gadget>
        <name>Test</name>
        <namespace>microsoft.windows</namespace>
        <version>1.0.0.0</version>
        <author name="Me"></author>
        <copyright>&#169; 2010</copyright>
        <description>Some test</description>
        <icons></icons>
        <hosts>
            <host name="sidebar">
                <base type="HTML" apiVersion="1.0.0" src="test.html" />
                <permissions>Full</permissions>
                <platform minPlatformVersion="1.0"/>
            </host>
        </hosts>
    </gadget>
    Tuesday, March 02, 2010 8:01 AM
  • Sorry for the late reply. I've been busy being a new dad.

    So a few things here. You're right the click event does not work in the gadget and a few things reasons. So I've go it to work but not the way you coded it. Here are the reasons why.

    Your onload event was not allowing the div to become a clickable. It is also not recommended to use onload events in the body because of security reasons.

    So rather then use the body, I've assigned the div the onclick event directly. This provides you with a click area then I've created another div outside of the click area for your "it works" to be presented. This is very standard as you would put an image inside the div and then when you click on it something happens. Hope this helps and sorry for the delay.  
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <title>Test</title>
    <style type="text/css" >
    body { width: 200px; height: 200px; padding: 0; margin: 0; background:white; }
    
    #content { width: 50px; height: 50px; padding: 0; margin: 0; background:blue; }
    </style>
    <script type="text/javascript">
    
        function onclick_event() {
                      document.getElementById('text').innerHTML = "it works";
           
        }
    </script>
    </head>
    <body>
    
    <div id="content" onclick="onclick_event()"></div><div id="text"></div>
    
    </body>
    </html>


    ---------------------------------------------- Help the community and mark posts as Answered if it helps you out ----------------------------------------------
    Thursday, March 04, 2010 5:18 AM
  • First congratulations!

    Thanks for the help. I actually found out that you don't even need to set the event in the "onclick" property itself. My code works as it is provided that :
    - you put <div id="content" onclick=""></div>  (apparently having an empty onclick tag is enough to get the event to be set properly later on)
    - or you put an <img /> tag inside the <div> : in that case the click works when you click over the image but not the rest of the div element

    What I don't understand is that other existing gadgets seem to work by setting events the way I do and without using any of these hacks, so I'm still guessing there's a "magic trick" to make it works. I don't want to go back to setting events within the HTML because it means I cannot write any sort of advanced gadget, or use a Javascript framework like jQuery.
    Thursday, March 04, 2010 10:11 AM
  • Thanks for the congrats.

    What I like to do each time I create a gadget is to create the folder tree first. Starting with the main gadget folder.

    XXX.gadget contains:
    =========================
     - en-us folder //this changes for different languages so if you were create gadgets for the uk you would create a folder en-uk etc...
     - image folder
    drag.png // image when you drag it around
    icon.png // image that shows in the gadget list

    ------------------------------------------------
    en-us folder contains the following
        css folder  // your .css files are stored here
        js folder   // your .js files are stored here
       

    To link to the javascript file in the javascript folder use the below tag and instead of placing the javascript code between the script in the html you write it into a .js file. If you're not using a coding program like visual studio
    <script src="js/<yourfile>.js" language="javascript" type="text/javascript"></script>

    ---------------------------------------------- Help the community and mark posts as Answered if it helps you out ----------------------------------------------
    Thursday, March 04, 2010 6:05 PM
  • I had the exact same problem in Windows 7.

    The "onClick"-event was not working properly, no matter how I set the event handler and all sorts of fiddling. It would only work occasionally, say one click out of five.

    Struggled with this for a couple of days, until I found the problem: I used a transparent background image and somehow, no idea how, this messed up the onClick event. I went to Photoshop and changed the background (a PNG-file) from transparent to completely opaque, and voila, onlclick was working perfectly.

     

    Hope this can help someone else with this problem.

    Regards,

    Anders

    Thursday, September 02, 2010 11:51 AM