jQuery check if a file exist locally

Question

I am developing a local site for a company (only local internal use, offline and without server). I have a main page that has a main div, that contain 3 different div. Each div is linked to a page and the "onclick" event of each div will load the page linked into the main div. So i have to check, with the document ready function, if each page exists and, if not, I want to delete the div linked to that page. How can I check if a page exist locally? I've found many answere that check with status of connection if a page exists, but my html will only work offline and locally, so I can't use that method.

EDIT - SOLVED

I've solved this using the script of @che-azeh:

function checkIfFileLoaded(fileName) {
    $.get(fileName, function(data, textStatus) {
        if (textStatus == "success") {
            // execute a success code
            console.log("file loaded!");
        }
    });
}

If the file was successfully load, i'd change the content of a new hidden div that will tell to another script if it have to remove or not each of the three div.

Offline means no internet connection then you can only check about the files on your local web server & not the outside world's — techie_28, Jul 27 '16 at 07:26
i have no local web server. it's a local site. i have html pages in directories, like they are .txt file. no web server, no connection, nothing. I only use pages linked with absolute path — Federico Pessina, Jul 27 '16 at 07:27
you mean you are running that file in your browser with a URL like `file:///C:/xxx/xxx/fileCheck.html` or how ? — techie_28, Jul 27 '16 at 07:29
yes, exactly. and I have to check if file:///C:/xxx/xxx/page2.html exists — Federico Pessina, Jul 27 '16 at 07:30
but your company would be running that on a web server,they wont be accessing like that URL ? — techie_28, Jul 27 '16 at 07:33
A website is made to run on a web server typically & I think you should be following that.Installing some local web server like WAMP or IIS & then running it — techie_28, Jul 27 '16 at 07:48
it's a kind of document that will be used internally. they want it in html becouse it's easy to use then and "good looking", but it will never be ran on a server. as i said, they have a server-version yet and it doesn't works properly, so they asked me to do this. — Federico Pessina, Jul 27 '16 at 07:52

score 4 · Accepted Answer · answered Jul 27 '16 at 07:58

4

This function checks if a file can load successfully. You can use it to try loading your local files:

function checkIfFileLoaded(fileName) {
    $.get(fileName, function(data, textStatus) {
        if (textStatus == "success") {
            // execute a success code
            console.log("file loaded!");
        }
    });
}
checkIfFileLoaded("test.html");

answered Jul 27 '16 at 07:58

Cedric Ipkiss

5,662
2
43
72

Works! thanks! I have to check if it fails, so I only have to change the (textStatus == "success") with (textStatus != "success"). – Federico Pessina Jul 27 '16 at 08:04
@FedericoPessina try this on chrome? – techie_28 Jul 27 '16 at 08:08
@techie_28 Firefox – Federico Pessina Jul 27 '16 at 08:10
@FedericoPessina Im suggesting you to run this on Google Chrome – techie_28 Jul 27 '16 at 08:10
@FedericoPessina run it and see yourself – techie_28 Jul 27 '16 at 08:13
on firefox it's working properly, but i can't use the "!=" – Federico Pessina Jul 27 '16 at 08:16
@raphaëλ perhaps the "leaders" are ok with FireFox.. ;) – techie_28 Jul 27 '16 at 08:16
@techie_28 true :) – raphaëλ Jul 27 '16 at 08:17
@FedericoPessina what you mean cant use `!=`? plus this way its never gonna be a stable solution ever unless you use a web server which is the proper way. – techie_28 Jul 27 '16 at 08:19
properly is wrong saying "cant use". I've tried to use the != to check if textstatus is not success, but it won't work – Federico Pessina Jul 27 '16 at 08:20
@FedericoPessina you are ok with this not working in Chrome? – techie_28 Jul 27 '16 at 08:21
@techie_28, it works on chrome. @Federico you cannot use `!=` due to asynchronous behaviors with JavaScript. [See why](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). I suggest you execute your code based on the availability of the file and not otherwise. – Cedric Ipkiss Jul 27 '16 at 08:22
Just found out chrome also has an option. I have updated my post to include this information about firefox and chrome – raphaëλ Jul 27 '16 at 08:25
@raphaëλ Perhaps the `leaders` would know of that option too.. ;) – techie_28 Jul 27 '16 at 08:27
1

You may try implementing a similar mechanism with a `promise` that would return success or failure upon promise completion. I think that should work on all browsers. – FDavidov Jul 28 '16 at 05:06

raphaëλ · Answer 2 · 2016-07-29T08:44:00.903

3

I suggest you run a local web server on the client's computer. (See also edit below on local XHR access).

