Categories
discuss

How to check the availability of a resource using JavaScript?

If I have a URL to a video file, how can I detect if the resource pointed by the URL is valid and exists before it can be displayed? I’ve seen some answers suggesting AJAX, but I only know AJAX to send and retrieve some data, not to get the status of the file whether it exists or not.

For example, if I have a URL like http://www.example.com/video.mp4, how could I check whether video.mp4 exists or not and can or cannot be retrieved?

Answer

You don’t really need ajax, just create a video element, and see if it can load the source

var video = document.createElement('video');

video.onload = function() {
    alert('success, it exsist');
    // show video element
}

video.onerror = function() {
    alert('error, couldn't load');
    // don't show video element
}

video.src = 'http://www.example.com/video.mp4';

Different browsers play different formats, to check if the file can be played in the current browser, you can use the canplaythrough event

video.oncanplaythrough = function() {
    alert("This file can be played in the current browser");
};

if the file is on the same domain, and ports and protocol match, you can use ajax to do a HEAD request and see if the resource exists, but that won’t work cross-domain

var http = new XMLHttpRequest();
http.open('HEAD', '/folder/video.mp4');

http.onreadystatechange = function() {
    if (this.readyState == this.DONE) {
        if (this.status != 404) {
          // resource exists
        }
    }
};

http.send();
Categories
discuss

onclick is set for How to disable for one

Suppose onclick handler is set for a <tr> is it possible to disable/overwrite it for one particular <td>?

<tr onclick='somefunction()'> <td> </td> <!--onclick should work here--> ... <td> </td> <!--onclick should not work here--> ... <td> </td> <!--onclick should work here--> </tr>

Of course I can set it for each <td> separately or pass the name of a td to the function and decide what to do based on this name, but it seems like there should be a simpler solution.

Answer

In somefunction you could check the cellIndex of the td, and return early, if a non-clickable cell has been clicked. Something like this:

function somefunction (e) {
    if (e.target.cellIndex === 1) {return;}
    /* Do something, the td is clickable */
}

To get this work with an inline handler, you’ve to pass the event object:

<tr onclick='somefunction(event)'>

A live demo at jsFiddle.

Things will get a bit more complex, if you’ve elements within cells. In that case you have to find a td parent element, like so:

function somefunction (e) {
    var target = e.target; // Cache the target element
    while (target) { // Iterate through elements
        if (target.tagName === 'TD') { // TD found, stop iteration
            break;
        }
        target = target.parentElement; // Set target as a parent element of the current element
    }
    if (target === null) {return;} // Check that we really have a TD
    if (target.cellIndex === 1) {return;} // A non-clickable cell clicked
                    :
}

A live demo at jsFiddle.

Edit 2018 In 2018 elements have closest() method, hence the loop above is not needed, target = e.target.closest('td') will make sure a td is used.

A very simple way would be to use CSS pointer-events: none, but unfortunately this doesn’t work in FF in this particular case in IE<11 at all, though works well in Chrome and IE11. Also preventing pointer events would be bad, if the cell happens to contain interactive elements.

A live demo at jsFiddle.

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..