I am using a jQuery tool tip plug-in that requires the use of the jQuery clone function to populate an auto generated tooltip. For the project I am working on, I don't have controle over when the tooltip is initiated nor is there an available callback so I am using jQuery .on('mouseenter') to initialize my event.
Anything I put within the initialize function works, but my click event wont fire. From what I have read, if el is defined then standard events (click) should automatically be bound but that is not happening and as far as I can tell this should be working correctly.
javascript:
Lot = Backbone.View.extend({
initialize: function(){
this.wrapper = $(this.$el).find('.childDiv');
$(this.$el).css('background-color', 'blue');
console.log('init');
},
events: {
'click .showChild': 'showfunction'
},
showfunction:function(e){
this.wrapper.slideToggle('fast');
}
});
//gives the auto generated tooltip a class, otherwise it would be classless
$.balloon.defaults.classname = "balloon";
//tooltip needs content passed in, the tooltip creator recommends using clone
$('#showParent')
.balloon({contents: $('.tooltip-content').clone(), position: "bottom right" });
// this may look redundant, but I do not have access to the initialize function
$('#showParent').on('mouseenter', function() {
console.log('mouse enter');
lots = new Lot({el: $('.balloon .tooltip-content')});
});
HTML:
<button id="showParent">Hover</button>
<div id="wrapper">
<div class="parentDiv tooltip-content">
<h1> Some text to test parent</h1>
<button class="showChild">Click</button>
<div class="childDiv">
<h2> here is a child div</h2>
</div>
</div>
</div>
Here is a fiddle: http://jsfiddle.net/KFkjZ/
any insite as to why the events may not be binding is appreciated
It's because the balloon jquery plugin uses the clone and appends it to the body of the HTML when its first displayed. That breaks the event handler for your Lot view (as it means that the scope of the Backbone attached event handlers are no longer relevant).
One option which breaks the encapsulation would be to attach a document level event to handle the click in the way you want:
$(document).on('click', '.showChild', function (e) {
console.log('clicked');
$(this).slideToggle('fast');
});
Related
In the following code:
HTML
<div id="myView">
<button id="test_button">
Test Button
</button>
<ul id="output"></ul>
</div>
JavaScript
var myView = Backbone.View.extend({
initialize: function() {
// why doesn't this remove the previously delegated events?
this.undelegateEvents();
this.delegateEvents({
'click #test_button': 'buttonClicked'
});
},
// this event fires twice for one button click
buttonClicked: function() {
$("#output").append('<li>Button was clicked</li>');
}
});
$(document).ready(function(){
new myView({el: "#myView"});
// instantiate view again
new myView({el: "#myView"});
});
why does
this.undelegateEvents();
in the initialize() method of the Backbone View not remove the previously delegated events from the previous instantiation of the View?
JSFiddle example of above code: https://jsfiddle.net/billb123/o43zruea/28/
I'll try not to shout but please stop trying to bind views to existing elements. Let the view create and own its own el, then call view.remove() to kill it off before replacing it. This simple change solves so many problems with view events that you should always think twice (and twice more) if you don't do it this way.
In your case, you'd have HTML like this:
<script id="t" type="text/x-underscore">
<div id="myView">
<button id="test_button">
Test Button
</button>
</div>
</script>
<div id="container">
</div>
<ul id="output"> <!-- This is outside the container because we're going to empty and refill it -->
</ul>
And your JavaScript would look like this:
var myView = Backbone.View.extend({
events: {
'click #test_button': 'buttonClicked'
},
render: function() {
this.$el.html($('#t').html());
return this;
},
buttonClicked: function() {
$("#output").append('<li>Button was clicked</li>');
}
});
$(document).ready(function(){
var v = new myView();
$('#container').append(v.render().el);
v.remove(); // <----------------- Clean things up before adding a new one
v = new myView();
$('#container').append(v.render().el);
});
Points of interest:
Create the view then render it then put it on the page.
Call remove on the view when you're done with it.
The view goes inside the container. The caller owns the container, the view owns its el.
There are no delegateEvents or undelegateEvents calls anywhere. The presence of those almost always point to structural problems in your application IMO.
Each view is self contained: the outside world doesn't play with anything inside the view and the view keeps its hands to itself.
Updated fiddle: https://jsfiddle.net/bp8fqdgm/
But why didn't your attempted undelegateEvents do anything? undelegateEvents looks like this:
undelegateEvents: function() {
if (this.$el) this.$el.off('.delegateEvents' + this.cid);
return this;
},
The cid is unique per view instance so each view instance uses its own unique namespace for events that delegateEvents binds. That means that this:
this.undelegateEvents();
this.delegateEvents();
is saying:
Remove the events that this instance of the view has bound. These events will be found in the the '.delegateEvents' + this.cid namespace where cid is unique for each view instance.
Bind the events that this instance of the view defines (or the events in the delegateEvents call). These events will be attached using the '.delegateEvents' + this.cid namespace.
So your undelegateEvents call is removing events but not all of them, only the specific event bindings that that view instance adds are removed.
Your this.undelegateEvents() call doesn't actually accomplish anything because it is in the wrong place and called at the wrong time. If the new View caller did the undelegateEvents call:
var v = new myView({el: "#myView"});
v.undelegateEvents();
new myView({el: "#myView"});
then it would happen in the right place and at the right time. Of course this means that your router needs to keep track of the current view so that it can currentView.undelegateEvents() at the right time; but if you're doing that then you'd be better off (IMO) taking the approach I outlined at the top of the answer.
I don't use Angular regularly, but I understand that one of the key features is that when data is updated on a form element, it is automatically updated in the model.
If you are instead using a library like jQuery, you must manually attach an event to the form input that updates the model when it is changed, as in $('#myInput').on('change', updateModel);
Although the above handler will be fired when myInput is changed by the user, it will not be fired if myInput is changed by Javascript code such as $('#myInput').val('hello world');
My question is, how does Angular know when a form input is changed in Javascript code?
Angular applies a scope digest every time it's needed (by an Angular function) during which it checks the states of all the scope variables, including the models used, of course.
If you modify some of those variables manually, using JavaScript, jQuery, etc... Angular will not know that the changes have occured and you need to tell it so either by doing $scope.$apply() or by wrapping the code block in a $timeout callback (these are the most commonly used methods).
If you don't do it manually, you'd have to wait for some (if any) other Angular event to trigger the digest cycle, which is never good.
See this example, note how nothing happens when you just update the value, but you need to do it manually (ng-click does it) in order for DOM to update:
angular.module('app', [])
.controller('Ctrl', function($scope){
$scope.ourValue = 'Initial Value';
window.exposedFunc = function(v, digest) {
$scope.ourValue = v;
if (digest) {
$scope.$apply();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<button onclick="exposedFunc('First Button Value')">Update Value - No Digest</button>
<button onclick="exposedFunc('Second Button Value', true)">Update Value - Force Digest</button>
<button ng-click="">Force Digest only</button>
<p>{{ourValue}}</p>
</div>
Here's a super simple example of binding using keyup event. It should be enough to get you started on your projects:
var res = document.getElementById('r');
function handleChange(v) {
res.textContent = v;
}
<input onkeyup="handleChange(this.value)" type="text" value="Initial value" />
<p id="r">No binding yet</p>
I've been looking around and trying out different things but can't figure it out. Is it possible to hide an angular-ui tooltip with a certain event?
What I want to do is to show a tooltip when someone hovers over a div and close it when a users clicks on it because I will show another popup. I tried it with custom trigger events but can't seem to get it working. I made this:
<div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites" tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>
var app = angular.module('someApp', ['ui.bootstrap']);
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'hideonclick': 'click'
});
}]);
app.controller('MainCtrl', function ($scope) {
$scope.showTooltip = true;
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.showTooltip = false;
};
})
http://jsfiddle.net/3ywMd/
The tooltip has to close on first click and not the 2nd. Any idea how to close the tooltip if user clicks on div?
I tried #shidhin-cr's suggestion of setting $scope.tt_isOpen = false but it had the rather significant issue that, while the tooltip does fade out, it is still present in the DOM (and handling pointer events!). So even though they can't see it, the tooltip can prevent users from interacting with content that was previously behind the tooltip.
A better way that I found was to simply trigger the event used as tooltip-trigger on the tooltip target. So, for example, if you've got a button that's a tooltip target, and triggers on click...
<button id="myButton"
tooltip="hi"
tooltip-trigger="click">
</button>
Then in your JavaScript, at any point, you can trigger the 'click' event to dismiss your tooltip. Make sure that the tooltip is actually open before you trigger the event.
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
angular.element('#myButton').trigger('click');
}
Since this triggers the actual internals of AngularUI's Tooltip directive, you don't have the nasty side-effects of the previous solution.
Basically you cannot play with the tooltip-trigger to make this work. After digging through the ToolTip directive code, I found that the ToolTip attribute exposes a scope attribute called tt_isOpen.
So in your ng-click function, if you set this attribute to false, that will make the tooltip hide.
See the updated demo here
http://jsfiddle.net/3ywMd/10/
Like this
app.controller('MainCtrl', function ($scope) {
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.tt_isOpen = false;
};
})
Michael's solution got me 90% of the way there but when I executed the code, angular responded with "$digest already in progress". I simply wrapped the trigger in a timeout. Probably not the best solution, but required minimal code
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
$timeout( function(){
angular.element('#myButton').trigger('click');
}, 100);
}
For future reference, the accepted answer angular.element('.yourTooltip').scope().tt_isOpen will not work in new versions as tooltip has been made unobservable. Therefore, the entire tootlip is removed from DOM. Simple solution is to just check if tooltip is present in DOM or not.
Borrowing from #liteflier's answer,
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('.yourTooltip').length) { //if element is present in DOM
setTimeout( function(){
//Trigger click on tooltip container
angular.element('.yourTooltipParent').trigger('click');
}, 100);
}
I've been unable to figure out how to manually fire DOM events.
Here, for example, is my attempt to fire the "click" event for a li
Ext.DomQuery.select('#mapRoutesPanel ol li:nth-child('+(index+1)+')')[0].click();
It's working fine on google chrome, but when i build android native app of same application it gives me error
Uncaught TypeError: Object #<HTMLLIElement> has no method 'click'
Ext JS provides its methods for search elements in DOM tree.
Look Sencha Fiddle - its sencha touch app, i tested it on my android(opera) and iphone(safari) its work for me
Something like this:
var liElement = Ext.get('mapRoutesPanel').down('ol li:nth-child(' + (index + 1) + ')');
Have you tried
Ext.dom.Element-method-fireEvent?
Ext.DomQuery.select('#mapRoutesPanel ol li:nth-child('+(index+1)+')')[0].fireEvent('click')
Not all touch device browsers/apps support the click event because it is a mouse event. Why don't you try using Sencha's normalized event system to bind a click handler to the component, you can then check if the <li/> was clicked inside the component's click event handler.
Sencha has already done the work for us so we can handle clicks & taps in the same manner, so take advantage of it.
Btw, event delegation from a parent element is usually more performant than binding event handlers to a bunch of different DOM elements. It looks like your binding events to elements in a loop, this is a bad practice. I just wanted to point that out too.
Here is a code example:
var cmp = Ext.getCmp('someComponentId');
cmp.on('click', function(me, event) {
if (event.currentTarget.tagName == "LI") {
// do something since the <li/> tag was clicked.
// event.currentTarget will be the <li/> DOM element,
// feel free to do with it as you please :)
}
}
I did as below in my case.
Below is the sample html code of div with li s.
<div class="menu1" id="menu1">
<ul>
<li id="students_tab">Students</li>
<li id="emps_tab">Employees</li>
</ul>
</div>
And below is the extjs code to add click event to li element.
<script type="text/javascript">
Ext.onReady(function(){
var tabs= Ext.query("li", "menu1");
Ext.each(tabs, function(item){
var el = Ext.get(item);
el.on("click", function(){
var tabName = this.id.substr(0, this.id.indexOf("_"));
alert("U have clicked on "+ tabName + " tab");
});
});
});
</script>
For some reason I don't know why my event in a Backbone View doesn't work.
I tried to Google for some answer but I didn't find anything that would help me.
Basically, my code is this:
Backbone:
var ViniView = Backbone.View.extend({
el: $('.container'),
events: {
"click .clickme" : "render"
},
render: function() {
alert("please, work");
}
});
new ViniView;
HTML
<div class="container">
<button class="clickme">
test
</button>
</div>
Your example works fine for me in this fiddle.
As explunit noted, though, your el should reference an element and should not be a jQuery object. $el takes care of that. According to the docs:
All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not.
Check that you're correctly loading the Jquery, Underscore and Backbone scripts (in that order). Also make sure you're script is being executed once the page is ready and not, say, before your DOM has finished loading (causing your view to not attach to anything).