Dropdown dont work Bootstrap 4 [duplicate] - javascript

This question already has answers here:
Bootstrap 4 Dropdown Menu not working?
(14 answers)
Closed 4 years ago.
So I want to make a dropdown using Bootstrap 4 for my Spring MVC Aplication.
I'm also using Thymeleaf template engine.
I 'imported' popper.js and jQuery in my html page.Also I have included Bootstraps's Css and Javascript to static direcotory as separate files in my project
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
And it's still not working.
Here the full code of my html page
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Footer</title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</head>
<body>
<div th:fragment="footer">
<div>
<a th:href="#{/notebook/add}" class="btn btn-outline-primary" role="button">Add Note</a>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort</button>
<div class="dropdown-menu">
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_ASC')}">Date Ascending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_DESC')}">Date Descending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Done')}">Done</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Not_Done')}">Not Done</a>
</div>
</div>
</div>
</body>
</html>


For the drop-down to work, you must load the following 3 JavaScript files
and load them in that particular order (first jQuery, then popper.js and then bootstrap.js):
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


You also need to include Bootstrap's CSS and Javascript files in order for it to work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


Updated your snippet.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div th:fragment="footer">
<div>
<a th:href="#{/notebook/add}" class="btn btn-outline-primary" role="button">Add Note</a>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort</button>
<div class="dropdown-menu">
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_ASC')}">Date Ascending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_DESC')}">Date Descending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Done')}">Done</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Not_Done')}">Not Done</a>
</div>
</div>
</div>
</body>
</html>
Hope it will helps you

Related

Black Dashboard: loading another HTML file height problem

I am trying to use Black Dashboard for my Admin Panel. As I click on my Nav Icons, another HTML file is being loaded into a div tag. The problem is that when I do this using JavaScript, the loaded file is not in full height and appears with a vertical scroll bar.
you can see the main html below:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/53b023e3b1.js" crossorigin="anonymous"></script>
<title>Dashboard</title>
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="purple" data-background-color="white">
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#" id="posts"">
<i class="fas fa-newspaper"></i>
<p>Posts</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main-panel">
<div class="content">
<div class="container-fluid">
<div class="card" id="main-content">
</div>
</div>
</div>
</div>
<link href="black-dashboard.css?v=1.0.0" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="black-dashboard.js?v=1.0.0" type="text/javascript"></script>
<script>
document.getElementById("posts").onclick = function () {
document.getElementById("main-content").innerHTML='<object type="text/html" data="newpost.html" ></object>';
};
</script>
</body>
</html>
The newpost.html file that I want to load:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/53b023e3b1.js" crossorigin="anonymous"></script>
<link href="black-dashboard.css?v=1.0.0" rel="stylesheet" />
<title>new post</title>
</head>
<body>
<div class="card">
<div class="card-header">
Nav Item Title
</div>
<div class="card-body">
<form>
<!-- simple form here -->
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="black-dashboard.js?v=1.0.0" type="text/javascript"></script>
</body>
</html>
I tried different CSS solutions including using height: 100% for parent and child elements and felx but nothing seems to work. You can see the screen shot of the result below:
Any help would be really appreciated <3
UPDATE: The problem was somehow related to my editor. I was using Sublime.

Try adding to your css:
.card {
height:calc(100vh - 40px);
}
And where I have 40px substitute the height needed for your Dashboard header.

Try adding this code to use Black Dashboard for your Admin Panel ;
link href="../assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet"

How to print mulitple cards for each text

Hi guys so I am making this project that retrieves a tweet from the president account and displaying it inside a card like the one shown in the picture. My problem is that I only know how to display just one card for one tweet but how do you display multiple cards for each tweet ?
In the javascript (first block) code I extract the tweets and insert them into the DOM or in this case the card. This is done inside Promise.
In HTML(second block) under <'!-->Card code block<--> has the block of code where I create the Card.
in case you were wondering I intend to visualize some data thats why I have d3 code in there. And all of this is running through a server if that changes anything
tweetData=d3.json("/tweets").then(function(data){
return data;});
Promise.all([tweetData]).then(function(values){
data=values[0];
console.log(data.length)
document.querySelector(".btn-jan").addEventListener('click',function(){
for (var x=3;x<=3;x++){
document.querySelector("#full_text").textContent=data[x].full_text;
document.querySelector("#created_at").textContent=data[x].created_at;}
});
// document.getElementById('#lk').setAttribute('href','https://twitter.com/statuses/?id=' + data.id_str);
});
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Twitter app</title>
<!-- Bootstrap -->
<!-- Custom styling -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type=text/css href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<!-->img class="img-fluid" alt="Responsive image" src="{{ url_for('static', filename='head.jpg') }}"-->
<div class="text-center primary">
<h2>Trump</h2>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Month 2018
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="btn-jan text-center"><li><a>January</a></li></button>
</ul>
</div>
<!-->Card code block<-->
<div class="card" style="width: 30rem;">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted" id="created_at">Card subtitle</h6>
<p class="card-text" id="full_text"></p>
Card link
</div>
</div>
<!-- External JS libraries -->
<script src="http://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
<script src="{{ url_for('static', filename='style.css') }}"></script>
<!-- Custom JS -->
</body>

