Working with jQuery when there is no Internet connection

Question

I am completely new to jQuery. When working with jQuery, I disconnected the Internet to check if my webpage works fine without an Internet connection. It displayed some thing which is not required. When I saw the source code, it displayed:

<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">

So I downloaded the code and kept it in my root folder. Still it's not working well. Can we work with jQuery while offline?

Here is my code:

<!doctype html>

<!-- [if IE 7 ]>                  <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif] -->
<!-- [if IE 8 ]>                  <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif] -->
<!-- [if IE 9 ]>                  <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif] -->
<!-- [if (gt IE 9)|!(IE)]> <!-- > <html class="no-js" lang="en-US"> <!--<![endif] -->

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title> Home</title>
        <meta name="author" content="jQuery Foundation - jquery.org">
        <meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
        <script src="jquery.min.js"></script>
        <!--[if lt IE 7]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->
        <script>try{Typekit.load();}catch(e){}</script>
        <meta name="generator" content="WordPress 3.5.1" />
    </head>

    <body>
        <!--[if lt IE 7]>
        <p class="chromeframe">You are using an outdated browser.
        <a href="http://browsehappy.com/">Upgrade your browser today</a>
        or <a href="http://www.google.com/chromeframe/?redirect=true">install
        Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        <header>
            <section id="global-nav">
                <nav>
                    <div class="constrain">
                        <ul class="links">
                            <li><a href="home.jsp">Home</a></li>
                            <li class="dropdown"><a href="CreatPatient.jsp">Patient</a>
                                <ul>
                                    <li><a href="CreatePatient.jsp">Create Patient</a></li>
                                    <li><a href="Edit Patient">Edit Patient</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="Appointments.jsp">Appointments</a>
                                <ul>
                                    <li><a href="CreateAppointments.jsp">Create Appointments</a></li>
                                    <li><a href="EditAppointments.jsp/">Edit Appointments</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="#">Reports</a>
                                <ul>
                                    <li><a href="PreOperative.jsp">Pre Operative</a></li>
                                    <li><a href="IntraOperative.jsp">Intra Operative</a></li>
                                    <li><a href="PostOperative.jsp">PostOperative</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </section>
        </header>
    </body>

</html>

When I remove this line:

<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">

It creates a problem.

I have downloaded jQuery and kept on the desktop. The HTML file is also on the desktop. Why is it not working?

Have up updated your reference to point to the downloaded file? — Srikanth Venugopalan
– Srikanth Venugopalan, Commented Apr 8, 2013 at 6:14
Do you really think it works when you disconnect from the internet? The stylesheet are cached so, it works try refreshing with <kbd>ctrl</kbd>+<kbd>f5</kbd>. If then it ok it is really ok. If you want to see it locally then you should download all the assets. — user2193789
– user2193789, Commented Apr 8, 2013 at 6:21
@silentboy it does not work when its not connected to internet — JavaCoding
– JavaCoding, Commented Apr 8, 2013 at 6:23
"These conditional comments are no longer supported from IE 10 onwards." — Peter Mortensen
– Peter Mortensen, Commented Jan 28, 2022 at 9:53

Peter Mortensen · Accepted Answer · 2022-01-28 09:34:59Z

24

Yes, it's possible. You've mentioned that you downloaded the file - that's a good first step, but you also have to change all the href and src references.

For example,

<link rel="stylesheet" href="http://jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1">

should become

<link rel="stylesheet" href="base.css">

Also remember to get the offline version of the jQuery JS library, too:
Download jquery.js, put it in your root folder & reference it:

<script src="jquery-1.9.1.min.js"></script>

And if you want it in a subdirectory:

<script src="[subdirectory-name]/jquery-1.9.1.min.js"></script>

Remember that both files need to be offline and in your working local directory. This means that you cannot remove the stylesheet nor the jQuery JS library. Keep both of them, in the local formats I've mentioned above.

Also, putting the <script> tag in the <head> is bad practice; move it just before the </body> tag instead.

Your code should now look (in short, note that I haven't put much) like:

...
<html class="no-js" lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="base.css">
    ...
</head>
<body>
    ...
    <script src="jquery.min.js"></script>
</body>
</html>

Again, make sure that base.css and jquery.min.js are the exact file names and are in the same folder as this .html file

edited Jan 28, 2022 at 9:34

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 8, 2013 at 6:18

Albert Xing

5,7883 gold badges23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jace Over a year ago

@albertxing nice answer, I was writing an answer just like this but you 1) got in before me, with 2) a better answer. Very clearly explained. You also mentioned downloading the jQuery library too. +1

Albert Xing Over a year ago

@JavaCoding - updated answer, remember to keep both files in local.

JavaCoding Over a year ago

@albertxing both the files are in desktop. If possible can you please change the code that i have posted

Abhishek Jain Over a year ago

is it possible to embed jquery both online and offline @AlbertXing

Albert Xing Over a year ago

It is! As long as you have jQuery downloaded, referencing it locally in the script tag should work offline or online. Not sure if that's what you were asking @abhishek

Peter Mortensen · Accepted Answer · 2022-01-28 09:15:03Z

2

It will not work if you don't have an Internet connection. To work locally you should copy jquery.js to your local directory and use a relative path.

<script src="/jquery/1.5/jquery.min.js"></script>

edited Jan 28, 2022 at 9:15

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 8, 2013 at 6:16

Sandeep

436 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-01-28 09:16:40Z

2

Download jQuery and link to it like so:

<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.css">

edited Jan 28, 2022 at 9:16

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 8, 2013 at 6:15

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-01-28 09:17:46Z

2

To work offline with jQuery, just copy the jquery.js file and place it in your local directory. In the script tag, change the src attribute:

<script src="/path/jquery.min.js"></script>

edited Jan 28, 2022 at 9:17

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 8, 2013 at 6:34

Neophile

1,51912 silver badges15 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-01-28 09:18:40Z

0

The best solution will be to serve the files via localhost. This post explains this in detail.

http://www.wingoku.com/2016/02/accessing-javascriptjquery-script-files.html

edited Jan 28, 2022 at 9:18

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 1, 2016 at 17:56

Umer Farooq

7,4967 gold badges45 silver badges69 bronze badges

1 Comment

Peter Mortensen Over a year ago

The link is broken (domain expired?): "Hmm. We’re having trouble finding that site. We can’t connect to the server at www.wingoku.com."

Peter Mortensen · Accepted Answer · 2022-01-28 09:21:26Z

-2

Try Initializr.

It's an HTML5 templates generator to help you getting started with a new project. There is a script which loads the web jQuery file if there is an Internet connection. If there isn't any Internet connection, it takes the local one.

edited Jan 28, 2022 at 9:21

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 5, 2017 at 7:14

Daniel

11 bronze badge

1 Comment

Mike Bovenlander Over a year ago

This is not really answering the problem @JavaCoding is stuck with. If you read the question carefully you'll see he already has a template. So there is no need to initialise a new template.

Collectives™ on Stack Overflow

Working with jQuery when there is no Internet connection

6 Answers 6

5 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related