I disabled the div by using following code
$("#menuDiv1").children().bind('click', function(){
return false;
});
menuDiv contains
<ul>
<li><a class="home" href="#/Dashboard">Dashboard</a></li>
<li><a class="forms" href="#/ViewLeads">Lead</a></li>
<li><a class="forms" href="#/ViewCases/0">Cases</a></li>
</ul>
but now I want to enable it again. How can I do that?
And is there any other solution for the same in angular js?
you can use unbind to remove disable click event
$("#menuDiv1").children().unbind('click');
To re enable click event use below code.
function clickfunc(){
// your code
}
$("#menuDiv1").children().bind('click',clickfunc);
Second option
you can use off to remove disable click event
$("#menuDiv1").children().off('click');
To re enable click event use below code.
function clickfunc(){
// your code
}
$("#menuDiv1").children().on('click',clickfunc);
EDIT as discussed below code is avoid click event on a,button tags.
DEMO
function clickfunc(event){
if(event.target.nodeName === 'A' || event.target.nodeName == "BUTTON"){
return false;
}
// your code
alert("click")
}
$("#menuDiv1").children().on('click',clickfunc);
You can use unbind to disable and bind to enable again.
$("#menuDiv1").children().unbind('click');
To bind it again
$("#menuDiv1").children().bind('click', clickhander);
You better look to use jQuery.on and jQuery.off instead of bind and unbind.
In Angular you can use ng-click and ng-disabled in combination. For example:
<button ng-click="clicked()" ng-disabled="val">Click</button>
And in controller set the val to true or false to enable/disable click on the button.
$scope.val = true; //To disable button
EDIT:
For div you can do it like this:
<div ng-click="val || clicked()" ng-disabled="val">Click</div>
using on/off you can enable or disable click event
Disable click
$("#menuDiv1").children().off('click');
Enable Click
$("#menuDiv1").children().on('click', function(){
// do here work
});
You would either unbind previously bound click event handler, or prevent event conditionally:
$("#menuDiv1").children().bind('click', function (e) {
if ($(this).hasClass('no-click')) {
e.stopPropagation();
}
});
Btw, it's better to use e.stopPropagation(); explicitly to prevent child-to-parent event bubbling, rather than implicit return false.
Based on the new information in your question, the proper way to do this in AngularJS is to use the $locationChangeStart event.
Plunker
app.run(function ($rootScope, $location) {
$rootScope.$on('$locationChangeStart', function (event, next, current) {
if ($rootScope.menuDeactivated) {
event.preventDefault();
}
});
});
This is a very simplistic example of that sets a variable on the $rootScope, but you could instead run a function (helpful if you want to save form values or prompt the user before changing your route for example) or inject a service (such as if you want to check if a user is logged in), etc.
Related
I'm attempting to intercept a JavaScript event, and preventDefault, to display a warning modal. If the user chooses to accept the warning, then they click 'Continue' and carry on doing what they were doing. There are multiple possible events that this could occur for though, so I thought the best way to handle it would be to just attach the current event to the 'Continue' button.
This is the code I have so far:
$(document).on('click', 'nav.pagination a', function(e) {
e.preventDefault;
var checkedBoxes = $('.checkbox-pagination-warning:checked');
if(checkedBoxes.length > 0) {
$('.checked-box-warning-modal').modal("open");
// This is where I would attach the event to this button:
//
// $('.checked-box-warning-modal a.continue')
} else {
$(this).unbind("click");
}
})
For context, I am warning the user that there are checked checkboxes on the page before they navigate or paginate away.
Also the pagination is handled by Stimulus.
This is an example of the HTML:
<nav class="pagination">
<a href="/entities/1?signatories_page=1" class="pagination-first-page" data-action="click->entities--add-existing-signatories#onPaginate">
1
</a>
<span class="pagination-current-page">
2
</span>
</nav>
So how can I attach the event, which I ran preventDefault on, to the 'Continue' button, so that the event continues as if nothing happened?
I noticed you have an error when defining the data-action here:
<a href="/entities/1?signatories_page=1" class="pagination-first-page"click->entities--add-existing-signatories#onPaginate">
1
[update]
So I think you could prevent the paginate link action with event.preventDefault(). Then, you would trigger a global event that you would capture in a top controller. You would pass the current pagination link (event.target) to this new event that you will capture in the new controller.
Something like:
<!-- this controller will handle showing the modal when asked -->
<div data-controller="main" data-action="recheck#document->main#checkWithModal">
<!-- this is the controller that captures the click on pagination links -->
<div data-controller="pagination"></div>
</div>
----- javascript
You would use this to dispatch the event
document.dispatchEvent(new Event('recheck', {bubbles: true, detail: { existing event target here }}))
I have a kendo grid with its dataSource, the grid has an editor dialogue with save button. I need to prevent the save button being double clicked. The onsave functions fire when the save button is clicked. I have a requestEnd event that fires when the save is to be re-enabled.
The problem: onSave1 looks to fail 1 time in 100 . It's based on adding an additional click handler, invoking preventDefault(). Is it fundamentally flawed?
Is onSave2 any better?
onSave1: function (e) {
$(event.srcElement)
.addClass("k-state-disabled")
.bind("click", disable = function (e) { e.preventDefault(); return false; })
this.dataSource.one("requestEnd", function () {
$("[data-role=window] .k-grid-update")
.off("click", disable)
.removeClass("k-state-disabled");
})
}
onSave2: function (e) {
$(event.srcElement)
.removeClass(".k-grid-update")
.addClass("k-state-disabled")
.addClass("disabledMarker");
this.dataSource.one("requestEnd", function () {
$("[data-role=window] .disabledMarker")
.addClass(".k-grid-update")
.removeClass("k-state-disabled")
.removeClass("disabledMarker");
})
}
First Jquery bind has been deprecated since version 3.0 so I would recommend not using it anymore. http://api.jquery.com/bind/
You do not need an onClick event or in your case bind because onSave is already being called during the click. So simply disable the button onSave. Second you should use complete or whatever kendo grid uses for when the save event is finished instead or requestEnd. Code listed below.
onSave: {$(event.srcElement)addClass("k-state-disabled")}, complete:{ $(event.srcElement)removeClass("k-state-disabled")};
I have a lot of links in my app that I need to enable/disable the click event to them, but still want allow the hover and other events.
so I need a way (CSS / JS / jQuery) to disable only the Click event. and also with no need to use the handler name.
for example:
HTML:
Run All
JS - call to the disable function:
disableElement('#runAll', "no sensors to record"); // call to the disable function
JS - enable / disable functions
//disable element (add disable class and unbind from click event)
function disableElement(element, tooltip) {
$(element).addClass('ui-disabled');
$(element).disableClick; // need this option!
if (typeof tooltip != 'undefined' && tooltip != "")
loadTooltip(element, tooltip);
}
//enable element (remove disable class and bind to click eventl
function enableElement(element) {
$(element).removeClass('ui-disabled');
$(element).prop("title", "");
$(element).enableClick; // need this option!!
}
I tried this but didn't work for me. any idea please?
for now this is my function and
With JS:
$(element).attr('onclick', 'return false'); // disable
$(element).removeAttr('onclick'); // enable
Html
google
Use the 'off' call on your elements
$(element).off('click');
They can be rebound with 'on'
$(element).on('click', function(){
//your handler
});
You can stop the handler you have for a specific event by using $el.off('click').
Note though that re-attaching the event can be long winded, so it's better to use a flag within the handler itself to direct the logic. Something like this:
$el.click(function(e) {
var $el = $(this);
if ($el.data('click-disabled')) {
e.preventDefault();
}
else {
// do your thing...
}
}
Then you can disable/enable the handler logic by setting the data attribute:
$el.data('click-disabled', true);
Is it possible that you are taking the wrong approach?
why do you want to remove the handlers if there is the possibility that you will reattach?
It might be more appropriate to have the handlers always attached, then have a check for whatever condition you feel would mean removal
i.e.
$('#someThing').on('click', function () {
if(!someConditionThatYouFeelShouldRemoveTheHandler){
// do some code here
}
});
That way you dont need to attach and reattach multiple times
Answer 2
$(document).ready(function() {
$('.ui-disabled').click(function(e) {
e.preventDefault();
});
});
function disableElement(element, tooltip) {
$(element).addClass('ui-disabled');
// do nothing
if (typeof tooltip != 'undefined' && tooltip != "")
loadTooltip(element, tooltip);
}
//enable element (remove disable class and bind to click eventl
function enableElement(element) {
$(element).removeClass('ui-disabled');
$(element).prop("title", "");
// do nothing
}
Here's my situation: I've got a field that once the user double click, it'll edit the field. That's fine and working. I've got two functions: ok and cancel. Cancel disables the editing mode. ATM, the user has to click cancel to disable the editing mode. What I'd like to is to allow the editing mode to be disabled when the user clicks anywhere else on the page. How can I accomplish this with Angular?
EDIT: I'm adding my markup (Note: this is Jade):
tr(ng-repeat="user in users | filter:searchText"s)
td(ng-dblclick="editItem(user)", hm-double-tap="editItem(user)", ng-blur="cancelEditing()")
span(ng-hide="user.editing") {{user.name}}
form(ng-submit="doneEditing(user)", ng-show="user.editing", class="inline-editing-2", ng-blur="cancelEditing()")
input(type="text", class="form-control", ng-model="user.name")
button(class="btn btn-success mr-1", ng-show="user.editing", ng-click="doneEditing(user)")
span(ng-click="doneEditing(user)").fa.fa-check-circle
button(class="btn btn-warning mr-1", ng-show="user.editing", ng-click="cancelEditing(user)")
span(ng-click="cancelEditing(user)").fa.fa-times-circle
As you can see, I've got a hg-repeat on user. When double click on the td element it makes user.editing true so the form shows up. the cancelEditing(user) makes the variable false and only the field is displayed.
I've added ng-blur="cancelEditing()" on thetr,td,spanandform` and none of it worked.
Any ideas what am I missing?
Use ng-blur to bind your cancel event to the element. It will fire when the element loses focus.
IE: <input ng-blur="cancel()" />
Note: The cancel function must be within scope.
Angular ngBlur Docs
Update from comments:
Give the input element focus when your double tab event fires making the field editable. Your blur event is likely not firing because the input element never had focus.
You could do this from inside your editItem function or from inside the directive.
As an example:
yourApp.directive('hmDoubleTap', function(){
return function(scope, element, attr){
if(doubleTap) {
// Fire editItem(user)
// You could add your .focus() inside editItem().
// Or focus the first input element at the end of the directive.
element.find("input")[0].focus();
}
};
});
b1j's answer would work only if the element gains focus. Does hm-double-tap directive focuses the element after double click? If not you will have to trigger focus in editItem function.
Another approach would be to handle the click event on any other element like this:
$('#field-no-edit').click(function() {
$(this).hide();
$('#field-edit').show().focus();
});
$('body').on('click', function(e){
console.log($(e.target).attr('id'));
if ($(e.target).attr('id') != 'field-no-edit') {
console.log('not');
$('#field-no-edit').text($('#field-edit').val());
$('#field-edit').hide();
$('#field-no-edit').show();
}
});
JSFiddle
I disable a jQuery click event with:
$("#button").click( function () { return false;}
How can I enable it? The intention is avoid double clicks and run multiple times the function that triggers.
I want to restore the event when other button was pushed.
There's a couple options, but I like the following best:
//disable
$("#button").bind('click', function() { return false; });
//enable
$("#button").unbind('click');
You could also bind click again on the button to some other callback function as well. Lastly, I might suggest calling preventDefault on the event from a click event, depending on what #button really is like so:
$("#button").bind('click', function(e) {
e.preventDefault();
return false;
});
As j08691 pointed out, as of jQuery 1.7 on, it should look like:
$("#button").on('click', function(e) {
e.preventDefault();
return false;
});
You could also use one:
$("#button").one('click', function () { /* code here */ });
The event will unbind itself after being called once.
If you do:
$("#button").unbind("click");
the button will be working again, the unbind function erases registered events handlers from the selected element, if you dont pass it an argument it will erase all events registered.
EDIT: as noted in the comments, you can use now the on and off methods:
$("#button").off("click")
to disable clicks and:
$("#button").on("click")
to enable them again