cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
0
Upvote

My jQuery isn't working at all

karleyg8993141
Community Beginner ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

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>

Views

1.8K
Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
replies 5 Replies 5
latest latest Jump to latest reply
osgood_
LEGEND ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

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>

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
karleyg8993141
Community Beginner ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

In Response To osgood_

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>

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jon Fritz Community Expert
Community Expert ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

In Response To karleyg8993141

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.

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Jul 13, 2017 Jul 13, 2017

Copy link to clipboard

Copied

In Response To karleyg8993141

Now an EX- MVP (Hope I'm not breaking any rules)

No problem glad it help you.

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Nov 13, 2017 Nov 13, 2017

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices