How to print mulitple cards for each text - javascript

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>

Related

Why I get Uncaught TypeError: $(...).DataTable is not a function

I am start working with DataTable.js and when I want to integrate in my project which is done in ASP.NET CORE MVC 5.0 I get error like
Uncaught TypeError: $(...).DataTable is not a function
I try to google and I found that this error may come when you JQuery is older version, but I updated to newest version 3.7.1
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
WHat else I look is I try to change calling of function to call by ID and by class but nothing change as well.
Here is my layout page as well where I include datatable.min.js and datatable.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - BergClinic</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/fontawesome/css/all.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BergClinic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Patient" asp-action="Index">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Doctor" asp-action="Index">Doctors</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="AdmissionPatient" asp-action="Index">Admission patient</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-white-50 bg-primary">
<div class="container">
© 2021 - BergClinic
</div>
</footer>
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
In my Index View Page I also create calling of datatable in following meaner
#model IEnumerable<BergClinics.Models.Doctor>
#{
ViewData["Title"] = "Index";
}
<div class="container p-3 bg-white">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Doctor's List</h2>
</div>
</div>
<br /><br />
#if (Model.Count() > 0)
{
<table class="table datatable-responsive datatable-doctor" style="width:100%">
<thead>
<tr>
<th>
Doctor Name
</th>
<th>
Code
</th>
<th>
Speciality
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var obj in Model)
{
<tr>
<td width="25%">#obj.Firstname #obj.Lastname</td>
<td width="25%">#obj.Code</td>
<td width="25%">#obj.Speciality</td>
<td class="text-center">
<div class="w-75 btn-group" role="group">
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Edit" class="btn btn-primary mx-2">
<i class="fas fa-edit"></i>
</a>
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
<i class="far fa-trash-alt"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p> No Doctor exists.</p>
}
</div>
<script>
$('.datatable-doctor').DataTable({
dom: 'Bfrtip',
//buttons: [
// {
// text: '<i class="btn btn-info"><i class="fas fa-plus"></i> Create New Doctor</a>',
// className: 'btn bg-blue',
// action: function (e, dt, node, config) {
// window.location.replace("/Doctor/Create");
// }
// }
//],
columnDefs: [
//Ovaj dio je potreban
{
responsivePriority: 1,
targets: -1
},
{
targets: [0],
orderable: true,
searchable: true,
printable: true,
width: "120"
}
]
});
</script>
Does anyone know where I made mistake ? What is wrong here ?

When you load jQuery you create a new instance of $ and jQuery which don't have any plugins you had previously loaded and attached to previous instances of jQuery.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
You are loading four different versions of jQuery!
Load one and make sure it is the current version.
Remove all of the lines quoted above except the first one.
You are trying to call DataTables in a script loaded in the body of the document, which is above the footer where you have:
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
You need to load the plugin before you call it.
You also shouldn't load the plugin twice.
Move one of those lines so it is immediately after the line where you load jQuery. Remove the other one.

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"

Dropdown dont work Bootstrap 4 [duplicate]

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

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

Categories