1

I'm trying to load data to my index file remotely. I am able to do it locally with:

<body id="chk">
<script>
$(function(){
    $('#chk').load('a.html');
});
</script>
</body>

Which works flawlessly but it is really no use to me as I can't update the a.html file remotely. What I'm looking to achieve is something like this:

$(function(){
    $('#chk').load('ftp:/chkblabla.com/public_html/a.html');
});

But of course this doesn't load my data. Can it be done any other way? At the end, my goal is to load some string values to my app without having to make another build (Cordova).

Samuel
  • 7
  • 6
  • why can't you update the file? How does that change when using ftp? – Luca Kiebel Jan 14 '18 at 15:11
  • Check your console to see if you have CORS working fine. Try a basic XMLHttpRequest https://en.wikipedia.org/wiki/XMLHttpRequest – NVRM Jan 14 '18 at 15:12
  • Why jquery, we are in 2018, use and learn native ecma js – NVRM Jan 14 '18 at 15:13
  • @Luca Thanks for your response! It won't update because the index file is local on my tablet \ laptop and the a.html is located on my server. Locally everything works fine. I guess it's a cross origin problem. I wonder if there's any way around it.. – Samuel Jan 14 '18 at 15:15
  • Yeah, you must allow: header("Access-Control-Allow-Origin: *"); on your server but your browser is blocking this from local networks, it is a security "feature" they said – NVRM Jan 14 '18 at 15:16
  • 1
    @Cryptopat Thanks for your response! It won't load the content of a.html even with CORS plugin enabled. I thought it is not 'legal' to make a .load with an external url, only local.. So you're saying it should work.. That's good. What can I do to make it work? Thanks again. – Samuel Jan 14 '18 at 15:20
  • Just by serving your file outside of your local network, from a server with cross-origin request enabled. Test it with https://www.test-cors.org/ . – NVRM Jan 14 '18 at 15:26
  • @Cryptopat Thank you, I tried the website you sent, and the output I got is access-control-allow-origin: * So it should allow it, no? But still does not work.. – Samuel Jan 14 '18 at 16:10
  • What exactly say your js console? – NVRM Jan 14 '18 at 17:54
  • @Cryptopat jquery-3.2.1.min.js:4 Failed to load ftp://my@domain.co.il/public_html/a.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. – Samuel Jan 14 '18 at 19:21
  • You need to serve your file in order to have an address like http://domain.co.il/public_html/a.html – NVRM Jan 14 '18 at 20:54
  • @Cryptopat Could you kindly elaborate? maybe on a chat? – Samuel Jan 15 '18 at 10:19
  • Your file isn't on a server, as the link isn't starting by http. Try this, for debugging: from a folder with your file a.html, type: php -S localhost:8000 . This will start a server, then the link to your file will be http:// localhost:8000/a.html put it on your script, and check the javascript console. It should works in windows too. Good luck – NVRM Jan 15 '18 at 16:58
  • 1
    @Cryptopat It is on a server (starts with ftp) I just shortened the link. I tried your offer and when i link the .load() to http://localhost/a.html it loads wonderfully, but my problem still stands. Anyway, thanks for trying to help. – Samuel Jan 15 '18 at 18:31
  • Well, your code is okay but CORS, is only for HTTP/HTTPS. no ftp link. While loading a ftp file in a browser tab works, cors works based on http headers. Ftp does'nt have any http headers, this is why it fail. You must use http/https. See https://stackoverflow.com/a/15100922/2494754 – NVRM Jan 15 '18 at 20:56

1 Answers1

0

You say "of course this does not load my data", but you don't explain why. Are you able to see javascript errors?

I'm always recommending to use adb to see the errors and warnings which come from the javascript engine: (at least for Mac OS)

adb logcat -v time | grep SystemWebChromeClient

If the problem is related to accessing external site, you will have to adapt your index.html at the line starting with

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

EDIT

I am not sure if this is relevant for you or not. A project I was developing two years ago was including this code:

<!-- include JQ, enable PhoneGap events under JQM, then include JQM -->
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
    $( document ).on( "mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
        $.mobile.phonegapNavigationEnabled = true;
    });    
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

HTH...

ishahak
  • 6,585
  • 5
  • 38
  • 56
  • 1
    Thank you so much for taking the time to respond. I was under the impression that the jquery .load method only support loading files that are either both local or remote. I'm happy to see I'm wrong about it. So what's stopping the a.html contents (on my server) to load on my local index file and how can I fix it? – Samuel Jan 15 '18 at 10:08
  • Google Chrome gives me this: jquery-3.2.1.min.js:4 Failed to load ftp://demo1@demo.co.il/public_html/a.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Firefox gives me none, but doesn't display the a.html data either. – Samuel Jan 15 '18 at 15:13
  • I am not sure that I can help you. I actually still missing the connection to Cordova. Anyway, I'll edit my answer with some script that my be relevant for you – ishahak Jan 15 '18 at 21:37