Develop Reference

Get the html element of the selected event in kendo scheduler

I was wondering how can I get in the html element with ".k-event" class, contains selected event in function binded to edit event of the Scheduler?
$("#src-ap-01-scheduler").kendoScheduler({
date: new Date(),
allDaySlot: false,
editable: {
template: $("#scr-ap-01-editor").html()
},
edit: function(e){
// i have tried these
// e.currentTarget
// e.container.closest("k-event")
}
})
I've logged the (e) on the function but I have no idea how to get the .k-event element from inside of the function. I hope you guys have some idea to get this element, any advice would be appreciated, thanks.

To get selected event element put this code in function triggered on edit:
edit: function(e){
var uid = e.container.attr('data-uid');
var element = e.sender.element.find('div.k-event[data-uid="' + uid + '"]');
}
Greetings.

The above answer doesn't work in Kendo UI v2015.1.318, and here's my quick solution for this issue.
edit: function(e) {
if (e.event.YOUR_EVENT_CONDITION) {
// Allow the user to edit this event!
} else {
e.preventDefault();
var element = e.sender.element.find('div.k-event[data-uid="'+e.event.uid+'"]');
if (element)
$(element).notify("You can't modify a completed event.", {className: "error", placement: "top", autoHideDelay: 3000});
else
$.notify("You can't modify a completed event.", "error");
}
}
I'm using notify.js to display a popup message right on the selected event UI only if it exists. Please visit the following link for notify.js.
http://notifyjs.com/

Check if any bootstrap modal is open

How to check, if any bootstrap modal is currently open?
The reason behind: I want to deactivate certain keyhandler, if a modal is open.

If you are using jquery, you can use this :
function isABootstrapModalOpen() {
return $('.modal.in').length > 0;
}
Vanilla JS solution :
function isABootstrapModalOpen() {
return document.querySelectorAll('.modal.in').length > 0;
}
This solution works for any modal, not just a specific one.
Edit: the code above test if, at any given moment, a modal is open. As indicated in the other answers, if you want to disable an event handler the moment the modal is opened, you'll have to use the bootstrap events, like this :
// when any modal is opening
$('.modal').on('show.bs.modal', function (e) {
// disable your handler
})
// when any modal is closing
$('.modal').on('hide.bs.modal', function (e) {
// enable your handler
})
You can also use isABootstrapModalOpen in your event handler, to test if the handler's code has to be executed (so you don't to enable/disable the handler each time a modal is opened/closed).
function eventHandler(e) {
// if a modal is open
if(isABootstrapModalOpen()) {
// prevent the event default action
e.preventDefault();
// and exit the function now
return;
}
// if a modal is not open
// proceed to the rest of the handler's code
}

The Bootstrap modals fire events when opened. In your case, I'd suggest to bind an event to the show.bs.modal event and unbind your key handler event. Simple example:
$('#myModal').on('show.bs.modal', function (e) {
// yadda yadda .unbind()
})
Docs: http://getbootstrap.com/javascript/#modals, scroll down to Events.

Here take this:
$(document).find('.modal').each(function(e) {
var element = $(this);
if ( (element.data('bs.modal') || {isShown: false}).isShown ) {
console.log('a modal is open');
}
});

My solution was to use jQueries's hasClass method.
return $('div.modal').hasClass('in'); // True if open, false if closed

You may try this:
alert($('#myModal').hasClass('in'));

For Bootstrap 4 the modal has class "show" if it is open
So to check if there is any modal open:
if ($('body').find('.modal.show').length) {
// Do something
}
I currently use stacked modals (multiple open), and the problem was that if you do .modal('hide') of a single modal. Bootstrap removes the class .modal-body from the body element. And then the modal didn't scroll anymore so I had to do this:
$(document)
.on('hidden.bs.modal', '.modal', function() {
/**
* Check if there are still modals open
* Body still needs class modal-open
*/
if($('body').find('.modal.show').length) {
$('body').addClass('modal-open');
}
})
;

