CODEWITHSUNDEEP
javascriptjqueryhtml
Rimil Dey
Rimil Dey

Reputation: 977

jQuery not running with the html file

I know there are enough and more questions on this topic, but none of them seem to fix up my problem. I am new to jquery and was trying it out for my code. It just doesn't seem to get up and running. I have tried changing the order in which the script occurs with other scripts, I have checked for the directory in which my jquery file resides, I have tried to use both the CDN version and the downloadable one. Nothing seems to work.

this is the head of my html file 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

            <title>Draft1</title>


            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet">

        <link href="./css/style1.css" rel="stylesheet">

        <!-- Custom Fonts -->
            <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
                      <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
            <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
        <link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">


            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>



        <![endif]-->
     </head>

i have put jquery at the end of the body of my html

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="./js/jquery-1.11.3"></script>
        <script>
            $(document).ready((function) {

                $("div").css("border", "3px solid red");
            });
        </script>


            <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

In this code I have put the jquery code with the html code itself. I have tried another version by putting the code in a separate file and running it, that doesnt work either.

Any help is much appreciated

Upvotes: 1

Views: 95

Answers (5)

Pooja Bhagat
Pooja Bhagat

Reputation: 91

Put jQuery in the head

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Draft1</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="./css/style1.css" rel="stylesheet">
    <!-- Custom Fonts -->
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
                  <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
        <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
    <link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="./js/jquery-1.11.3.js"></script>
    <script>
        $(document).ready((function) {

            $("div").css("border", "3px solid red");
        });
    </script>
    </head>

Upvotes: -1

Artur
Artur

Reputation: 1

Try this:

<script>
        $(document).ready(function($) {
            $("div").css("border", "3px solid red");
        });
</script>

Upvotes: 0

Ids Klijnsma
Ids Klijnsma

Reputation: 462

Your jquery script src is missing the .js extension

Upvotes: 0

SiZE
SiZE

Reputation: 2267

Try

  1. Change <script src="./js/jquery-1.11.3"></script> to <script src="//code.jquery.com/jquery-1.11.3.js"></script>

  2. Change $(document).ready((function) { to $(function(){ or $(document).ready(function(){

Upvotes: 2

Matthew
Matthew

Reputation: 4339

I think there's a typo where you add the jquery tag. the file name should end in the extension .js so probably something like this:

<script src="./js/jquery-1.11.3.js"></script>

Upvotes: 3

Related Questions