We Keep Coding

Close button in bootstrap 5 popover and close popover on body click

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

jquery undefined / null error

I am a c programmer and trying to call jquery function from html.
For example from open source I am having below, I would like to make a variable wd accessible to webdriver-app.js
A.html:
<html>
<!-- jQuery & jQuery UI + theme (required) -->
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="keyboard.css" rel="stylesheet">
<script src="jquery.keyboard.js"></script>
<script src="webdriver.js"></script>
<script src="base64-arraybuffer.js"></script>
<script src="FileSaver.js"></script>
<script src="hammer.min.js"></script>
<script src="webdriver-app.js"></script>
</head>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebDriverUrlPortChange()" onkeyup="wd.onWebDriverUrlPortChange()"/>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebPageChange()" onkeyup="wd.onWebPageChange()"/>
webdriver-app.js contains:
....
WebDriverJsController.prototype.onWebPageChange = function() {
this.view.updateSessionDepControls();
};
document.addEventListener("DOMContentLoaded", function(event) {
window.wd = new WebDriverJsController();
});
....
Currently, changing above wd.onWebPageChange() to window.wd.onWebPageChange() gives me undefined or null error. What could be wrong in above simplified code?

Trello api invalid token

I have to make a work with the trello API, but I'm getting error 400 (invalid token) and I have no idea why.
This is my code (I have replaced my actual key with mykey)
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://trello.com/1/client.js?key=mykey"></script>
<script type="text/javascript">
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication"); },
error: function() { console.log("Failed authentication"); }
});
</script>
</html>

You should put all your code logic inside document.ready, so the entire document will be ready and then only you will get the popup for authentication / authorization. you can get a valid app key here : https://trello.com/app-key See the code example :
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
<div id="loggedin">
<div id="header">
Logged in to as <span id="fullName"></span>
</div>
<div id="output"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js?key=[appKeygoeshere]"></script>
<script type="text/javascript">
$(window).load(function(){
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication");
Trello.members.get("me", function(member){
$("#fullName").text(member.fullName);
var $cards = $("<div>")
.text("Loading Cards...")
.appendTo("#output");
// Output a list of all of the cards that the member
// is assigned to
Trello.get("members/senthil192/cards/all", function(cards) {
$cards.empty();
$.each(cards, function(ix, card) {
//alert(card.name);
$("<a>")
.attr({href: card.url, target: "trello"})
.addClass("card")
.text(card.name)
.appendTo($cards);
});
});
});
},
error: function() { console.log("Failed authentication"); }
});
});
</script>
</html>
code ref url : http://jsfiddle.net/danlec/nNesx/

AngularJS Tried to load more than once

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.

filter function in angular js not working

I've followed this basic AngularJS tutorial : https://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D
Everything went well until I added the clearCompleted() method. it does not seem to be working:
HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{getTotalTodos()}} </h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form class="form-horizontal">
<input type="text" ng-model="formTodoText" ng-model-instant>
<button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
</form>
<button class="btn-large" ng-click="clearCompletedTodos()">
Clear Completed
</button>
</div>
</body>
</html>
JS:
function TodoCtrl($scope) {
$scope.todos = [
{text: 'Learn Anagular', done:false},
{text: 'Build an app', done:false}
];
$scope.getTotalTodos = function() {
return $scope.todos.length;
};
$scope.addTodo = function() {
$scope.todos.push({text: $scope.formTodoText, done: false});
$scope.formTodoText = '';
};
$scope.clearCompletedTodos = function() {
$scope.todos = _.filter($scope.todos, function(todo) {
return !todo.done;
});
};
}
the "completed todos" are not getting removed .

Here is what I have done and it works for me:
Please notice that the follow lines has been changed (http:// added)
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
to the follow
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

I met the same problem, actually, write it like below, it works fine:
$scope.clearCompleted = function(){
$scope.todos = $scope.todos.filter(function(todo){
return !todo.done;
})
};

Actually none of those worked for me; I used this one.
var t = [];
angular.forEach($scope.todos, function (i)
{
if (!i.done)
t.push({text: i.text, done: i.done});
});
$scope.todos = t;