I'm using angular2 and bootstrap4. Popover correctly renders raw html as bold text asdf
<img src="assets/images/1.jpg"
data-container="body" data-toggle="popover" data-html="true" data-placement="top"
[attr.data-content]="getM()"/>
However, tooltip renders as plain <b>asdf</b> text including tags
<img src="assets/images/2.jpg"
data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
[attr.title]="getM()"/>
Component method getM:
public getM(): string {
return '<b>asdf</b>';
}
Both tooltip and popover are initialized the same way
$(function () {
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
$('[data-toggle="popover"]').popover({container: 'body'});
})
Could someone explain why is that and how to solve? It seems this is connected with initialization order, but I just don't know where to look further.
Well, the issue was that my element (which tooltip was attached to) was created dynamically.
In exact, I had a 1 sec delayed service. When new data arrived, the <img> element in my component was recreated, but $('[data-toggle="tooltip"]') selector doesn't work with dynamic elements.
Instead, I had to use this selector
$("body").tooltip({selector: '[data-toggle="tooltip"]'});
Now it works as intended.
PS I'm not a front-end developer, so anyone who can explain it in better terms is welcome.
Related
I have an app that is using ngx-bootstrap to show a tooltip on mouseover. I want to test that the content, which is dynamically added, shows properly. In order to do this I have a test that looks like this:
it(shows the right tooltip', fakeAsync(() => {
fixture.debugElement.query(By.directive(TooltipDirective))
.triggerEventHandler('mouseover', null);
tick();
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.tooltip-inner')).nativeElement)
.toBe('the tooltip text');
}
This results in an error that indicates that fixture.debugElement.query(By.css('.tooltip-inner')): "Cannot read property 'nativeElement' of null"
If I print out the content of fixture.debugElement.nativeElement I get this:
<div id="root1" ng-version="5.2.9">
<my-component>
<div ng-reflect-tooltip="the tooltip text">
<img src="images/test.png">
</div>
<bs-tooltip-container role="tooltip" class="tooltip in tooltip-right">
<div class="tooltip-arrow arrow"></div>
<div class="tooltip-inner">the tooltip text</div>
</bs-tooltip-container>
<my-component>
</div>
The important take away is that the html exists - it is just not accessible by the DebugElement.query.
My current solution to get the spec passing is to change the expect to:
expect(fixture.debugElement.nativeElement.textContent.trim())
.toBe('the tooltip text');
This works, but it is a hack that will fall to pieces if I run into a similar situation with multiple tooltips (for example). Has anyone been able to handle this in a better way? Am I not setting this spec up correctly?
I'm using data-menu-top on this page because everything is fixed and uses Skrollr to animate the different sections into view. The reason everything is fixed is so that I could do full-page SVGs that cover the height of the page (if you think there's a better way to do this, I would love to be enlightened).
Here's a link to the project development page: http://pman.mindevo.com
The button that appears on the first section has data-menu-top="10300", and this works great on Chrome, but when I try to view it in Firefox (33.0) the link doesn't do anything at all.
I am initializing using this code:
<script type="text/javascript">
setTimeout(function() {
var s = skrollr.init({
});
skrollr.menu.init(s, {
easing: 'quadratic',
duration: function(currentTop, targetTop) {
return 1500;
}
});
}, 1000);
</script>
Am I properly using data-menu-top? Is this a bug I'm not aware of using fixed layouts that are hidden using height?
Do I need to change the layout somehow to accomplish what I want and have it work in Firefox?
So the problem with Firefox was the way that it handles <button> linking. Here's the way the button was in the HTML:
<button class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</button>
In Firefox it wasn't doing anything upon clicking, and got me thinking perhaps I'm using "button" HTML element incorrectly. Anyways, changing it to a div like so:
<div class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</div>
That allowed Firefox to utilize Skrollr-menu to scroll to where I needed it to.
There might be a better way to do the layout on this, I'm still experimenting.
I can easily show a loading message while the activate method is doing its thing like so:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
However if I then update my ActiveVm property with a different viewmodel, the splash content does not show. I understand that the splash content is only designed to show on 'initial' load, but what options do I have for displaying such a message when transitioning from one viewmodel to another?
Note that this composition does not participate in routing...
Update: Related durandal issue here which might be of value to future visitors: https://github.com/BlueSpire/Durandal/issues/414
This begs for a comment of 'what have you tried?' but given that I could see the benefit of this for future users I wanted to throw in my $0.02 -
The splash displays on your screen until Durandal loads up the application and replaces the div with id="applicationHost" 's content with the shell view and the subsequent views that are loaded. If you wanted to make this a re-usable component one thing that you could do is to take that Html.Partial view that is being loaded and create your own view inside of your app folder in your Durandal project.
For example you would create a new HTML view inside of your app folder -
splashpage.html
<div class="splash">
<div class="message">
My app
</div>
<i class="icon-spinner icon-2x icon-spin active"></i>
</div>
And then compose it from your shell -
<div data-bind="if: showSplash">
<!-- ko compose: 'splashpage.html' -->
<!-- /ko -->
</div>
And in your view model you would toggle the observable showSplash whenever you want to show / hide it -
var showSplash = ko.observable(false);
var shell = {
showSplash: showSplash
};
return shell;
And you could call that from your activate methods inside your other view models like this -
define(['shell'], function (shell) {
function activate() {
shell.showSplash(true);
// do something
shell.showSplash(false);
}
});
This sounds to me like a scenario where a custom transition may be useful. When the composition mechanism switches nodes in and out of the DOM, it can use a transition.
This page, under Additional Settings>Transition (about halfway down) describes a custom transition: http://durandaljs.com/documentation/Using-Composition/
I've got a very simple function, of replacing the innerHTML of a element. I've been trying to debug this for hours but simply can't, and it's infuriating.
When called from a button press the JavaScript (as follows) works well, but when called from another function it doesn't work. I am totally lost as to why this might be, and its a fairly core part of my app
// This loaded function in my actual code is a document listener
// checking for when Cordova is loaded which then calls the loaded function
loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
Button press and HTML to replace
<div id="main">
<input type='button' onclick='changeText()' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
It is also here in full on JSFiddle
You are already changed the innerHTML by calling the function loaded(); on onLoad.
Put this in an empty file and same as .html and open with browser and try. I have commented the function loaded();. Now it will be changed in onclick.
<div id="main">
<input type='button' onclick='changeText();' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
<script>
//loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
The problem here is, that the element you're trying to manipulate is not yet existing when you are calling the changeText() function.
To ensure that the code is only executed after the page has finished loading (and all elements are in place) you can use the onload handler on the body element like this:
<body onload="loaded();">
Additionally you should know, that it's very bad practice to manipulate values by using the innerHTML property. The correct way is to use DOM Manipulations, maybe this can help you.
You script loads before the element (boldStuff) is loaded,
Test Link - 1 - Put the js in a seperate file
Test Link - 2 - put the js at the very end, before closing the <body>
I am trying to extend dijit.form.Button with an extra attribute but this is not working.Code is given below
In file1.js
dojo.require('dijit.form.Button');
dojo.extend(dijit.form.Button,{xyz: ''});
In file2.jsp
<script type="text/javascript" src="file1.js"></script>
<div dojoType="dijit.form.Button" xyz="abc"></div>
However when I look at the HTML of the created button (In chrome seen by right click and then selecting 'inspect element' option), it doesn't show xyz attribute.
You need to keep in mind that there's a distinction between the widget object and its HTML representation. When you extend dijit.form.Button, the xyz attribute is added to the widget class, but not automatically to the HTML that the widget will render. So in your case, if you do
console.debug(dijit.byId("yourWidgetId").get("xyz"));
.. you'll see that the button object does have the xyz member, but the HTML (like you point out) does not.
If you also want it do be visible in the HTML, you have to manually add it to the HTML rendering of the button. One way to do that is to subclass dijit.form.Button and override the buildRendering method.
dojo.declare("my.Button", dijit.form.Button, {
xyz: '',
buildRendering: function() {
this.inherited(arguments);
this.domNode.setAttribute("xyz", this.xyz);
}
});
If you add an instance of your new Button class in the HTML, like so:
<div dojoType="my.Button" xyz="foobar" id="mybtn"></div>
.. then the HTML representation (after Dojo has parsed it and made it into a nice looking widget) will contain the xyz attribute. Probably something like this:
<span class="..." xyz="foobar" dir="ltr" widgetid="mybtn">
<span class="..." dojoattachevent="ondijitclick:_onButtonClick">
<input class="dijitOffScreen" type="button" dojoattachpoint="valueNode" ...>
</span>