CODEWITHSUNDEEP
javascriptjqueryhtml
Federico Pessina
Federico Pessina

Reputation: 209

jQuery check if a file exist locally

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.

Upvotes: 2

Views: 15738

Answers (5)

raphaëλ
raphaëλ

Reputation: 6523

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.

Upvotes: 3

Manish Kumar
Manish Kumar

Reputation: 507

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);
  }
});

Upvotes: 0

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

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");

Upvotes: 5

Barmar
Barmar

Reputation: 780843

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.

Upvotes: 0

FDavidov
FDavidov

Reputation: 3675

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.

Upvotes: 0

Related Questions