1 Reply Latest reply on Jul 23, 2009 5:25 PM by Joe ... Ward

    External URL Issue

    DPeters65

      Wondering why I cannot navigate to an external URL from an onclick action followed by a function. Here is the setup:

       

      I am creating a JavaScript/HTML app that loads remote XML data, parses it and then displays it all via jQuery. Below is the code that parses and creates the new code blocks under the function createItems() and openInBrowser() to open the external URLs into the default browser. The function createItems() works fine burning through the XML, parsing the info, then creating the "blocks", and appending them to "#alertsMain".

       

      The problem arises with the onclick execution of openInBrowser() inside of each "block". It does NOT execute. It just returns the scrolling list of items to the top. Not even the alert() within openInBrowser() is executed. The same function when executed outside of the jQuery "block" generated code works just fine as in the "#logo" section of the code where it is essentially hardcoded in. A trace on each "block" instance is showing the code of each "block" generating just fine.

       

      Any ideas why this is not working? Thanks in advance.

       

      <html>
      <head>
      <title>Product</title>
      <meta http-equiv="Content-Type" content="text/html;iso-8859-1">
      <meta name="description" content="">
      <script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
      <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
      <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>

      <script type="text/javascript">

      function createItems(xml)
      {
        $(xml).find("item").each(function()
        {
          pid = $(this).attr("pid");
           aff_url = $(this).attr("aff_url");
           model_name = $(this).attr("model_name");
           store_name = $(this).attr("store_name");
           product_name = $(this).attr("product_name");
           myurl = "openInBrowser('"+aff_url+"');";
           var block = '

      <div id="item'+pid+'" class="item">
           <li id="itemTitle'+pid+'" class="itemTitle">
                <a href="#" onclick="'+myurl+'">'+model_name+'<br />
                <span class="itemSpan">'+store_name+' : '+product_name+'</span>
                </a>

           </li>

           <li id="itemAvail'+pid+'" class="itemAvail">

                Checking...

           </li>

      </div>';
           $('#alertsMain').append(block);
        });
      }

      function openInBrowser(url){
           alert(url);
           air.navigateToURL(new air.URLRequest(url));

      }

      </script>
      </head>
      <body>
           <div id="logo">
              <a href="#" onclick="openInBrowser('http://www.google.com');"><img src="images/logo.png" width="153" height="42" border="0"></a>
           </div>
           <div id="alertsMain">
           </div>
      </body>
      </html>

        • 1. Re: External URL Issue
          Joe ... Ward Level 4

          I'm not sure I quite follow your code, but in general you cannot create executable code from a string after the page has loaded. This is a security precaution to prevent compromised remote content from executing malicious code.

           

          You can work out a way to create the needed items without using eval() or innerHTML. i.e. by using DOM methods to create the needed elements and then use addEventListener() to hook up the event handlers. You can also map the content into a non-application sandbox so that it is not subject to this restriction (it also won't have access to the AIR APIs).