22 Replies Latest reply on Apr 14, 2017 12:46 PM by howard_owens

    Javascript HTML file include

    howard_owens Level 1

      I'm switching from Intel XDK to PhoneGap because of the plan by Intel to drop support for stand-alone apps.  This comes when I'm early stage mid-dev on my first app.

       

      I did get a prototype running on my iOS devices with the XDK and after some struggle tonight, got it running via PhoneGap.

       

      Here's the issue, I was using the JavaScript HTML file include script

       

          <script src="https://www.w3schools.com/lib/w3data.js"></script>

       

      and it doesn't appear to work in my PhoneGap build, though it worked in the XDK build.

       

      I'm wondering why and if there is anything to be done about it?

        • 1. Re: Javascript HTML file include
          ryanskihead Adobe Employee

          Are you compiling locally, or with Phonegap Build?

          • 2. Re: Javascript HTML file include
            howard_owens Level 1

            Build is with PhoneGap Cloud.

            • 3. Re: Javascript HTML file include
              ryanskihead Adobe Employee

              To access external resources from a Phonegap app you should add the cordova whitelist plugin to your config.xml file:

               

              <plugin name="cordova-plugin-whitelist" />

               

              Now that you're moving to Phonegap Build, might be worth scanning through the docs if you haven't already (especially Getting Started and Configuring) to get a feel for how it works.

               

              Side note:

              best practices for Phonegap apps suggest  that any static resources, such as w3data.js, should be packaged up in your app and referenced locally. The less resources you're downloading from the web, the more responsive your app will be. So just download w3data.js, put it in your www/js folder, and change your script reference to

               

              <script src="js/w3data.js"></script>

              • 4. Re: Javascript HTML file include
                howard_owens Level 1

                Thanks for the response ... just catching up.

                 

                Read through the config docs.

                 

                I followed your advice to save the w3data.js file locally.

                 

                The include still isn't showing up in the build, though works fine through browser.

                • 5. Re: Javascript HTML file include
                  ryanskihead Adobe Employee

                  You're still referencing the remote w3data.js file like so:

                   

                  <script src="https://www.w3schools.com/lib/w3data.js"></script>

                   

                  Change that to reference your local version:

                   

                  <script src="js/w3data.js"></script>

                   

                  And I see you haven't added the whitelist plugin to your config.xml file, so you won't be able to load any remote resources.

                   

                  <plugin name="cordova-plugin-whitelist" />

                  • 6. Re: Javascript HTML file include
                    howard_owens Level 1

                    I'm not sure where you're seeing that ... I'm not currently using w3data.js ... pulled that ... not accessing any external resources in the current build.

                    • 7. Re: Javascript HTML file include
                      ryanskihead Adobe Employee

                      That's whats in the assets that are currently stored on Phonegap Build for app 2557293.

                      • 8. Re: Javascript HTML file include
                        howard_owens Level 1

                        That is my app ID.

                         

                        But w3data.js isn't in my build at all right now.

                         

                        ... not as a script in the head ... the file is still present in the /js folder, for now, but there's no reference to it at all.

                         

                        Do I need whitelist for the json calls?

                        • 9. Re: Javascript HTML file include
                          ryanskihead Adobe Employee

                          I did find a reference to it in events.html. But maybe you're just using index.html.

                           

                          In your index.html you're still referencing a jquery library and a font-awesome css file from the internet. Yes you'll need the whitelist plugin for those to work and for any json apis you're accessing on the web. (also jquery and font-awesome are also files you could and perhaps should be packaging locally as well).

                           

                          As mentioned above, add the cordova-plugin-whitelist and read the docs on how to configure it properly.

                          • 10. Re: Javascript HTML file include
                            howard_owens Level 1

                            Thanks ... I'm not currently working on the events page ... trying to get this other stuff figured out first.

                             

                            However, I woke up this morning and thought ... whitelist, I wonder if that's why the events widget isn't working on that events page?

                             

                            I'll be working on dev more later today, I hope.  Thanks for the follow up.

                            • 11. Re: Javascript HTML file include
                              howard_owens Level 1

                              Ryan,

                               

                              I went through the whitelist documentation and I think I have it set up correctly.

                               

                              index.html is set up WITHOUT the javascript include.

                               

                              events.html is set up WITH the javascript include, script tag pointing to js/w3data.js

                               

                              Works through browser, not in app.

                               

                              Also, the calendar widget I'm using on that page works in browser, not in app.

                               

                              Thanks.

                              • 12. Re: Javascript HTML file include
                                ryanskihead Adobe Employee

                                Doesn't look like you've added the whitelist plugin to your config.xml:

                                 

                                <plugin name="cordova-plugin-whitelist" />

                                • 13. Re: Javascript HTML file include
                                  ryanskihead Adobe Employee

                                  Also not seeing any content security policy tags in your html files.

                                  • 14. Re: Javascript HTML file include
                                    howard_owens Level 1

                                    Thanks, Ryan.

                                     

                                    The only meta tag I could include without causing my main content script to stop outputting results was

                                     

                                    <!-- end content containers -->

                                    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

                                    • 15. Re: Javascript HTML file include
                                      howard_owens Level 1

                                      ryanskihead

                                       

                                      I added this meta tag:

                                       

                                      <meta http-equiv="Content-Security-Policy" content="

                                          default-src 'self';

                                          script-src 'self' 'unsafe-inline' 'unsafe-eval';

                                          style-src 'self'  'unsafe-inline' maxcdn.bootstrapcdn.com fonts.gstatic.com data:

                                              fonts.googleapis.com data:;

                                          font-src maxcdn.bootstrapcdn.com fonts.googleapis.com data:

                                              fonts.gstatic.com data:;

                                            img-src * 'unsafe-inline'"  />

                                       

                                      that's what it's grown to at this point. 

                                       

                                      I have a script that manages five content sections / five different json feeds.

                                       

                                      the script is currently stored in js/maincontent.js

                                       

                                      works fine if I remove the meta tag.  Only news will display online or offline if the tag is included in the header.

                                       

                                      I've spent hours trying to figure out the problem.

                                       

                                      The problem seems to be related that my process for consuming RSS and storing it in the database (written in ColdFusion) doesn't handle certain image paths from my Drupal server well (I know the circumstances that causes this, but that's beside the point).  It wouldn't be an easy RegEx fix and would rather leave it aside for now. 

                                       

                                      Regardless, for "sports" ... I cleaned up the feed.

                                       

                                      Sports still won't display if the meta tag is in place.

                                       

                                      I tried using localstorage.remove and it still wouldn't grab the new feed and display it with the meta tag in place.

                                       

                                      I can find nothing through Google that helps me resolve this issue.

                                       

                                      You got any ideas?

                                      • 16. Re: Javascript HTML file include
                                        howard_owens Level 1

                                        I've solved the CSP issue, it looks like.  Answer in other thread.

                                        • 17. Re: Javascript HTML file include
                                          howard_owens Level 1

                                          Back to the main issue of this thread ...

                                           

                                          the html include with w3data.js still isn't working.

                                           

                                          I'm only testing it on the events page (which also has a problem with the event script on that page, but removing that doesn't fix this issue ... that's some sort of CSP issue).

                                           

                                          Running the Safari emulator for an iOS device,  I get errors on the .js files I'm calling in ... for example:

                                           

                                          $( document ).ready(function() {

                                           

                                          produces "can't find variable" for that line.

                                           

                                          Clearly, there's nothing wrong with that line and when those scripts are called directly onto the page, as they are on index.html, there is no error.

                                           

                                          If I remove the document ready declaration, the next function in line just throws the error ... so perhaps there is something wrong with how I've set up these scripts (being a novice with javascript) or there's another issue.  I don't know.

                                           

                                          H.

                                          • 18. Re: Javascript HTML file include
                                            kerrishotts Adobe Community Professional

                                            Can you share your html file that's having the problem (remove secret/private info)? I'm mostly interested in your script tags, where they are placed, and in what order.

                                             

                                            Also, is the error message the actual error message received? If not, please paste the full error message.

                                            • 19. Re: Javascript HTML file include
                                              howard_owens Level 1

                                              <html>

                                               

                                               

                                              <head>

                                                  <title>Events</title>

                                                   <meta name="viewport" content="width=device-width, initial-scale=1.0">

                                                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                                               

                                               

                                              <!-- end content containers -->

                                              <meta http-equiv="Content-Security-Policy" content=" - removed - " />

                                               

                                               

                                               

                                               

                                                  <script type="text/javascript" src="cordova.js">

                                                 

                                                  <!-- jQuery -->

                                                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

                                                  <script src="js/w3data.js"></script>

                                               

                                               

                                                  <!-- function scripts -->

                                                  <script type="text/javascript" src="js/asidebar.jquery.js"></script>

                                                  <script type="text/javascript" src="js/floatmasthead.js"></script>

                                               

                                               

                                                  <!-- google fonts -->

                                                  <link href="https://fonts.googleapis.com/css?family=Merriweather|Playfair+Display|Roboto" rel="stylesheet">

                                               

                                               

                                                  <!-- css styling -->

                                                  <link rel="stylesheet" href="css/dist.css?v=2"></link>

                                                  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

                                                  <link rel="stylesheet" type="text/css" href="css/style.css?v-1.0.0">

                                                  <link rel="stylesheet" href="css/sidemenustyles.css">

                                               

                                               

                                              </head>

                                               

                                               

                                              <body>

                                               

                                               

                                              <!-- include header nav with javascript -->

                                              <div w3-include-html="html/headernav.html"></div>

                                               

                                               

                                              <script>

                                              w3IncludeHTML();

                                              </script>

                                               

                                               

                                               

                                               

                                              <!-- start content containers -->

                                              <div style="clear: both;"></div>

                                               

                                               

                                                <div id="container">

                                                  <div id="headlines">

                                                

                                               

                                              <!-- script for events widget -->

                                              <script class="ai1ec-widget-placeholder" data-widget="ai1ec_superwidget" data-action="agenda">

                                                (function(){var d=document,s=d.createElement('script'),

                                                i='ai1ec-script';if(d.getElementById(i))return;s.async=1;

                                                s.id=i;s.src='http://live-timely-iy5zuaxdta.time.ly/?ai1ec_js_widget';

                                                d.getElementsByTagName('head')[0].appendChild(s);})();

                                              </script>

                                               

                                               

                                                  </div>

                                                  <div id="rightsidebar">

                                                    <span id="sponsorlabel"> Community Sponsors</span> <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>

                                               

                                               

                                                  </div>

                                                </div>

                                               

                                               

                                              <!-- end content containers -->

                                               

                                               

                                               

                                               

                                              <!-- script for business listings pulled from json -->

                                                  <script type="text/javascript" src="js/businesslistings.js"></script>

                                                </body>

                                              • 20. Re: Javascript HTML file include
                                                howard_owens Level 1

                                                Error message is as previously posted.  No more verbose than that.

                                                • 21. Re: Javascript HTML file include
                                                  kerrishotts Adobe Community Professional

                                                  I think I see what might be causing your issue (and if it isn't now, it's probably going to cause something else to fail at some point).

                                                   

                                                  You have the following:

                                                   

                                                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

                                                      <script src="js/w3data.js"></script>

                                                   

                                                  Here you have a mix of local (js/w3data.js) and remote content (jquery). The webview will (usually) end up loading and executing your js/w3data.js before the jQuery file has finished downloading, resulting in "$" being undefined.

                                                   

                                                  You should:

                                                   

                                                  • Bring all your script libraries local to the device (download jQuery and stuff it in a vendor/ directory, for example)
                                                    • This applies to your web fonts and css as well. Loading remote resources means your app won't work offline, and should the user be on a slower connection, they may well see flashes of unstyled content and "invisible" text while the web font loads in.
                                                  • Preferably use a bundler so that dependencies are always loaded prior to what needs them. There are lots of options: webpack, browserify, jspm, etc. This adds a build step, but on the upside, it makes managing your script tags lots easier (likely only one or two, aside from cordova.js) and gives you more flexibility down the road (like adding minification or using transpilation, etc.)
                                                  • If you don't want to use a bundler, you can add the "defer" attribute to your existing w3data.js script tag. This will force it to execute after everything else has been loaded (but before DOMContentLoaded). See <script> - HTML | MDN
                                                  • 22. Re: Javascript HTML file include
                                                    howard_owens Level 1

                                                    Thanks.  I had jquery stored locally but hadn't updated the path on that page.

                                                     

                                                    I'll have to look into bundler later.  Sounds worthwhile.

                                                     

                                                    I tried defer and that just threw an error.

                                                     

                                                    even after correcting jquery path, still getting the error (figured out how to copy it better from Safari):

                                                     

                                                    [Error] ReferenceError: Can't find variable: $

                                                      Global Code (floatmasthead.js:4)

                                                     

                                                    [Error] ReferenceError: Can't find variable: $

                                                      Global Code (businesslistings.js:5)

                                                     

                                                    That businesslisting.js should be loading and it's not.  Same script and path as used on index.html with no issues.