I'm trying to integrate qTip2 to show tooltips on mouse events for elements in a Cytoscape graph. I'm using this example. However, in my testing, the attempt to call qtip() on the selected element object fails, and IE for example says object doesn't support property or method qtip. I am sure the selector is working, since I can get at all of the element's properties.
What am I missing? Any insight is appreciated. Thanks!
Code:
cy.getElementById("n1").qtip({
content: {
text: 'My tooltip text'
}
});
I found the issue, which is that there is a separate extension for qTip in this case, which I didn't see from looking at the JS Bin example. You can get the extension here.
Related
The basic example of snackbar for Material Design Components for Web doesn't work. It produces the error:
```
TypeError: snackbar.show is not a function
```
I have tried using jQuery to make sure the DOM loaded properly. I have tried changing back and forth the javascript initialisation methods, but none seems to work.
You can find the code here: https://jsbin.com/mejefeq/edit?html,console,output
I have read the docs over and overs again, but none of it mentioned anything about this. Since this MDC for Web is not at all popular, I have nowhere left to go for help.
Yeah that was a breaking change in the 0.43.0 update. The new way of showing the snackbar is by using
snackbar.open();
This however will just open the snackbar. If you want to change the text in the snackbar you can use:
snackbar.labelText = 'Your new text';
So together you can use them:
snackbar.labelText = 'Your new text';
snackbar.open();
You can check out more of the documentation here, with the current javascript properties and events here
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)
I'm trying to run the line of code below in my script, but I get an error saying that more than one object with these properties was found on the page.
Browser("browser").Page("page").WebElement("css:=.normalDayOfMonth").Click
So, I tried adding an index, as shown below:
Browser("browser").Page("page").WebElement("css:=.normalDayOfMonth", "index:=0").Click
But now it's not detecting any object at all. Could anyone help me out with this? Thanks!
Edit: For anyone else who comes across this, it turned out I was using QTP10 and as Motti pointed out below, CSS and Xpath support was only added in QTP11.
The support for using CSS and XPath to identify test objects was added in QTP11, in your comments you say that you're using QTP10 which would explain why you're facing problems...
What's probably happening is that QTP is ignoring css as an unrecognizd property so your description matches all elements and then when you add index:=0 it brings one of the invisible elements (e.g HEAD or HTML) which can't be clicked.
If all you're trying to do is match the className you can use QTP's class identification property ("class:=normalDayOfMonth").
BTW the Highlight function is an undocumented function similar to the object repository's highlight functionality and can be very useful in troubleshooting tests.
This took me a while. A long while. I battled two problems at once (circular dependencies, fixed with refactoring, and this problem). To get this problem into a JSFiddle required a LOT of work... but I think it was worth it.
So:
http://jsfiddle.net/EVbTL/3/
I define three widgets:
r.AppMainScreen -- This is the main app's widget. Easy: just a bunch of tabs, and a button which contains a simple button, which goes:
// SUbmit form
this.form.onSubmit = function(e){
e.preventDefault();
console.log("HERE");
dialog = new r.RetypePasswordDialog();
dialog.show();
return false;
}
Pretty uninteresting.
r.RetypePasswordDialog() -- A templated widget which represents a dialog box. The only interesting thing about it is:
< input name="password" id="${id}_password" data-dojo-attach-point="password" data-dojo-type="app.ValidationPassword" />
It's a simple custom widget, defined in this very file, which does validation. NOTE: I know there is no point in having a subclass here for this little work. Please keep in mind that this is an example.
r.ValidationPassword()
An augmented ValidationTextBox with some extra validation.
If you click on the button, you get:
Uncaught Error: Could not load class 'app.ValidationPassword
...?!? app.ValidationPassword has definitely been defined. It ought to be available there. At the beginning, I thought it was because of aa circular dependency (it was very fun, yesterday: I had to learn about AMD circular dependencies WHILE trying to figure out this problem...)
If you uncomment this line, executed within the script:
TEST = new r.RetypePasswordDialog();
The whole thing works. It's a meaningless instance, and I cannot figure out why on earth this would or should make a difference.
Explanations most welcome... I couldn't find any!
Thank you,
Merc.
app = new r.AppMainScreen( {});
You redefine the global app variable here, but are trying to use it elsewhere as the base object for your type system. Use var to scope variables to the function.
I am new to the Dojo Toolkit. I'm getting the error
Tried to register widget with id=myButton but that id is already registered
whenever I try to load dojo content twice (meaning I load HTML content through jQuery.Load into a container div). Is there a way of unregistering already registered widgets in dojo? I've seen some examples, but I don't really get them working.
My button:
<button dojoType="dijit.form.Button" id="myButton">button</button>
If you're looking to unregister specific widgets, you can use their destroy() or destroyRecursive() methods. The second one destroys any widgets inside the one you are destroying (i.e. calling destroyRecursive on a form widget will also destroy all the form components).
In your case, it sounds like your best bet would be to do this before jQuery.load -
var widgets = dijit.findWidgets(<containerDiv>);
dojo.forEach(widgets, function(w) {
w.destroyRecursive(true);
});
The above code will unregister all widgets in <containerDiv>, and preserve their associated DOM Nodes. To destroy the DOM nodes, pass false to destroyRecursive instead.
Reference:
http://dojotoolkit.org/api/1.3/dijit/_Widget/destroyRecursive
Based on http://bugs.dojotoolkit.org/ticket/5438, I found a sufficient way of destroying dojo-widgets:
dijit.registry.forEach(function(w){
w.destroy();
});
This worked for me:
dijit.byId( 'myButton' ).destroy( true );
I think you would be better off removing the id from your button and accessing it using an attach point. You would basically do <button dojoType="dijit.form.Button" data-dojo-attach-point="myButton">button</button>
then in your code you would access it like this.myButton.... however im not sure which version of dojo you are using. This will fix any id issues since dojo will assign a unique id to it automatically.