We Keep Coding

Angular7 component view collapsing on data manipulation

I am experiencing the strangest issue. I do have a component that's style is controlled by some object it's handling. As the object is manipulated (by some inner component click), the whole view collapses to a height of 0.
I have tried to apply the view changes via ngStyle, ngClass, plain ol'javascript - but nothing ever worked. Second strange thing - handling outer component's component styles is perfectly working.
Object
const valueMap = {
width: '100%',
...
}
Pseudo Component Tree
<component-a>
<component-b [ngStyle]="{'width': valueMap.width} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>
Method
changePosition() {
this.valueMap.width = this.valueMap.width==='100%' ? '50%' : '100%';
}
I would really expect the component-b to collapse to a width of 50%, but not having the height collapse to zero. I can see in the code, that as I click the button the style is applied to the element - and if in Chrome DevTools I deactivate the applied style and activate it again, it is showing properly. Never had something like this. Can someone please help?
Thanks in advance. André

I tried to recreate your problem. altough i couldnt get the error you seem to be having, i think i can see the issue at hand:
from your html
<component-a>
<component-b [ngStyle]="{width: 'valueMap.width'} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>
i could get, that your "valueMap" is an Input() within component-b.
so i did that on my end aswell and declared valuemap on the outermost component (the one using component a and b)
i recreated your html and found parsing errors and whatnot until i realized something:
<app-collapse-on-click>
<app-collapse-child [ngStyle]="{'width': valueMap.width, 'background-color': 'rebeccapurple'}" [valueMap]="valueMap">
<div><button (click)="changePosition()">Button</button></div>
</app-collapse-child>
</app-collapse-on-click>
when using ngStyle, the style is interpreted as an object. meaning, in your case you need to remove the ' arround valueMap.width and add them to width.
i added the background color to get a visual result other than just the style html.
hope that somehow helps.
regards
Alan

Making a button a clickable link (With a twist)

So I have a snippet that I'm using to build some buttons.
<font color=white><button class="button"><span>Register</span></button></font>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>
As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed
Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!
Any suggestions?

The purpose of a button is to either:
Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")
As you can see I have tried wrapping the whole thing in href
The HTML specification forbids that.
I have tried wrapping the span in href
The span appears to serve no purpose
Every button is a clickable but EVERY button simply links back to the page i'm currently working on
If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).
If you want a link then use a link and do not use a button.
If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.

The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.
The easiest way is to apply CSS and add the class to your span tags.
span.nonclickable {
pointer-events: none;
}
After that you can catch the button clicks.
A more detailed explanation can be found here: Use CSS to make a span not clickable
It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.

You could try this :
<input type="button" onclick="myF()" />
<script>
function myF() {
window.open('http://www.google.com', '_blank', 'resizable=yes');
}
</script>
Hope it helps

How to remove/hide bootstrap tooltip when element is removed from the DOM

I'm currently working on a project in ReactJS. Some of my components are not rendered all the time but change dynamically based on certain conditions. When these components have a tool tip attached to them, I'm noticing that if the tooltip was active when the element was hidden, the tooltip does not go away. I'm looking for a way to remove or at least hide this tooltip when the element is not being rendered.
This is how I'm activating the tooltips using jQuery:
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]', placement: 'bottom' })
})
This is how I'm using it within the html (or jsx):
<a className="icon-btn" onClick={ () => {
//on Click I remove this parent element and show something else
}}>
<i className="fa fa-lg fa-pencil-square" title="Edit" data-toggle="tooltip"></i>
</a>
Note I have not been able to select all elements by tooltip using:
$('[data-toggle=tooltip]').tooltip()
Apparently that is because I am adding elements dynamically? At least that is what my research so far shows

$('.tooltip').tooltip('hide');

