i have a project which uses the below depedencies:
<head>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" >
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/datatables.min.css"/>
<script type="text/javascript" src="js/datatables.min.js"></script>
<script type="text/javascript" src="parsley/dist/parsley.min.js"></script>
<link rel="stylesheet" type="text/css" href="parsley/parsley.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/bootstrap-datepicker1.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepicker.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
In that project, i want to add multiple depedent dropdown lists like that:
<div class="col">
<select name="category_item" class="form-control input-lg" id="category_item" data-live-search="true" title="select category"></select>
</div>
<div class="col">
<select name="sub_category_item" id="sub_category_item" class="form-control input-lg" data-live-search="true" title="select subcategory"></select>
</div>
</div>
I've always developed this idea, using the below depedencies:
<head>
<title>Website</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The problem appears, when i add my depedencies in project's depedencies, resulting not-functional dropdown lists. How can i combine depedencies, in order to have project's style and normal operation of my dropdown lists?
I have a webpage that was working fine on my VPS, I moved it to another VPS and some things on the page stopped working like the "clipboard.js" and the glyphicon icons. I can not figure out why. It's a one page website, and they are not php related to make me think that I am missing a php extension.
Below is my head section of the page. I am using cdns for eveything.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/language/en_US.min.js"></script>
<!-- for phone number! -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" integrity="sha256-v8+xOYOnVjQoSDMOqD0bqGEifiFCcuYleWkx2pCYsVU=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js" integrity="sha256-H7Mu9l17V/M6Q1gDKdv27je+tbS2QnKmoNcFypq/NIQ=" crossorigin="anonymous"></script>
<!-- for copy to clipboard -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>
</head>
I have build for popup on a page (Inspirations page in this case). This page is a directive included in main 'product_chat.html' which is connected to 'product_chat.js'. All these files are initiated from index.html
index.html
<!DOCTYPE html>
<html ng-app="myApp" lang="en" class="no-js" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head data-ng-app="app">
<meta charset="utf-8">
<meta name="verify-admitad" content="ed499e6bac"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="wot-verification" content="591de88d2ae5d58564c7"/>
<title ng-bind="title">"Online shopping site | Women fashion | Personal styling - Selekt"</title>
<link rel="icon" href="/pics/favicon.png">
<meta name="description" content="{{meta_desc}}">
<meta itemprop="description" content="Application wide description for Schema.org (Google+ uses this)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700,200,300' rel='stylesheet' type='text/css'>
<link rel="canonical" href="{{canonical_url}}">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/dist/angular-typewrite.css"/>
<link rel="stylesheet" href="css/isteven-multi-select.css"/>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/select-css.css">
<link rel="stylesheet" href="css/style_find.css">
<link rel="stylesheet" href="css/select-css-compact.css">
<link rel="stylesheet" href="css/searchSelect.css">
<link rel="stylesheet" href="css/style_load.css">
<link rel="stylesheet" href="css/popup.css">
<!--<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<link rel="stylesheet" href="bower_components/ngModal/ng-model.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92766347-1', 'auto');
ga('send', 'pageview');
</script>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
.main_banner {
background-image: url('pics/banner.png');
background-repeat: no-repeat;
min-height: 100vh;
display: block;
overflow-x: hidden;
background-size: 1600px 900px;
}
</style>
<base href="/"/>
</head>
<body class="main_banner">
<div class="">
<div ng-view>
</div>
</div>
<!--In production use:-->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="node_modules/socket.io/socket.io.js"></script>
<!--<script src="bower_components/socket.io-client/socket.io.js"></script>-->
<!--<script src="bower_components/angular-socket-io/socket.js"></script>-->
<script src="js/angular-searchAndSelect.js"></script>
<script src="product-app-services/app-services.js"></script>
<script src="publish/wedding-dresses-for-women/product-chat.js"></script>
<script src="publish/home/product-chat.js"></script>
<script src="publish/search/product-chat.js"></script>
<script src="publish/find/product-chat.js"></script>
<script src="app-services/app.module.js"></script>
<script src="app.js"></script>
<script src="bower_components/angular-typewrite/dist/angular-typewrite.js"></script>
<!--//custom dialog-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootbox/bootbox.js"></script>
<script src="bower_components/ngBootbox/dist/ngBootbox.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
product_chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Private Chat Application with Node.js, Socket.IO and AngularJS</title>
<meta name="generator" content="Bootply">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style_find.css">
</head>
<body cz-shortcut-listen="true" style="background: white">
<div id="main_page" ng-show="show_page" scroll >
<nav_header></nav_header>
<div>
<div>
<inspirations ng-if="inspirations_dir"; ng-init="myDialog()"></inspirations>
</div>
</div>
</div>
</body>
</html>
in the above code, I am calling popup function in 'inspirations' tag
Here is my product_chat.js file (Only relevant part of the code is attached)
var app = angular.module("WeddingDressesForWomen", ['ui.bootstrap']);
app.controller("WeddingDressesForWomen", ["$http","$rootScope", '$scope', '$window', 'socket', "$location", "$anchorScroll", "$timeout", '$routeParams', 'title', 'userService', '$filter', '$document', '$localStorage','$uibModal',
function ($http,$rootScope, $scope, $window, socket, $location, $anchorScroll, $timeout, $routeParams, title, userService, $filter, $document, $localStorage,$uibModal) {
$scope.myDialog = function () {
$uibModal.open({
templateUrl: 'template/popup.html',
backdrop: 'static',
windowClass: 'modal',
size: 'lg',
controller: function ($scope, $uibModalInstance) {
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
}
});
};
}]);
popup.html template
<div class="modal-header">
<h3 class="modal-title">Note</h3>
</div>
<div class="modal-body">
Selekt will be functionally live with Women's Fashion by 10th May and Men's Fashion by 30th May. It is currently in Beta phase.
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" style="background-color:#337ab7; border-color:#2e6da4"
ng-click="cancel()">Okay</button>
</div>
I can't comment on this because of my reputation! But do you minify the javascript? I can see you've used implicit dependency injection for $uibModalInstance in the controller - you should be using the property annotation as well, when you declare the controllers dependencies for $uibModalInstance otherwise the code will be broken when the javascript is minified.
Also for the bootstrap library. You can log the service to the console.. i.e console.log($nameOfService)... Are you not able to download the bootstrap javascript and add it to the project?
when i open http://localhost/Website/home.html my css stylesheet is not showing up. Maybe it is something with the bootstrap css? I am new to both bootstrap and XML. Here is my home.html head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>****</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
My style.css is located in the same folder as my home.html
EDIT: some of my css are now showing, but not all. Strange..
EDIT 2: Apparently the bootstrap CSS did something fishy, it works if i changed the order to this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
I'm trying to link my local bootstrap, and style file to my html file, but none of them works.
Here's my html file:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
My css files are located in a folder called css.
I got these files there:
The htdocs folder I have this:
JUST TRY THIS ---
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
These Codes are Wrong ---
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
These are Correct ---
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>