With a local web server they can start it up as if it was an application. You could for example use node's http-server. You could even install it as an node/npm package, which makes deployment also easier.

By using a proper http server (locally in your case) you can use xhr requests:

$(function(){
    $.ajax({
        type: "HEAD",
        async: true,
        url: "http://localhost:7171/myapp/somefile.html"
    }).done(function(){
        console.log("found");
    }).fail(function () {
        console.log("not found");
    })
})

EDIT:

Firefox

Another post has (@che-azeh) has brought to my attention that firefox does allow XHR on the file "protocol". At the time of this writing the above works in firefox using a url of just somefile.html and using the file scheme.

Chrome

Chrome has an option allow-file-access-from-files (http://www.chrome-allow-file-access-from-file.com/). This also allows local XHR request This flag is intended for testing purposes:

you should be able to run your tests in Google Chrome with no hassles

I would still suggest the local web server as this make you independent of these browser flags plus protect you from regression once firefox/chrome decide to disable support for this.

edited Jul 29 '16 at 08:44

answered Jul 27 '16 at 07:37

raphaëλ

6,393
2
29
35

there is a site running with a server yet, but they want me to do the same without it becouse it is better to navigate, and there are problems with using server here. – Federico Pessina Jul 27 '16 at 07:40
Yes so i suggest you run the WEB (node) server on the local machine and the access it using `http://localhost/etc` – raphaëλ Jul 27 '16 at 07:41
I can't explain it here, but i really can't use any type of server – Federico Pessina Jul 27 '16 at 07:42
Ok, but you understand i am not talking about a remote server as in a computer right? I just mean an application running local on the client's machine that serves your web application, no external networking etc (just making sure here you understand what i mean ;) – raphaëλ Jul 27 '16 at 07:44
yes i got it, but leaders want me to do it without any type of server. I will try to use the try-catch contruct in a hidden div. Could it works? – Federico Pessina Jul 27 '16 at 07:47
Make sure when you talk to your "leaders" that they also understand what is meant with a "local web server" in this context. As to `try/catch`, no i don't think that will work (what are you going place inside the `try/catch`? – raphaëλ Jul 27 '16 at 07:49
yes they got it. i would try to load the page into a hidden div, and in cathc i would delete the right div if it fail to load it – Federico Pessina Jul 27 '16 at 07:53
`$(…).load(…)` also uses xhr, it won't work with the `file` uri scheme – raphaëλ Jul 27 '16 at 07:56
@FedericoPessina It wont because you are intending to use it on URL like `file:///C:/xxx/xxx/fileCheck.html`.Ajax call will fail on URL like that as part of security policy you better look for some other solution like system based software etc for this – techie_28 Jul 27 '16 at 08:04

score 0 · Answer 3 · answered Jul 27 '16 at 07:20

0

You can attempt to load the page within a try-catch construct. If the page exists, it will be loaded though. If it doesn't, you can (within the catch) set the related div as hidden.

answered Jul 27 '16 at 07:20

FDavidov

3,505
6
23
59

I explained wrong it, going to edit. edited. I can't use the try-catch construct: doing it, page that exists will be load into my main div befor clicking on that div. – Federico Pessina Jul 27 '16 at 07:23
What would OP have to place inside the `try-catch`? – raphaëλ Jul 27 '16 at 07:51
Loading pages is asynchronous, you can't catch the error with `try-catch`. – Barmar Jul 27 '16 at 15:02
Ooops... you are right @Barmar. Still, it could be done with a promise instead but following the same concept. – FDavidov Jul 28 '16 at 05:00

score 0 · Answer 4 · answered Jul 27 '16 at 07:32

0

Try to access the page using $.ajax. Use the error: option to run a callback function that removes the DIV linked to the page.

$.ajax({
    url: "page1.html",
    error: function() {
        $("#page1_div").remove();
});

You can loop this code over all the DIVs.

answered Jul 27 '16 at 07:32

Barmar

741,623
53
500
612

he is accesing the files with URL's like `file:///C:/xxx/xxx/fileCheck.html`,I doubt ajax call will go through like that? – techie_28 Jul 27 '16 at 07:34
'' like so? – Federico Pessina Jul 27 '16 at 07:37

score 0 · Answer 5 · answered Jul 27 '16 at 12:52

0

You can use jquery load function

$("div").load("/test.html", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $(this).html(msg + xhr.status + " " + xhr.statusText);
  }
});

answered Jul 27 '16 at 12:52

Manish Kumar

509
5
15

jQuery check if a file exist locally

5 Answers5

EDIT:

Firefox

Chrome