I was having a similar problem and I know that the question is already a bit old but I post my solution, maybe it helps someone in the future... (It's an Angular-TypeScript-JQuery mixture but the principle is the same.)
In the component:
/* Toggles the Bootstrap 4 tooltip of an HTML element. */
private tooltip(elem: HTMLElement, action: string): void {
(<any>$(elem)).tooltip("dispose");
(<any>$(elem)).tooltip({ container: "body" });
(<any>$(elem)).tooltip(action);
(<any>$(elem)).tooltip("update");
}
In the view:
<someElement data-toggle="tooltip" title="..."
(mouseenter)="tooltip($event.target,'show')"
(mouseleave)="tooltip($event.target,'hide')">
</someElement>
So basically instead of using a global $('[data-toggle=tooltip]').tooltip() for activating all tooltips at once – which wouldn't work anyway if you have tooltips not being part of the DOM at the time this code is called because the page is generated dynamically by some JS framework for example – you only attach the tooltips to the elements when the cursor enters them, and destroy them immediately when it leaves.
(The { container: "body" } and "update" options are only to prevent positioning issues like this for more complex layouts.)

Though this is an older one, this may help someone in future...I encountered this issue in a Vue app and setting the tooltip to hover only did not solve the issue for me (I also wanted it to appear on focus for accessibility reasons). Ultimately, setting data-container to a parent element worked for me which then creates the tooltip inside this element (in my case, the entire parent element was being removed so the tooltip is then removed with it). Note, you may need to set data-boundary to "window" as well if you run into tooltip placement issues - this will ensure it will overflow the container. For example:
<button data-toggle="tooltip" data-placement="right" data-container=".container" data-boundary="window"></button>

None of the accepted answers seemed to resolve my issue, and would just leave the tooltip floating mid-page, and then upon scrolling, it would move to the top left of the page due to the absolute positioning. (I'm using Vue, and the element already had an #click event on it, so I added a parent wrapping div and applied an inline event there)
<div onclick="removeTT()">
<div data-toggle="tooltip" data-placement="top" title="Tooltip on top"></div>
</div>
<script>
function removeTT() {
$('.tooltip').tooltip('hide');
}
</script>

addThis button not clickable via jQuery

I've tried looking at the documentation for addThis and it seems like it's being updated or something because all the links these help posts link to don't even mention the API bits they describe.
Anyway,
I just need to be able to programmatically click an addThis button. However, I can't seem to do it via console before I implement it in my code.
I read that this has something to do with how the addThis listeners are added only when the document is done loading. This doesn't make sense to me because even if I manually try to trigger a click in console, it still does nothing but return the html of the link I'm trying to trigger. For example:
`$('.at-svc-facebook').click();`
OR `$('.at-svc-facebook').trigger('click');`
OR `$('.at-share-btn.at-svc-facebook').click();`
I mean, by the time I open console the dom is ready. So then what else might be preventing me from clicking these buttons via jQuery?
I've tried adding a listener to an element myself, and then clicking it programmatically, and it works. So something is different about the way addThis listens for a click. I may update this question with something I find after inspecting their js.
===================
This is what is in the DOM which addThis populates and listens to:
<div class="addthis_sharing_toolbox"></div>
This is what ^ that code is turned in to from addThis:
<div class="addthis_sharing_toolbox" data-url="http://localhost:8001/halloween/" data-title="33 Halloween Costume Ideas">
<div id="atstbx" class="at-share-tbx-element addthis_32x32_style addthis-smartlayers addthis-animated at4-show">
<a class="at-share-btn at-svc-facebook">
<span class="at4-icon aticon-facebook" title="Facebook"></span>
</a>
<a class="at-share-btn at-svc-twitter">
<span class="at4-icon aticon-twitter" title="Twitter"></span>
</a>
<a class="at-share-btn at-svc-google_plusone_share">
<span class="at4-icon aticon-google_plusone_share" title="Google+"></span>
</a>
</div>
</div>
Now, you can see the jQuery I'm using to click the buttons and the code it's trying to click.

The issue is that addThis was putting a second link with the exact same class in the DOM for some reason. It generates some HTML and appends it to body.
So what I needed to do to select the button and trigger a click was to specify the 2nd element in the array of elements and call click on that one. Like so:
$('.at-svc-facebook')[1].click();
Now, the next problem I face is chrome block a programatic popup, but that's beyond the scope of this question. :(

change the
var class_name = $(this)[0].className;
as below,
var class_name = $(this)[0].attr('class');
and it'll work. :)

Knockout: Unable to bind to a button's click event when using Bootstrap popover

I am having trouble with Knockout executing Javascript when a user clicks on a button. Unfortunately this is quite a complex page, and I cannot show the full content, but hopefully the small snippet below is enough.
I have tried to simplify this by not even calling the actual view model in the Knockout binding of data-bind, and instead I just simply alert.
<div data-bind="foreach: MyComputedStuff()">
...
<div class="popover-content">
<button onclick="alert('bar')">
This works!
</button>
<button data-bind="click: function(data, event){alert('foo')}">
THIS DOES NOT WORK
</button>
</div>
...
</div>
Is there something obvious that I am doing wrong here?
Why is it impossible for alert('foo') to be executed?
It might help to know that we use Bootstrap and this particular button is within a popover div.
Edit:
I see nothing in the console, and the rest of the page's Javascript continues to work as normal. I have tried this in Chrome and IE9.
I should have said that I am able to bind the click event on another element within the same foreach, to a function in the view model. This works, and this is what I expected to be able to duplicate. (If I replace the call to a function with alert('blah') then I see alert as expected here.) So why not on my button??
<a rel="tooltip"
title="Favourite App"
data-bind="click: function(data, event){$root.ToggleFavorite(data)}">

Thank you to haim770, Alexander, UweB and mhu for your help.
A colleague has pointed out the reason for Knockout not binding the click event: Bootstrap was modifying the DOM.
Through the use of the Knockout context debugger Chrome extention, my colleague pointed out that the div element that contained my buttons was not within an area where I had told Knockout to apply bindings to ... Bootstrap had moved it.
I was using the popovers feature of Bootstrap, and my button was within a popover that Bootstrap had moved out of the div that I was foreaching.