Access DOM installed library in Vue3.js - javascript

i using intl-tel-input library in Vue3js project.
It has ( unofficial ) select input ( created by div and javascript ) like this :
select option are li.iti__country and
I want call function after click event on them
in vanilla usually i use
document.querySelector(".iti__country").addEventListener("click", doSomeThing);
but in Vue3 I can't do this.
what's best soloution

Related

Fullcalendar v5 eventContent not working with angular js

I'm using Fullcalendar v5 in angular js, and i'm trying to make a custom event with:
https://fullcalendar.io/docs/content-injection
eventContent: function(arg) {
return { html: constructEvent(arg) }
},
The thing is that if i add:
"<div ng-repeat='user in arg.event._def.extendedProps.users' class='avatar'>"
"<p>{{ user.name }}</p>"
"</div>"
it won't render. It's like it's outside angular's scope. Can someone tell me if there is a way to construct this with angular js logic? Or i need to use vanilla js to iterate through items. Also ng-click doens't work. I tried even with triggering safeApply digest but no results.
I just want to edit the event inside calendar with the framework i'm using, and use angular events inside it to open sidebars or to make api calls.
Rendering Events
with your line <div ng-repeat it seems that you'd like to iterate through an array of events to display on your screen. If this is the case, you simply need to render the events via the 'events' parameter.
https://fullcalendar.io/docs/event-object
Regarding eventContent (the contents of an event, such as title, subtitle, img, etc)
It looks like at the minute only React JSX Nodes are supported. Vanilla JS is your only way forward.
https://fullcalendar.io/docs/content-injection

Thingsboard Widgets Library Javascript not working

I'm trying to make a custom widget on Thingsboard that would change the text when it's pressed. Like this:
Custom Widget creation
But it's not working at all. What am I doing wrong?
Did you read the official widgets development guide?
There are some examples that use click-events
https://thingsboard.io/docs/user-guide/contribution/widgets-development/#static-widget
Thingsboard uses AngularJS, so you can bind click-handlers to elements with the ng-click attribute like this:
<p id="text" ng-click="changeText()">Text</p>
To make this work you will need to create that click-handler in the widget's scope. The perfect place to do this is the onInit() method of the widget.
self.onInit = function() {
self.ctx.$scope.changeText = function() {
// change your text here
};
};

Add dynamic HTML from JavaScript in Angular 2/4/5 and bind events

I am trying to add new HTML code via AJAX to an Angular 5 app and add click event to the elements. But the click event doesn't work as expected, I can't use the 2 way data-binding way because I am using the jQuery data-tables plugins and he add the HTML to the Dom and not the angular template.
I have tried:
<button (click)='myClassFunction()'>Click!</button> this line does nothing
<button onclick='myClassFunction()'>Click!</button> this line said myClassFunction is undefined
<button onclick='this.myClassFunction()'>Click!</button> this line said myClassFunction is undefined
How can I bind this click event to my function?
Angular is written in Typescript.
When you serve or build your application, this typescript application is then compiled, minified and uglified to native Javascript.
This means that your
(click)="myClassFunction()"
Will become something along the lines of
onclick="srgu.gferu()"
And as you can see, Angular won't recognize that.
It doesn't matter if you use JQuery or plugins : that is the way Angular works.
To do that, you will need to create window functions, or global functions.
myClassFunction() {
// Create your window function, make it tslint compliant
window['myWindowClassFunction'] = () => {
// Your function's logic here
};
}
Now, in your appended HTML, you need to write
<button onclick='window.myWindowClassFunction()'>Click!</button>

Javascript retrieve what in the tag using class attribute

im working on a Asp.net MVc application to create a scheduler application for workers.
The schedule is auto-generate using a JavaScript library called: Dhtmlx Scheduler.
upon populating the data, it creates some Html and places the content.
I would like to retrieve the content and was wondering if it's possible by obtaining the info from its class.
Pic for reference:
I am trying to retrieve the "Abel Toribio" so i can do a reverse search in my database for his name and eventually display a tooltip over that td with further information about the person.
So far I have tried:
var engName = document.getElementsByClassName("dhx_matrix_scell");
alert(engName[0].getData());
alert(engName[0].getContent());
alert(engName[0].getText());
alert(engName[0].getValue());
They all seem to give me undefined.
Thanks!
engName[0].innerHTML - for contents inside the tag 'html'.
engName[0].outerHTML - for contents inside the tag wrapped in the tag.
engName[0].textContent - for contents inside the tag 'text'.
As you tagged jquery as well,for tooltip purpose, you can write mouseover event using jquery this way :
$(".dhx_matrix_scell").on("mouseover",function(){
alert($(this).text());
// do something here
});
if you want to get all, you can get them like this:
$.each(".dhx_matrix_scell",function(){
alert($(this).text());
});

Dojo hiding and showing div using Attach points

I have a loader div defined as say for simplicity
<div dojoAttachpoint="loaderDiv" style="display:none;">.....</div>
Now when i have a function that is called i want this div to be shown, how do i do that ?
dojoAttachPoints are used in widget templates. So in your widget you simply refer to the node like this.loaderDiv
dojo.style(this.loaderDiv, 'display', '');
If this code is not in a widget, then you should be using id.
<div id="loaderDiv" style="display:none;">.....</div>
dojo.style(dojo.byId('loaderDiv'), 'display', '');
I would also recommend taking a look at the dojox.widget.StandBy.
In progress wheel in Dojo
Since you mention this is in a custom widget you wrote, the suggested way of doing this is to expose a function from your widget that does this
You can access the loaderDiv in that function by using this.loaderDiv as Craig mentioned
It is not advised to access the loaderDiv directly from outside the widget since it is encapsulated in the widget rendering

Categories