Skip to main content
K
karleyg8993141
Participant
July 13, 2017
Answered

My jQuery isn't working at all

  • July 13, 2017
  • 2 replies
  • 1927 views

Hi!

Can someone take a look at my code and see what I have done wrong. I'm designing a website from scratch but for some reason, my jQuery isn't working properly. For example, I created a dropdown menu for "login" and it won't work. Do I need a seperate document for jquery? I'm only familiar with html and css so I'm not sure how this works.

Thanks,

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>TrueFiltersandMembranes</title>

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

<script src="jQueryAssets/jquery-ui-effects.custom.min.js"></script>

<script type="text/javascript">

function MM_DW_effectDrop(obj,method,effect,dir,speed)

{

    obj[method](effect, { direction: dir}, speed);

}

</script>

</head>

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.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:// -->

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

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

    <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </head>

</html>

<body>

<div class="navbar navbar-fixed-top">

  <div class="container-fluid">

  <div class="navbar-header">

  <a href="#" class="navbar-brand">True Filters and Membranes</a>

  </div>

  <ul class="nav navbar-nav">

  <li><a href="#">Home</a></li>

  <li><a href="#">Product</a></li>

  <li style="width:300px;left:10px;top:10px;"><input type="text" class="form-control" id="search"></li>

  <li style="top:10px;left:20px;"><input type="submit" class="btn btn-primary" id="search_btn"></li>

  </ul>

  <ul class="nav navbar-nav navbar-right" onClick="MM_DW_effectDrop($(this),'hide','drop','down',1000)">

  <li><a href="#">Cart</a></li>

  <div class="dropdown-menu">

  </div>

  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Login</a>

  <Ul class="dropdown-menu">

  <div style="width:300px;">

  <div class="panel panel-primary">

  <div class="panel-heading">Login</div>

  <div class="panel-heading">

  <label for="email">Email</label>

  <input type="email" class="form-control" id="email" required/>

  <label for="email">Password</label>

  <input type="password" class="form-control" id="password" required/>

  <p><br/></p>

  <a href="#" style="color:white; list-style:none;">Forgotten Password</a><input type="submit" class="btn btn-success" style="float:right;" id="login" value="login">

  </div>

  </div>

  </div>

  </Ul>

  </li>

  <li><a href="#">Sign Up</a></li>

  </ul>

  </div>

  </div>

  <p><br/></p>

  <p><br/></p>

  <p><br/></p>

  <div class="container-fluid">

  <div class="row">

  <div class="col-md-1"></div>

  <div class="col-md-2">

  <div class="nav nav-pills nav-stacked">

  <li class="active"><a href="#"><h4>Categories</h4></a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  </div>

  <div class="nav nav-pills nav-stacked">

  <li class="active"><a href="#"><h4>Brand</h4></a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  <li><a href="#">Categories</a></li>

  </div>

  </div>

  <div class="col-md-8">

  <div class="panel panel-info">

  <div class="panel-heading">Products</div>

  <div class="panel-body">

  <div class="col-md-4">

  <div class="panel panel-info">

  <div class="panel-heading"> True Ultra Filter</div>

  <div class="panel-body">

  <img src="product_images/Icon.jpg"/>

  </div>

  <div class="panel-heading"> $500.00

  <button style="float:right;" class="btn btn-danger btn-xs">Add to Cart</button></div>

  </div>

  </div>

  </div>

  <div class="panel-footer">&copy;2016</div>

  </div>

  </div>

  <div class="col-md-1"></div>

</body>

</html>

This topic has been closed for replies.
Correct answer osgood_

You might want to start that navigation again, its a bit of a mess at the moment.

You can get some clean default Bootstrap coding from the link below with working drop downs:

https://getbootstrap.com/components/#navbar

or you can try including the Bootstrap js. I don't see that anywhere in your code and its needed to make the drop downs function:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

include it after your <!-- Optional theme --> code, which incidentally you can discard if you are not using it or don't know what it is.

I'm puzzled as to why you're using the below when you have access to jquery.

<ul class="nav navbar-nav navbar-right" onClick="MM_DW_effectDrop($(this),'hide','drop','down',1000)">

<script type="text/javascript">

function MM_DW_effectDrop(obj,method,effect,dir,speed)

{

    obj[method](effect, { direction: dir}, speed);

}

</script>

2 replies

A
Anonymous
November 13, 2017

To check whether jQuery is working or not you need to do this following code.

alert($("body"))

if alert contains some value then jQuery is working else not working.

O
osgood_Correct answer
Legend
July 13, 2017

You might want to start that navigation again, its a bit of a mess at the moment.

You can get some clean default Bootstrap coding from the link below with working drop downs:

https://getbootstrap.com/components/#navbar

or you can try including the Bootstrap js. I don't see that anywhere in your code and its needed to make the drop downs function:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

include it after your <!-- Optional theme --> code, which incidentally you can discard if you are not using it or don't know what it is.

I'm puzzled as to why you're using the below when you have access to jquery.

<ul class="nav navbar-nav navbar-right" onClick="MM_DW_effectDrop($(this),'hide','drop','down',1000)">

<script type="text/javascript">

function MM_DW_effectDrop(obj,method,effect,dir,speed)

{

    obj[method](effect, { direction: dir}, speed);

}

</script>

    K
    karleyg8993141Author
    Participant
    July 13, 2017

    Thank you. I was missing this element that you mentioned:

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    July 13, 2017

    How many pages did you paste above?

    I see two doctype declarations, head items outside the ending </head> tag and a load of other issues that will very likely cause you all sorts of problems down the road if that's all in one html file.

    Make sure to validate your code to catch errors like that. You can go to File > Validate > Current Document (W3c) in Dreamweaver, or run your pages through the validator at http://validator.w3.org/nu online.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices