9 Replies Latest reply on Jun 12, 2009 11:27 AM by jbenson@oper8

    Javascript works in browser but not in AIR

    joeavg

      Hi fellow AIR users :-)

       

      I'm trying to use a simple JavaScript based treeview in my AIR app. Basically, it looks like this:

       

      + 1

         - 1.1

         - 1.2

         - 1.3

      + 2

         - 2.1

         - 2.2

       

      [...]

       

      The default view displays only +1 and +2, when you click on either the childnodes are unfolded. This works fine in several browsers but unfortunately not in AIR :-(

      When my AIR app starts, all nodes are unfolded and clicking on a mainnode doesn't collapse the branch. I verified that the code is loaded by adding alerts() to the function.

       

      Any ideas how to debug this?

       

      Thanks in advance!

        • 1. Re: Javascript works in browser but not in AIR
          jbenson@oper8 Level 2

          Could you post some code on how this is built (is it built using the DOM, already present on the page or using innerHTML?) as well as how you're firing the events (onclick, event binding?)

           

          I think if we had a bit more information we could recreate and point you in the right direction.

           

          Thanks

          • 2. Re: Javascript works in browser but not in AIR
            joeavg Level 1

            The data is read from an XML file and transformed to HTML via XSLT. The generated HTML for each node looks like this (it should at least )

             

               <tr>
                <td>
                 <a onClick="treeView(this)"><img src="plus.gif"/> 1</a><div style="display: none"/>
                 <table border="0"><tr><td width="15"></td><td><img src="leaf.gif"/> 1.1<div style="display: none"/></td></tr></table>
                 <table border="0"><tr><td width="15"></td><td><img src="leaf.gif"/> 1.2<div style="display: none"/></td></tr></table>
                 <table border="0"><tr><td width="15"></td><td><img src="leaf.gif"/> 1.3<div style="display: none"/></td></tr></table>
                </td>
               </tr>

             

            I plan to replace the table with divs, but first I wanted to verify that the concept works. The onClick gets fired, because I placed some alerts() in the treeView function.

            • 3. Re: Javascript works in browser but not in AIR
              jbenson@oper8 Level 2

              The issue is that the code is loading javascript on the fly, which is fine in a browser but not in Adobe AIR.  (Actually it *is* fine in some cases in air but only immediately when the page is created, after the page is fully loaded that is not allowed and even then there is weirdness)

               

              You could do one of two things, load it in a security sandbox (probably overkill) or bind the events after the html is loaded.

               

              After your html is built and loaded bind events like this:

               

              document.getElementById('YOUR_A_ID').onclick = function(){ alert('Clicked!'); };

              • 4. Re: Javascript works in browser but not in AIR
                joeavg Level 1

                Thanks for your replay.

                 

                Unfortunately this didn't work for me. I added the event as you said and it gets fired (again tested with alerts()), but the entire tree is still unfolded and doesn't collapse on click :-(

                 

                I also don't understand what you mean by "loading javascript on the fly". I thought my treeView function is working properly, because I can call it all the time (again, verified by alerts())). The "only" thing that doesn't work is the actual tree manipulation..

                 

                * EDIT *

                I can also change the location and text of the elements in the tree. Maybe there's something wrong with my code, which is supposed to (un)fold the tree? I double-checked with Safari to make sure it works with WebKit.

                • 5. Re: Javascript works in browser but not in AIR
                  jbenson@oper8 Level 2

                  When you dynamically create the html via javascript with embedded onclick events you're attempting to bind click events on the fly.

                   

                  for instance if you were to dynamically generate a piece of html that has "onclick" events defined via the html then those wouldn't fire after getting loaded.

                   

                  example:

                  document.getElementById('clickMe').onclick = function(){

                       document.getElementById('loadMe').innerHTML =

                       '<input type="button" onclick="alert(\'clicked\');" value="Now Click Me"/>';

                  };

                   

                  If you clicked on the element "clickMe" it would load the element "loadMe" with a button.  Now clicking on that button wouldn't work as the event handler "onclick" within the button definition will not be used.

                   

                  At least that was what I trying to get at.  (The code above works fine in a normal browser, but the onclick event on the dynamically generated button will not be fired in AIR.

                   

                  However your code could still be working if your alerts are being fired.  Would be happy to look more into it if you have some code to post.  If private feel free to private message me by clicking on my name / sending through forum profile.

                  • 6. Re: Javascript works in browser but not in AIR
                    joeavg Level 1

                    Here's the code:

                     

                    function treeView(node)
                    {
                        var image = null;
                        var style = null;

                        if (node.nextSibling.style.display == "none")
                        {
                            var image = "minus.gif";
                            var style = "block";
                        }

                        else
                        {
                            var image = "plus.gif";
                            var style = "none";
                        }

                        if (node.childNodes.length > 0)
                            if (node.childNodes.item(0).nodeName == "IMG")
                                node.childNodes.item(0).src = image;

                        node.nextSibling.style.display = style;
                    }

                     

                    * EDIT *

                     

                    Just to be clear: I can put alerts everywhere in this function. The if/else branches are was evaluated correctly. It's just that the display doesn't change -> no tree updates.

                    • 7. Re: Javascript works in browser but not in AIR
                      jbenson@oper8 Level 2

                      Nothing special there, should work fine.  Can you verify that when treeview is called that node is not null or undefined?


                      alert(node.tagName); should show "A".  It's possible the reference is just lost?

                       

                      Just grasping at straws here really, I doubt the XLST load is really causing your issues unless you're loading the xml from URLRequest or something similar (ie off page) and then using XLST to style the output.

                       

                      If that's the case then the onclick handler might not fire however if your alerts are within the treeview function and they fire when you click then it has to be a reference issue / ie not knowing which node to target.

                       

                      Edit:  Sorry I can't be more specific I haven't used XLST in AIR apps and am not certain if there would be issues.   I will make a test app though to see what might cause it.

                      • 8. Re: Javascript works in browser but not in AIR
                        joeavg Level 1

                        alert(node.tagName) reports A as you assumed.

                         

                        Again thanks alot for your replies!

                         

                        * EDIT *

                         

                        By the way.. when I said I tested it with different browsers, I wasn't just talking about the JavaScript code, but the XSLT transformation as well! I put a link to my stylesheet into the XML file and let the browser do the work, and since it worked with Safari, I can only suspect that AIR isn't using WebKit's XSLT processor..

                        • 9. Re: Javascript works in browser but not in AIR
                          jbenson@oper8 Level 2

                          When I pasted your html snippet into a table and added your treeview function on the page everything worked fine in AIR. (tree collapsed and expanded properly).

                           

                          other than looking at the whole enchilada on this treeview thing I'm at a loss.

                           

                          For what it's worth, I tested the original code as well as this code for binding all "A" tags to that onclick after page load:

                           

                                  aNodes = document.getElementsByTagName('A');
                                  for(i=0; i<aNodes.length; i++){
                                      if(aNodes[i])
                                      aNodes[i].onclick = function(){treeView(this);};
                                  }

                           

                          Edit:  You're probably right on the XLST issue, still have yet to test but now I want to