While not an answer to this direct question, it is related.
Here's how to check if within a Bootstrap 4 modal:
if (window.parent.jQuery('.modal-content').length > 0) { // in a modal }

You can use this:
$('#mymodal').on('shown.bs.modal', function (e) {
console.log("Modal is open");
})

Add onRightClick to JavaScript lib Hypertree

I'm currently working (a repo is here) on a Hypertree graph, which I want to use from the JavaScript InfoVis Toolkit. The issue is as follows: I added the specific events to the Hypertree, which are onClick and onRightClick.
Events: {
enable: true,
onClick: function(node, eventInfo, e) {
ht.controller.onComplete();
},
onRightClick: function(node, eventInfo, e) {
ht.controller.onComplete();
},
},
Then I simply attached the veent handlers to the Hypertree labels, just modifying demo-code a little:
//Attach event handlers and add text to the
//labels. This method is only triggered on label
//creation
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
$jit.util.addEvent(domElement, 'click', function () {
ht.onRightClick(node.id, {
onComplete: function() {
ht.controller.onComplete();
}
});
});
$jit.util.addEvent(domElement, 'rclick', function () {
ht.onClick(node.id, {
onComplete: function() {
ht.controller.onComplete();
}
});
});
},
That's pretty straight forward. The documentation for Hypertree events is in Options.Events.js. Now I load the page... and I have the left.clicks. But no right clicks... I want the RightClicks to move the graph and the onClicks to open a link from the DOM Element node. Can someone please give me a pointer here?
Best,
Marius

$jit.util.addEvent(obj, type, fn) is a shortcut for obj.addEventListener(type, fn, false). So you are trying to bind to 'onrclick' event. But there is no such event in javascript. For detecting right click you just need to replace your 'rclick' to 'mouseup', and in callback you should check for button to be the right one. Here is the code:
$jit.util.addEvent(domElement, 'mouseup', function (event) {
// detecting right button
if (event.button != 2) {
return;
}
ht.onClick(node.id, {
onComplete: function() {
ht.controller.onComplete();
}
});
});
Also you don't need to use Options.Events.js for this purpose, so you can remove that code

The only fault I can see in the "Events"-section, is a trailing comma behind onRightClick. It really shouldn't affect the code if you use IE>8, but it's worth a try.

