I need to close popover on button click inside data-bs-content in bootstrap 5 popovers also there is no function on popover close on body click.
following is my code
$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Popover(White) left with close btn
JS
return function() {
$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
});
}
HTMl
Popover(White) left with close btn
Also if we use hide function as per their doc then we cant reopen popover, check below code
$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
$(document).on("click", ".popover .close-popover" , function(){
$(this).closest(".popover").hide();
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Popover(White) left with close btn
It seems like hide() does not toggle the element correctly for some reason as it changes the style for all popover elements (both old and new). After experimenting and searching online, I get it to work by using popover('hide') instead of hide().
$(document).ready(function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
$(document).on("click", ".popover .close-popover" , function(event){
$(this).closest(".popover").popover('hide');
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Popover(White) left with close btn
Related
I am trying to insert html attribute buttons into popover in bootstrap5 by JavaScript.
I am trying to make a clear button with this function below:
But button is not showing. Only text inside the popover.
popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id='checkout'>Check out</button></a> <button class='btn btn-primary' onclick='clearCArt()' id='clearcart'>Clear cart</button>"
console.log(popStr);
document.querySelector('[data-id="popcart"]').setAttribute('data-bs-content', popStr);
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-id="popcart"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,
{
html: true
})
});
function clearCart() {
cart = JSON.parse(localStorage.getItem('cart'));
for (var item in cart) {
document.getElementById('div' + item).innerHTML = '<button id="' + item + '"class="btn btn-primary cart">Add To Cart</button>'
}
localStorage.clear();
cart = {};
updateCart(cart);
}
You can try using anchor tag instead of a button.
var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
container: 'body',
placement : 'auto',
html : true,
title : 'Your Selected Items',
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Update for the buttons to work
Firstly i changed popover content
Old version :
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
New version :
I changed anchor href="#" to href="javascript:void(0)" prevent to redirect another place or page.
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
And then i tested. I can catch buttons (anchor) only when popover shown popover._element returns to popover button.
document.addEventListener("DOMContentLoaded", function(event) {
popover._element.addEventListener('shown.bs.popover', function () {
var btn = document.getElementById('checkOut');
btn.onclick = function() { clearCart() };
})
});
I'm guessing that for security reasons. Bootstrap doesn't let for button. but we can set function as above
Complete snippet
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
<script>
var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
container: 'body',
placement : 'auto',
html : true,
title : 'Your Selected Items',
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
})
document.addEventListener("DOMContentLoaded", function(event) {
popover._element.addEventListener('shown.bs.popover', function () {
var btn = document.getElementById('checkOut');
btn.onclick = function() { clearCart() };
})
});
function clearCart(){
console.log('Array cleared');
}
</script>
</body>
</html>
Currently, I'm trying to build a Heads or Tails system in HTML, CSS, & JavaScript, but when you flip the coin, there is no animation to show the flipping. I've tried to use timeInterval and timeOut, but they don't work correctly, am I doing something wrong?
function flipCoin() {
var randomSide = Math.floor(Math.random() * 2);
if (randomSide == 1) {
document.getElementById("coinImg").src =
"https://upload.wikimedia.org/wikipedia/commons/a/a0/2006_Quarter_Proof.png";
} else {
document.getElementById("coinImg").src = "https://www.coinhunts.com/wpcontent/uploads/2011/01/2005_CA_Proof.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Heads or Tails?</title>
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel='icon'
href='https://upload.wikimedia.org/wikipedia/commons/a/a0/2006_Quarter_Proof.png'>
<script src='script.js'></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</head>
<body>
<div class='container'>
<div class='row'>
<h1 class='mx-auto'>Heads or Tails? JS</h1>
</div>
<div class='row'>
<p class='mx-auto'>Click the Button Below to Flip a Coin!</p>
</div>
<div class='row'>
<button onclick='flipCoin();' class='btn btn-primary btn-lg mx-auto' type='button'>Flip a Coin</button>
</div>
<div class='row'>
<img href='' id='coinImg' class='mx-auto'/>
</div>
</div>
</body>
</html>
Try using setTimeout().
function coinSide() {
var randomSide = Math.floor(Math.random() * 2);
if (randomSide == 1) {
document.getElementById("coinImg").src = "HEADS_URL.png";
} else {
document.getElementById("coinImg").src = "TAILS_URL.png";
}
}
// Waits for 3 secs (3000ms) until executes the code
// Your random function is executed in setTimeout function
function flipCoin() {
document.getElementById("coinImg").src = "COIN_FLIP_GIF_URL_HERE.gif";
setTimeout(coinSide, 3000);
}
its been a while since I used my website and today that i tried to use it i keep getting this error before it was working just fine i havent done any coding to my site. can anyone tell me what is wrong I also added the Jquery for the code to make more sense. 10101000101010001110010101000101010111001001010101000101011001000111000
Uncaught TypeError: html2canvas(...).then is not a function
at renderContent ((index):2108)
at HTMLInputElement.<anonymous> ((index):1952)
at HTMLInputElement.dispatch (jquery-1.10.2.js:5095)
at HTMLInputElement.elemData.handle (jquery-1.10.2.js:4766)
renderContent # (index):2108
(anonymous) # (index):1952
dispatch # jquery-1.10.2.js:5095
elemData.handle # jquery-1.10.2.js:4766
HTML
<input id="btn-Preview-Image" type="button" value="Preview"/>
JavaScript
jQuery("#btn-Preview-Image").click(function(e) {
e.preventDefault();
renderContent();
jQuery("#download").removeClass("disabled");
});
if (document.getElementById("btn-Preview-Image") != undefined) {
document.getElementById("btn-Preview-Image").onclick = renderContent;
download.onclick = downloadImage;
}
function renderContent() {
html2canvas(jQuery("#firstshirt"), {
allowTaint: true,
logging: true
}).then(function(canvas) {
jQuery("#previewImage").append(canvas);
jQuery("#download").css("display", "inline");
jQuery("#download").attr("href", jQuery("#previewImage")
[0].children[0].toDataURL());
});
}
function renderContent() {
html2canvas(document.getElementById("firstshirt"), {
allowTaint: true
}).then(function(canvas) {
result.appendChild(canvas);
download.style.display = "inline";
download.href = result.children[0].toDataURL();
});
}
if (document.getElementById("btn-Preview-Image") != undefined) {
document.getElementById("btn-Preview-Image").onclick = renderContent;
download.onclick = downloadImage
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet"href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I have jQuery side menu toggle.
$('#open').click(function() {
$(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
$('.sidebar').toggleClass('active');
})
$(document).click(function(e) {
var sidebar = $(".sidebar, #open");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
sidebar.removeClass('active');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="topHeaderMenu leftMenu listMenu" id="open">
<div class="listMenuDiv"><i class="glyphicon2 glyphicon-align-justify"></i></div>
</li>
<div class="sidebar">
sidebar content
</div>
So, when I click #open then the sidebar will open.The question is how to make the glyphicon-align-justify change to glyphicon-remove if sidebar open and make glyphicon-remove to glyphicon-align-justify if sidebar closeand how to keep glyphicon-align-justify on document click(the current if I click outside/body it will change to glyphicon-remove)
replace your script
$('#open').click(function()
{
$(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
$('.sidebar').toggleClass('active');
})
$(document).click(function(e)
{
if($(".sidebar.active").length > 0){
var sidebar = $(".sidebar, #open");
if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
{
$('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
sidebar.removeClass('active');
}
}
});
My Angular JS app is displaying this message in the console :
angular.min.js tried to load more than once.
The app is fully working but is loading all the ajax requests several times before having any response.
I really don't understand what is could be. I don't even know what code to show you.
If anyone wants to help me, just tell me what part of my code you'd like to see and I'll copy paste it here...
thank you
UPDATE :
index.blade.php :
#extends('master')
#section('controller') ng-controller="AppController" #endsection
#section('content')
<div class="app" id="app"
ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded}"
ui-view></div>
<!-- jQuery -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/libs/moment.min.js"></script>
<script>
window.__user = {{Auth::user()->toJson()}};
window.__user_details = {{Auth::user()->details->toJson()}};
window.__company = {{ Auth::user()->getCompany()->toJson()}}
<?php if( Department::where('company_id', Auth::user()->company_id)->first() ): ?>
window.__startDepartment = {{ Department::where('company_id','=',Auth::user()->company_id)->first()->id }}
<?php endif; ?>
#if(Auth::user()->user_level == 4)
window.__companies = {{ Company::all()->toJson() }}
#endif;
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Angular -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-tree.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/functions.js"></script>
<script src="js/controllers/AppController.js"></script>
<script src="js/controllers/DashboardController.js"></script>
<script src="js/controllers/DemoControllers.js"></script>
<script src="js/controllers/LeaveControllers.js"></script>
<script src="js/controllers/ReporterControllers.js"></script>
<script src="js/controllers/TimeslotControllers.js"></script>
<script src="js/controllers/TasksControllers.js"></script>
<script src="js/controllers/MessagesControllers.js"></script>
<script src="js/controllers/ResourceControllers.js"></script>
<script src="js/controllers/LocationControllers.js"></script>
<script src="js/controllers/StaffController.js"></script>
<script src="js/controllers/DepartmentControllers.js"></script>
<script src="js/controllers/OtherControllers.js"></script>
<script src="js/controllers/DatePickerInputController.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- Lazy loading -->
<script>
window.intercomSettings = {
app_id: "eoo7q8o9",
user_id: '{{{ Auth::user()->id }}}',
name: '{{{ Auth::user()->first_name }}} {{{ Auth::user()->surname }}}',
email: '{{{ Auth::user()->email }}}',
user_type: '{{{ Auth::user()->getUserType() }}}',
company: '{{{ Auth::user()->getCompany()->name }}}'
};
</script>
<script>
(function () {
var w = window;
var ic = w.Intercom;
if (typeof ic === "function") {
ic('reattach_activator');
ic('update', intercomSettings);
} else {
var d = document;
var i = function () {
i.c(arguments)
};
i.q = [];
i.c = function (args) {
i.q.push(args)
};
w.Intercom = i;
function l() {
var s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://widget.intercom.io/widget/eoo7q8o9';
var x = d.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (w.attachEvent) w.attachEvent('onload', l);
else w.addEventListener('load', l, false);
}
})()
</script>
#endsection
Looks like you're loading third party libraries twice
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-tree.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
There are multiple reasons to this. Can you show your routing code? These errors are often caused due to mix of routes or improper handling of the routing.