We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I'm working with Bootsrtap 4 and I'm trying to add the class active to my nav-item elements whenever their nav-link href attribute is the same as the current url.
On the html side, I uesd a basic url generator as shown below:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/brands') }}" role="button">Brands</a>
</li>
<!-- ... -->
</ul>
And then I used a jQuery method to compare them with the current url:
$('.navbar-nav .nav-item .nav-link').each( () => {
// If the current path and the link url are the same...
if ($(this).attr('href').indexOf(location.pathname) !== 1) {
// ...then add the class 'active' to 'nav-item', its parent
$(this).parent().addClass('active')
}
})
However, I noticed that $(this).attr('href') was undefined, probably because it's a generated url, and therefore nav-item doesn't get the active class.
EDIT: as an example, for now it's a very basic url, without parameter, which looks like this:
http://domain.example/brands
Does anyone know how to solve this problem? Thanks in advance.
I'd recommend you to go another way. Instead of "activating" the link with jQuery, you could easily do it server-side with Laravel:
<ul class="navbar-nav">
<li class="nav-item">
<a class="{{ Request::is('brands*') ? 'nav-link active' : 'nav-link' }}"
href="{{ url('/brands') }}"
role="button">Brands</a>
</li>
<!-- ... -->
</ul>
Explanation:
Laravel uses the template-engine twig for rendering the HTML server-side. Instead of manipulation the DOM client-side, you can easily add an conditional to check for the current request parameters. Laravel gives you nativeliy the possibility to check the request path even with a wildcard.
Your problem is most likely caused by the difference between using () => {} or function () {}
When you use the arrow syntax the prop this is unbound. Meaning that also $(this) will return an empty jQuery object instead of returning the anchor. Any follow up jQuery chaining will return something empty/undefined.
So, changing .each( () => { to .each(function() { will at least fix your undefined problem.
Information about the arrow syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Okay this is what i do generally do in all my laravel projects when it comes to make sidebar or any link "active" on click :-
<li class="nav-item {{ in_array(Route::currentRouteName(),[
'admin.dashboard',
'admin.updates',
])? 'active show' : ''}}">
<i class="typcn typcn-clipboard"></i>Dashboard
<nav class="nav-sub">
Home
</nav>
</li>
Now notice this {{ BladeHelper::sideBar_link_isActive('admin.dashboard') }}
I created dynamic helper function to get the current url and return "active" class
Path : app\Helpers\BladePageHelper
<?php
namespace App\Helpers;
use Route;
class BladePageHelper
{
public static function sideBar_link_isActive($selectedLink){
$currentRouteName = Route::currentRouteName();
if($selectedLink === $currentRouteName){
return 'active';
}else{
return '';
}
}
}
I'm using route name here like
Route::("/","MyController#mymethod")->name("myname")
You can do this with url too.
I hope this helps.
Happy Coding
I have some list items which are treated as Tabs in my UI. I also have a 'next' button under every tab and last tab have a 'finish' button. I need to move to next tab when i clicked on 'Next' button. I am working on an Angular2 project with typescript version 2.3.4. So i need some typescript code to work on button click.
While searching, i got some jquery code like,
$('.nav-tabs > .active').next('li').find('a') from how to display next bootstrap tab on button click.
I tried it in my button click(.ts file) and it works!. But i am not sure about the using of jquery in my project. Is it possible to get the element(html) in its typescript file? Or is this is the good possible way to do this?
My list is like,
<div class="row">
<ul class="nav nav-tabs bg-white">
<li class="active"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
Thanks in advance!
I would do something like this
page.ts
//declare 3 variables
isT1Active:boolean = true;
isT2Active:boolean = false;
isT3Active:boolean = false;
...
activate(elem){
//deactivate all first
this.isT1Active = false;
this.isT2Active = false;
this.isT3Active = false;
switch(elem){
case 't1':{this.isT1Active = true;break;}
case 't2':{this.isT2Active = true;break;}
case 't3':{this.isT3Active = true;break;}
}
}
page.html
<div class="row">
<ul class="nav nav-tabs bg-white">
<li [ngClass]="{'active': isT1Active}" (click)="activate("t1")"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li [ngClass]="{'active': isT2Active}" (click)="activate("t2")" id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li [ngClass]="{'active': isT3Active}" (click)="activate("t3")" id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
And you can do same thing to the next button, In assume that each tab will have a next button
I would stay away from jQuery, but instead learn how to better use Angular to control the view. Basically, you want the active class in your template tab to be bound to your component selected model, so that when the selected model is updated, Angular will automatically apply the active class to the matching tab.
In your component, define the array that stores the tab info and define a selectedTab that refers to the specific tab that should be active:
export class AppComponent {
tabs = [
{id:'idBasicInfo', href:'...',label:'BasicInfo'},
{id:'idAddInfo', href:'...',label:'AdditionalInfo'},
{id:'idPlayerIdentity',href:'...',label:'PlayerIdentity'}
];
selectedTab = this.tabs[0]; // which is active by default
}
Then in your template, use these properties to drive the view:
<ul>
<li *ngFor="let t of tabs" [id]="t.id" [class.active]="t===selectedTab">
<a data-toggle="tab" [href]="t.href" (click)="selectedTab=t"> {t.label}} </a>
</li>
</ul>
When a tab is clicked, it will be made the selectedTab and its active class will be set.
I have an Angular5 application with a bootstrap tab control. I set the href of a tab to # if the property modelChanged is true, otherwise I set it to #tab1 (or #tab2):
<ul class="nav nav-tabs">
<li class="active">
<a (click)="changeTab()" [attr.href]="modelChanged ? '#':'#tab1'" data-toggle="tab">Tab 1</a>
</li>
<li>
<a (click)="changeTab()" [attr.href]="modelChanged ? '#':'#tab2'" data-toggle="tab">Tab 2</a>
</li>
</ul>
So basically I am able to change the tab if modelChanged is set to false, othwerise not.
Now I wan't to use a function called changeTab() where I change the modelChanged property to false and would expect that the tab change from 1 to 2 but it doesn't until I click the tab again:
changeTab() {
modelChanged = false;
}
Anyone knows a solution for that?
Sorry that I don't have a working plunker but I think some of you will be able to answer my question anyway.
2 ways to do the same
1) in your click specify modelChanged = !modelChanged,
[click]="modelChanged = !modelChanged"
2) [click]="modelChanged = changeTab()"
and in your controller specify the changeTab function like this
function changeTab(){
//do something
return false;
}
I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent 'OpenRecent' method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?
<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
<li>
<div>
<input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
checked: $root.ItemsSelected"/>
<a href="#"
data-bind="text: $data.Description + '-' + $data.County,
attr:
{
id: $data.TransId,
'data-title': $data.Description
},
click: $root.OpenRecent"
data-trigger="hover"
rel="popover"
data-html="true"
data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
<a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
<a data-bind='click: $parent.Email'>Email</a> |
<a data-bind='click: $parent.SaveToPDF'>PDF</a> |
<a data-bind='click: $parent.SavetToCSV'>CSV</a>">
</a>
</div>
</li>
</ul>
The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.
One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.
$("ul").on("click", ".print", function(event) {
var context = ko.contextFor(this);
context.$root.Print(context.$data);
event.preventDefault();
});
I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.
Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/