Search code examples
javascriptjqueryhtmljquery-uijquery-multidatespicker

Trying to link a local Javascript file to HTML document but in the browser, I receive a Failed to load resource error

I'm trying to link a javascript file to my html document.

I'm following the instructions on http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-days-range to select multiple dates from a calendar as input in a form.

It says "You include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker".

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery-ui.multidatespicker.js"</script>

Which I have done.

Note jquery-ui.multidatespicker.js is in my local project directory as it's own file not in any folders. You can download a zip file on the github page where this file is included.

Then I call the multidatespicker function in the head of the document. 

<script type="text/javascript">
        $(function() {

        $('#mdp-demo').multiDatesPicker();

 });
    </script>

And finally within the body you write your html input id to be used in the function

 <input id="mdp-demo">

When I run this in the browser I get an error "Failed to load resource: the server responded with a status of 404 (NOT FOUND)" for jquery-ui.multidatespicker.js:1.

If you scroll down to the demos on the multiple dates github page and go to "Form input". That is what i'm trying to achieve. The problem is that my jquery-ui.multidatespicker.js script search isn't finding the script and therefore doesn't recognize the .multiDatesPicker() function.

Any suggestions as to what I'm doing wrong?

Solution

  • You should use CDN link for multidatespicker

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.multidatespicker.js"></script>

    If you want to use <script src="jquery-ui.multidatespicker.js"</script> you need download file an put at same HTML folder and it will work. Also note that you missing > for open tag.

    $(function() {

        $('#mdp-demo').multiDatesPicker();

 });
    <script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.multidatespicker.js"></script>

 <input id="mdp-demo" />