We Keep Coding

$(…).tagsinput is not a function

EDIT: I can only call tagsinput() if I do not use tagsinput() in a callback
This is still a problem, because I need to call tagsinput() in a callback.
ORIGINAL:
I have not been able to find an answer that solves my issue yet:
I am trying to use this library: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
my HTML file includes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<!-- Bootstrap CDN links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="script.js"></script>
<select id="el" data-role="tagsinput" name="el" multiple ></select>
in script.js (which is connected to multiple HTML files, but the one in question is included above):
function addTagToInput() {
$('#el').tagsinput('add', 'item2');
}
After trying to call addTagToInput(), I get $(…).tagsinput is not a function even though the CDN JS file was properly loaded.

The deciding question is still how exactly do you initialize your tagsinput()?
Also I think that you get some other errors like network problems or something else, so that the tagsinput or jQuery library will not load. The following code works correctly and I've created a button whose click event triggers the addTagToInput() function:
$(function() {
var $el = $('#el'),
$btnAddTag = $('#add-tag');
function initInput() {
$el.tagsinput({
// add a custom class which run with bootstrap v4
tagClass: 'badge-dark'
});
}
function addTagToInput() {
$('#el').tagsinput('add', 'item' + Math.floor(Math.random() * 100));
}
initInput();
addTagToInput();
$btnAddTag.on('click', addTagToInput);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<button type="button" class="btn btn-dark" id="add-tag">+</button>
<!-- because of adding the initInput() function in jQuery I've deleted the data-role="tagsinput"-->
<select id="el" name="el" multiple ></select>

BIRT Reporting with Date picker not working

I am using BIRT RCP 4.8. I am trying to add a date picker in Parameter Tab. I have modified FramesetFragment.jsp as below...
<script src="birt/JSCal2-1.9/src/js/jscal2.js" type="text/javascript"></script>
<script src="birt/JSCal2-1.9/src/js/lang/en.js" type="text/javascript"></script>
<link rel="stylesheet" href="birt/JSCal2-1.9/src/css/border-radius.css" meda="screen" type="text/css"/>
<link rel="stylesheet" href="birt/JSCal2-1.9/src/css/jscal2.css" meda="screen" type="text/css"/>
<link rel="stylesheet" href="birt/JSCal2-1.9/src/css/gold/gold.css" meda="screen" type="text/css"/>
And TextBoxParameterFragment.jsp as
<INPUT TYPE="HIDDEN" ID="isRequired"
VALUE = "<%= parameterBean.isRequired( )? "true": "false" %>">
<%
if (parameterBean.getParameter().getDataType()==7|| parameterBean.getParameter().getDataType()==4) {
%>
<button id="<%=parameterBean.getName()%>_button">...</button>
<script type="text/javascript">
Calendar.setup({
trigger : '<%=parameterBean.getName()%>_button',
inputField : '<%=parameterBean.getName()%>',
onSelect : function() { this.hide() }
});
</script>
<%
}
%>
But still i am getting no buttons for selecting date in WebViewer or after deployment. Gone through all the resource, any help is appreciated..
Reference Link
enter link description here

I found the answer for the above...The parameter which i created for getting the date from user was set to String type....And hence button was not getting displayed. I have changed the same in BIRT Report Designer and its working now...!!!!Aola...

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?

Uncaught TypeError: $(...).lightGallery is not a function

when I try to click the link it shows this in browser console:
Uncaught TypeError: $(...).lightGallery is not a function(anonymous function) # index.html:250dispatch # jquery.min.js:3r.handle # jquery.min.js:3
and this is the code I used:
$('#gallery').on('click', function() {
$(this).lightGallery({
dynamic: true,
dynamicEl: [{
"src": 'assets/images/gallery/1.jpg',
'thumb': 'assets/images/gallery/thumbs/1.jpg',
'subHtml': '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>'
}, {
'src': 'assets/images/gallery/2.jpg',
'thumb': 'assets/images/gallery/thumbs/2.jpg',
'subHtml': "<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
}, {
'src': 'assets/images/gallery/3.jpg',
'thumb': 'assets/images/gallery/thumbs/3.jpg',
'subHtml': "<h4>Coniston Calmness</h4><p>Beautiful morning</p>"
}]
})
});
bear in mind I am using the Dynamic Mode in lightGallery.
I already included the lightGallery library before and the jQuery library before it.
I have tried to substitute the $ with jQuery.
I also tried the "semicolon solution" but with no luck.
this is the whole libraries i included:
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/SmoothScroll.js"></script>
<script src="assets/viewportChecker/jquery.viewportchecker.js"></script>
<script src="assets/cookies-alert-plugin/cookies-alert-core.js"></script>
<script src="assets/cookies-alert-plugin/cookies-alert-script.js"></script>
<script src="assets/dropdown/js/script.min.js"></script>
<script src="assets/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="assets/jarallax/jarallax.js"></script>
<script src="assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="assets/jquery-mb-ytplayer/jquery.mb.YTPlayer.min.js"></script>
<script src="assets/theme/js/script.js"></script>
<script src="assets/mobirise-slider-video/script.js"></script>
<script src="assets/formoid/formoid.min.js"></script>
<!-- lightgallery -->
<script src="assets/theme/js/lightgallery.min.js"></script>
<script src="assets/theme/js/lg-thumbnail.min.js"></script>
<script src="assets/theme/js/lg-fullscreen.min.js"></script>
<script src="assets/theme/js/lg-share.min.js"></script>
<script src="assets/theme/js/lg-zoom.min.js"></script>
<script src="assets/theme/js/lg-autoplay.min.js"></script>

Wooooooooooo Haaaaaa I finally solved it, and the problem was maybe with local version I have!!
When I switched to the cdnjs version it worked PERFECT!!!
a huge THANKS for all of you!!
all I did is replace the local ones with the cdn links
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/css/lightgallery.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/js/lightgallery.js"></script>

in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html.
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body. at the end after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>

I make sure, this plugin was the last script in been called.
I also wrapped the code inside the ready function.
In addition, I show how to use a variant to select elements from the DOM. I'm using jQuery and running all from my local server. The sources of lightgallery are from 2018, downloaded from the repository, manually.
<script type="text/javascript">
$(document).ready(function() {
$('.post img').wrap(function(){
return "<div class='gallery' data-src='" + $( this ).attr("src") + "'></div>";
});
lightGallery(document.querySelector('.post'), {selector: ".gallery"});
});
</script>

Ui-Grid Not Displaying (at all)

I'm using AngularJS. The controller is functioning; I can call functions and values from it via my view. I can assign values to my gridOptions.data without console error. I can define other properties for gridOptions without conosole error. But the grid doesn't display... at all.
My index.html has the following header:
<!--Lib-->
<!--jquery-->
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css"/>
<script src="app/lib.bower/toastr/toastr.js"></script>
<link href="app/lib.bower/toastr/toastr.css" rel="stylesheet" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<script src="app/services/userSearchService.js"></script>
<script src="app/services/passwordCreationService.js"></script>
<script src="app/services/toasterService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/UserSearchController.js"></script>
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
My controler is as such:
var userSearchController = function($scope, $interval, userSearchService) {
var vm = this;
vm.gridOptions = {
enableFiltering: true,
showGridFooter: true,
data: [
{
test: 'test',
test2: 'test2'
}
]
};
//more code
}
And the view has the following div:
<div ui-grid="vm.gridOptions" class="grid"></div>
Again, I don't get any errors, I just get... nothing on my .html; no data, no columns, not even a border, it entirely doesn't appear. I've ensured that the vm.gridOptions is assigned as soon as the controller starts up, and (again) I've ensured that I can run methods and get values from my controller.
I've poured over numerous tutorials which all have their own flavor of making ui-grid work, and I can't figure out what I'm doing wrong.
Anyone know what I'm missing?