Google Apps Script Sidebar - How to setup onclick?

I am trying to run a function in the HTML file when the Select Template item is clicked. I have tried 2 different way but they don't seem to work. I got it to run with the onclick="google.script.run.selectTemplate" but I want to run the local function first.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div class="content">
<div class="card mb-4 box-shadow">
<div class="card-body">
<h5 class="card-title">Welcome!</h5>
<p class="card-text">Please select the template that you'd like to fill with form responses!</p>
<div class="list-group mb-4">
<div id="select-template" onclick="runSelectTemplate();" class="list-group-item list-group-item-action">Select Template
<i class="fas fa-circle-notch fa-spin float-right" style="font-size:24px"></i>
</div>
</div>
<button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>
</div>
</div>
</div>
<script>
$(function() {
log("Setting up sidebar clicking...");
$('#select-template').click(runSelectTemplate);
});
function runSelectTemplate(){
log("Select Template clicked... run selectTemplate()");
//Do stuff here first, then;
google.script.run.selectTemplate(); //success: change icon to green -> enable getstarted button //error: icon to X then back to file
}
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>
Update: I've tried updating the select-template element to a button, but it doesnt work either... The <script> section doesnt seem to run at all.
<button type="button" id="select-template" class="btn btn-med btn-block btn-outline-primary mt-4 mb-4">1. Select Template
<i class="far fa-file-alt float-right" style="font-size:24px"></i>
</button>
<button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>

Looks like I made a silly mistake... My jQuery script tag was at the bottom of the Body tag so it wasn't loaded right away.
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"</script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>

Angular 2 Component using External JS libraries

I just started Angular2 and while creating a navbar-component, I am stuck on how to use the external JS files. CSS is working fine but i am not able to show drop-down and toggle-button for mobile-view. So, I guess javascript is not working.
I am using this library mdb navbar-materialized-bootsrap. I need to use these three JS-files.
mdb.min.js
bootsrap.min.js
jquery2.2.3.min.js
Right now,I am just using the script-tag to load these files in index.html. Please guide me ?
Here are some of my files. ----->
navbar.component.ts
import { Component } from '#angular/core';
#Component({
moduleId: module.id,
selector:'navbar',
templateUrl: 'navbar.component.html',
styleUrls: [
'navbar.component.css'
],
})
export class NavbarComponent {
title='Doctor Application';
}
navbar.component.html
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
<i class="fa fa-bars"></i>
</button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<!--Navbar Brand-->
<a class="navbar-brand">{{title}}</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link">Doctors <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cities</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item">Lahore</a>
<a class="dropdown-item">Karachi (Coming Soon)</a>
<a class="dropdown-item">Islamabad (Coming Soon)</a>
</div>
</li>
</ul>
<!--Search form-->
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!--/.Collapse content-->
</div>
index.html
<html>
<head>
<base href="/">
<title>Angular Tour of Heros</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!-- 3. Configure your own JS files -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-2.2.3.min.js"></script>
<script src="static/js/mdb.min.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading your application</app>
</body>
</html>

You need to import the Js scripts after the <app></app> in your index.html. The code will run sequentialy. So when the js tag is loaded the scripts need the DOM.
Ex:
<html>
<head>
<base href="/">
<title>Angular Tour of Heros</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading your application</app>
<!-- 3. Configure your own JS files -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-2.2.3.min.js"></script>
<script src="static/js/mdb.min.js"></script>
</body>
</html>

depending what bundler you are using, if systemJS then you can refer to:
https://angular.io/guide/quickstart
or import them for webpack:
https://angular.io/guide/webpack#entries-and-outputs

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>

I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading

Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

Categories