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
Related
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
};
};
I use materialbox (jQuery plugin to display Material Design lightbox style) when a new photo was taken from mobile end added to a dynamic list.
When photo is ready and visible in the DOM, a template event starts:
Template.item.events({
'click .materialboxed':function(e,t){
setTimeout(function(){
$('.materialboxed').materialbox();
},0)
}
});
the DOM:
<div class="col s2" style="text-align:left;">
{{#if pictureExist}}
<img src="{{picture}}" alt="" class="responsive-img materialboxed"> <!-- notice the "circle" class -->
{{else}}
<div class="takePicture"><i class="mdi-image-photo-camera small"></i></div>
{{/if}}
</div>
Is there a best Meteor way instead setTimeout to instantiate jQuery code in reactive data?
Thanks
Try removing the timer.
Template.item.events({
'click .materialboxed':function(e,t){
$('.materialboxed').materialbox();
}
});
It should work.
I think what you have is perfectly fine in the Meteor world.
Since you do not want to instantiate anything when the Template is created, and you are not looking to track the state of the Template, then registering an event to call that bit of jQuery code seems like the straightforward way of going about it.
EDIT: Looked at your response to another answer, here is what you need:
Template.item.rendered = function () {
# this.$() will only look for elements inside this template
this.$('.materialboxed').materialbox();
};
To optimize your implementation a bit, we only initiate your jQuery plugin on the element that is clicked on. Instead of initializing it onto every element with a .materialboxed class each time an item template is rendered.
The template.$() function works exactly like jQuery but only finds elements within the template. I am not sure how this function works with jQuery plugins, but you could first return the exact element using this function, save it, and then convert it to a jQuery object manually.
More info on this here:
http://docs.meteor.com/#/basic/Blaze-TemplateInstance-findAll
I'm working on a project and I am attempting to create a modal dialog "pop-up" to capture data in a form. I haven't worked with jQuery UI's Dialog widget previously, but I've worked with others and it seemed straight forward.
I created the following very simple code snippet to test as I went along:
<div class="app-email">
<div>
<a href="#"
class="app-email-opener">
Click to add or edit your e-mail settings.
</a>
</div>
<div class="app-email-modal">
Oh, Hai.
</div>
</div>
$('.content').on({
click: function () {
console.log('I was totes clicked.');
var parent = $(this).parents('.app-email');
console.log(parent);
var target = parent.find('.app-email-modal');
console.log(target);
$(target).dialog('open');
}
}, '.app-email-opener');
$('.app-email-modal').dialog({
autoOpen: false,
modal: true,
show: false
});
For reference: the class 'content' is a higher level block to catch delegated events without having to go all the way up the DOM.
The issue I'm running into is that the div with class="app-email-modal" seems to flash onto the page and then disappear from the DOM completely. jQuery, therefore, isn't able to find it and do anything because at that point it simply doesn't exist.
The overall project is in ASP.NET MVC 4, using Visual Studio 2013.
Any information would be greatly appreciated.
So, finally discovered what's happening via this previously answered question:
Jquery Dialog - div disappears after initialization
//EDIT
For any possible future usefuless -
What was happening was that jQuery UI will move any DOM elements specified as Dialogs to the bottom of the page, rather than keep them in the location specified in the HTML markup. So, in my case, I was looking for things by class, but only within the scope of the app-email-openers parent app-email div.
To remedy this, I used templating (in my case, Razor) to add unique ids to each app-email-modal div, and added a data- attribute to associate the link with the specific unique id. This way they jQuery UI can move the elements as it sees fit, but there still easily accessible.
//END EDIT
I feel like that functionality should be better spelled out in the documentation. Even their own example doesn't operate like this.
Corollary: I attempted to use the appendTo option to have the DOM elements not be shifted to the bottom of the page, but they're still moved to the bottom. So, there's that.
I'm really new to Angular, but learning quickly. However, the one problem that I haven't been able to find an answer for yet is how I can pass around HTML snippets with bindings attached.
e.g. With jQuery I could do something like
var $div = $('<div id="test"><button>CLICK ME!</button></div>');
$div.delegate('button', 'click', function () { alert('CLICKED') });
Then I could pass around this $div variable to other objects. For instance I would use this pattern to separate page specific content from the code of a modal Singleton that encapsulated general functionality.
e.g.
var name = "The Dude";
var $div = $('<div id="test"><button>CLICK ME!</button></div>');
$div.delegate('button', 'click', function () { alert('Hi, ' + name) });
Modal.open({ content: $div});
How can I achieve something similar with Angular?
You should not pass around template code in the controllers, that's not the "angular way". If you have to do DOM manipulation it should stay in a directive. A lot of jQuery developers fall into this trap of thinking like you do with jQuery. But anyways here's how I would solve this problem:
I'm writing this in a directive so it's more modular. You could move this into a controller and it'll work just fine.
Code in plnkr here
In the directive you have a template which contains your code and you can have a ng-click binding which can control a click action to open the modal.
Now as far as the content in the modal is concerned, making the actual template code modular so you can decouple the content from the template depends on if/what angular plugins you're using. They all do something similar but the names may be a little different. For example, if you're using ui-bootstrap(which is awesome by the way, if you dont use any plugins I'd highly recommend it) there's a resolve function that takes a variable as an argument and you can display that in the view. That's exactly what you want to send custom content to the modal(eg. name)
I have this AngularJS app. Everything works just fine.
Now I need to show different pop-ups when specific conditions become true, and I was wondering what would be the best way to proceed.
Currently I’m evaluating two options, but I’m absolutely open to other options.
Option 1
I could create the new HTML element for the pop-up, and append to the DOM directly from the controller.
This will break the MVC design pattern. I’m not happy with this solution.
Option 2
I could always insert the code for all the pop-ups in the static HTML file. Then, using ngShow, I can hide / show only the correct pop-up.
This option is not really scalable.
So I’m pretty sure there has to be a better way to achieve what I want.
Based on my experience with AngularJS modals so far I believe that the most elegant approach is a dedicated service to which we can provide a partial (HTML) template to be displayed in a modal.
When we think about it modals are kind of AngularJS routes but just displayed in modal popup.
The AngularUI bootstrap project (http://angular-ui.github.com/bootstrap/) has an excellent $modal service (used to be called $dialog prior to version 0.6.0) that is an implementation of a service to display partial's content as a modal popup.
It's funny because I'm learning Angular myself and was watching some video's from their channel on Youtube.
The speaker mentions your exact problem in this video https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 around the 28:30 minute mark.
It comes down to placing that particular piece of code in a service rather then a controller.
My guess would be to inject new popup elements into the DOM and handle them separate instead of showing and hiding the same element. This way you can have multiple popups.
The whole video is very interesting to watch as well :-)
Create a 'popup' directive and apply it to the container of the popup content
In the directive, wrap the content in a absolute position div along with the mask div below it.
It is OK to move the 2 divs in the DOM tree as needed from within the directive. Any UI code is OK in the directives, including the code to position the popup in center of screen.
Create and bind a boolean flag to controller. This flag will control visibility.
Create scope variables that bond to OK / Cancel functions etc.
Editing to add a high level example (non functional)
<div id='popup1-content' popup='showPopup1'>
....
....
</div>
<div id='popup2-content' popup='showPopup2'>
....
....
</div>
.directive('popup', function() {
var p = {
link : function(scope, iElement, iAttrs){
//code to wrap the div (iElement) with a abs pos div (parentDiv)
// code to add a mask layer div behind
// if the parent is already there, then skip adding it again.
//use jquery ui to make it dragable etc.
scope.watch(showPopup, function(newVal, oldVal){
if(newVal === true){
$(parentDiv).show();
}
else{
$(parentDiv).hide();
}
});
}
}
return p;
});
See
http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/
for a simple way of doing modal dialog with Angular and without needing bootstrap
Edit: I've since been using ng-dialog from http://likeastore.github.io/ngDialog which is flexible and doesn't have any dependencies.
Angular-ui comes with dialog directive.Use it and set templateurl to whatever page you want to include.That is the most elegant way and i have used it in my project as well.
You can pass several other parameters for dialog as per need.