Ok, this is an answer on why I think your solution is not working.
$jit.util.addEvent(domElement, 'rclick', function ()
There is no such jquery event as 'rclick'.
Typically using jquery you would detect a right-click using the following:
$('#element').mousedown(function(event) {
if (event.which === 3) {
alert('Right mouse button pressed');
}
});
Hence in your example you would use 'mousedown' instead of 'rclick'. However, looking at the documentation for addEvent:
$jit.util.addEvent(elem, 'click', function(){ alert('hello'); });
The example seems to suggest that the event object can not be passed in to addEvent's function parameter, meaning that it won't be possible to detect that the right mouse button has been clicked.
Might be worth posting your question directly to InfoVis' author, as I too will be interested to see whether it is possible to hook-up the right mouse button.

Customised jQuery autocomplete

I have a customised jQuery autocomplete control that is declared something like this.
$('#SystemCode_Autocomplete').autocomplete({
source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
minLength: 1,
change: function(event, ui) {// some function},
select: function(event, ui) {// some function}
});
The change and select events are custom.
The problem is if I type something into the textbox then click the submit button (i.e. no tab out, or lost of focus), or if I press the key to submit after typing into the text box, the change event isn't fired and it has to be before I submit.
I was hoping to do it without putting javascript behind the submit button, and to ideally do it from within the autocomplete control itself. I tried adding the change to the blur event.
${'foo').blur(function() { $('bar').trigger('autocompletechange');
// or
${'foo').blur(function() { $('bar').change();
But none of them have worked, anyone have any ideas?

You can try something like this:
$('#SystemCode_Autocomplete').autocomplete({
source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
minLength: 1,
change: function(event, ui) {/* some function */},
select: function(event, ui) {/* some function */}
}).each(function(){
var self = $(this).closest("form").submit(function(e){
self.trigger("change");
// you may not need anything like this...but whatever
if(!functionToCheckIfFormIsValid()){
e.preventDefault();
}
});
});

focus function autocomplete
Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.
Solve the problem:
$('#SystemCode_Autocomplete').autocomplete({
source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
minLength: 1,
focus: function( event, ui ) {
return false;
},
select: function(event, ui) {
alert('Select Event:'+ui.item.value);
}
});

So your problem is that you have to make sure that action a occurs before action b and you're having trouble reconciling that between two event handlers? That actually sounds like a pretty common UI problem, not something that's limited to jQuery.
How would you solve it in any other circumstance? What if I suggested you to use the jQuery data object to attach to the element and then do some sort of semaphore checking in each method, like setting a flag in the one method, and in the other method checking to see if the flag is set?
That's how I would do it, were it me.

DEMO: http://ask.altervista.org/demo/jquery-autocomplete-help/
$(function() {
var json = [{"label":"Access","value":0},{"label":"Documentum","value":0}];
$('#SystemCode_Autocomplete').autocomplete({
source: function( request, responce ) {
responce( $.map( json, function( item ) {
return { id: item.value, label: item.label, value: item.label }
}));
$.each( json, function( i, item ) {
if ( request.term.toLowerCase() == item.label.toLowerCase() ) {
// do something here, ex.: AJAX call or form submit...
$('#submit_button').click();
}
});
},
minLength: 1,
change: function(event, ui) { /*alert(ui.item.label + ' ' + ui.item.id)*/ },
select: function(event, ui) {}
});
});

Ok I completely for to update this to what we actually did to get it to work.
Basically we editted the autocomplete .js file to get it to do want we wanted.
Specifically we added our own options to the autocomplete then we editted the _response method to something like this
_response: function (content) {
if (content.length) {
content = this._normalize(content);
this._suggest(content);
this._trigger("open");
this.options.isInError = false;
this.element.removeClass("input-validation-error");
} else {
this.close();
if (this.element.val() == '') {
this.options.hiddenField.val('');
} else {
this.options.hiddenField.val('-1');
}
if (this.options.mustBeInList) {
this.options.isInError = true;
this.element.addClass('input-validation-error');
}
}
this.element.removeClass("ui-autocomplete-loading");
},
That way we know if the User is entering "rubbish" as they type and the controll goes red and into an "error"mode. To stop them from posting back we do this
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
// when menu is open or has focus
if (self.options.isInError == true) {
return false;
}
if (self.menu.element.is(":visible")) {
event.preventDefault();
}
//passthrough - ENTER and TAB both select the current element
case keyCode.TAB:
if (!self.menu.active) {
return;
}
self.menu.select(event);
break;

Can I trigger an eventClick from outside the calendar?

I'm creating a "summary" list of events on the page alongside the calendar. I want to trigger the eventClick handler of an event when I click on the entry in the summary. The markup for a summary entry is
<dd id="E45">9:00am-10:00am</dd>
where the id is fullCalendar's event ID.
How can I trigger an eventClick (on the correct event) when the user clicks on the dd?
EDIT:
Thanks for the response. I don't think I was clear enough, though, about what I'm trying to do.
I don't want the fullCalendar instance to have to know in advance that its eventClick event might be triggered from an event outside of itself.
If "summary" and "calendar" are two separate divs and the fullCalendar has been instantiated in the "calender" div and a summary object has been instantiated in the "summary" div, then I'd like to do something like this to trigger the eventClick of the calendar (and pass the correct arguments) when a dd is clicked in the summary.
$("#summary dd").click($("#calendar").fullCalendar.trigger("eventClick", ???????));
This would not be in the fullCalendar code.

Instead of triggering eventClick handler, I've used the updateEvent fullCalendar method:
var eventsToBeUpdated = [];
var allEvents = $('#calendar').fullCalendar('clientEvents');
var chosenEvents = $('#calendar').fullCalendar('clientEvents', eventId);
// remove selected-event css from all events
for (var ei in allEvents) {
var e = allEvents[ei];
var classIndex;
if (classIndex = e.className.indexOf("selected-event") != -1) {
e.className.splice(classIndex, 1);
eventsToBeUpdated.push(e);
}
}
if (chosenEvents.length > 0) {
chosenEvents[0].className.push("selected-event")
eventsToBeUpdated.push(chosenEvents[0]);
}
// update all events which have changed
for (uei in eventsToBeUpdated) {
var updatedEvent = eventsToBeUpdated[uei];
$("#calendar").fullCalendar("updateEvent", updatedEvent);
}

Ok , Not sure exactly what you are trying to do.
You can define the eventClick: in the fullcalendar declaration. The calEvent parameter includes the ID from the Event Object. So could you add a new function and then call that same function passing the ID from your <DD ID="1"> that matches the event click?
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, basicWeek, basicDay'
}
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
eClick(calEvent.id);
}
});
function eventClick(id) {
alert('Event ID: ' + id);
' Your event click code would go here.
}

try this :
$("#summary dd").click(function() {
var eventId = $(this).attr('id');
var events = $('#calendar').fullCalendar('clientEvents',eventId);
if (events.length > 0) {
$("#calendar").fullCalendar.trigger('eventClick', events[0]);
}
});