6 Replies Latest reply on Jan 21, 2017 11:55 PM by Michael Willems

    External content download from website en put next to index.html

    Michael Willems

      Hello peeps,


      I'm searching for a way to load in external content. I have a .html file with some informatie in it that i want to load in when people start up the app.


      For example:

      The content that i want to load in is from www.mywebsite.com/projects/project1.html


      This content must be loaded in when the app opens (every time the open the app it must do it again). en put in next to where the index.html is placed.


      This is because i want to load information from project1.html into ajax scripts like this one:

          $(document).ready(function() {
              $('#project').load('projects/project1.html #info1');
        <div id="project"></div>


      But i'm very new in this so i really don't know how to do this. I've already tried to load in a .php file from the local files (which works) and than load the external content in that php file with the following code:

      $project = file_get_contents('https://www.mywebsite.com/projects/project1.html');
      echo $project;

      But this doesn't work either.


      I've tried whitelisting the links i use but it also doesn't work and i don't know what to do next?


      I hope you guys know a solution.


      Thank you for your time!


      Cheers Michael


      I've also found this site: HTML Imports: #include for the web - HTML5 Rocks  but stil it doesn't work for me

        • 1. Re: External content download from website en put next to index.html
          VectorP Level 4

          You apparently want to load _data_ and present them in a part ('div') of one of your html documents. Your problem is, I believe, that these data are not available as data, but merely as a part of static html pages.


          There are a couple of things to consider:

          1. You never run PHP scripts in the client. So, forget that option.

          2. You may want to reconsider the architecture of that project website. If you want a universal solution, which can be maintained nicely, you will have to

          - keep data, logic and presentation separated (MVC model)

          - create a web service script, which can handle requests for data

          - create presentation layers (as in: website, app) that make requests, receive data and present them.


          Your website and your app would then work exactly the same way: the html documents are merely templates. Using Ajax/XHR, the data will be requested from the web service script (PHP, possibly with a database behind it) and then presented using

          - javascript DOM manipulation

          - CSS


          I just wonder: where does your current project website get its data from? What happens if someone wants to make data updates to that website?

          • 2. Re: External content download from website en put next to index.html
            Michael Willems Level 1


            Thanks for the quick response. To answer your question. At the moment it is more of a template so i have a design. There is not much going on in the current project. this was the first big thing i wanted to build in.


            And the javascript DOM manipulation if i understand it correctly is this: HTML Imports: #include for the web - HTML5 Rocks right?


            I will show you what i've have till know: (Main index.html page)

              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <title>MW Development</title>
              <link rel="stylesheet" href="themes/mw-development.min.css" />
              <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
              <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
                <link rel="import" href="https://www.michaelw.nl/projects/external-content.html"> <!--Load external content-->
              <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
              <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
            <!--Pagina 1-->
            <div data-role="page" id="page2">
              <div data-role="header">
              <h1>My Marie
                    <a href="#page0" class="ui-btn-right ui-btn ui-btn-icon-notext ui-icon-power ui-btn-corner-all ui-shadow" title="profiel" data-form="ui-icon">Afmelden</a></h1>
              <div data-role="content">
                <!--Status project1-->
                    var link = document.querySelector('link[rel="import"]');
                    var content = link.import;
                    var el = content.querySelector('.status1');
                <div data-role="footer">
              <h4>MW Development &copy; 2017</h4><div class="ui-bar"><center>
              <a href="#page1" data-role="button" data-icon="info">Help</a></center></div>


            And for the external-content.html the following code:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" href="projecten/themes/extern.css" />
            <!--Status project 1-->
            <div class="status1">
            <div class="progress-bar progress-bar--determinate">
              <div class="progress-bar__primary" style="width:10%"></div>
              <!--<div class="progress-bar__secondary" style="width:76%"></div>-->


            And if i've followed the website correctly it should work but it doesn't.


            I hope this is a good answer to your reply? Thanks for helping me!

            • 3. Re: External content download from website en put next to index.html
              VectorP Level 4

              OK. So you are using Import web elements.

              Things to consider:

              1. This is quite a new technique, and implementations are not widespread. Many mobile devices will still not support it.

              2. For that reason, you may want to add error handling, as documented in the article you quoted. Also, you should offer a backup process for cases where ".import" is not supported

              3. Alternatively, you could try and get your data from the source, not from some html page (unless there is no other source, which would indicate more severe potential problems than you currently have at hand).

              • 4. Re: External content download from website en put next to index.html
                Michael Willems Level 1

                Hey VectorP,


                Sorry for the slow reply. But i didn't know it was that new this technique. I've already learned a new thing!


                The thing that i try to create is this:

                The client has a header with "Status" in it. Below this header must be a text with the current status. This status changes over time. So what i was thinking i get a document which is uploaded to my own site and update that everytime. So the app doesn't have to update, time after time.


                If it's possible to do this easier than i will try it but i really don't know another way. And making an admin in the app looks to risky for me and i also don't know how to do that haha.


                And i do want to add error handling but i wanted to know first if this works. It doesn't work in chrome in the browser but it did sort of work on my samsung mobile within the app. It didn't place it in the right position but it loaded it in!


                But i really have no clue what to do now?


                Sorry for the bad english.

                • 5. Re: External content download from website en put next to index.html
                  VectorP Level 4

                  Sorry for the bad english.


                  No problem. You appear to be dutch, so I'll try in that language.


                  In zulke gevallen wil je dus kennelijk twee data-elementen naar de app sturen, namelijk 'status' en 'statustekst'.

                  Dat doe je makkelijk met een json object.

                  Stappen die je dan neemt, zijn:

                  - maak op de server een script (bijvoorbeeld in PHP), dat op verzoek een JSON object kan versturen

                  - dat JSON object ziet er bijvoorbeeld uit als

                  {'status': 'wachtend op antwoord',

                  'statustext': 'klant kan nog niets vertellen over de bestelling'}

                  - gebruik in de app de functie getJSON(), die beschikbaar is met jQuery

                  - plaats de verkregen data in je DOM.


                  Klinkt dit nog te cryptisch, dan heeft het wel zin om eerst wat te leren over deze veel gebruikte standaardtechniek. Zoek dan een online tutorial met iets als "php jquery ajax getjson tutorial" of lees een goed boek hierover, bijvoorbeeld uit de series van O'Reilly.

                  2 people found this helpful
                  • 6. Re: External content download from website en put next to index.html
                    Michael Willems Level 1

                    Dankjewel voor de nederlandse reactie. Dit helpt me een heel eins verder!