I'd like to trigger an action after select2 display the results.
The 'select2:open' event triggers the action AFTER the select2 is opened but BEFORE it displays the results.
Does anyone know how to do it?
The Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.
As far as I understand you need something like select2:loaded action. Unfortunately there is no such event right now, according the documentation.
Try to use select2:select - This is triggered before the drop-down is opened, this event can be prevented or select2:closing.
Related
I am using ngx-inline-editor, the problem is that I need an onshow event, an event that fires up when I click the field(select), ngx-inline-editor doesn't have this, I tried using onclick but I have to click twice for the options, which are taken from a database, to update.
Does anyone know how to implement xeditable to angular 2+ projects? or maybe there's a way to add an onshow event to ngx-inline-editor?
I can't load up the options beforehand because the options depend on which field I click, basically I grab a bunch of cars from a database, and you can modify the "state" of each car, but the states you can select depends on another variable of the car, so I need an onshow event to load up the options, and then also set the starting option to the current state.
if you want to execute a function when the DOM element is visible on viewport, you can use one of this plugins
https://www.npmjs.com/package/ng2-inview
https://www.npmjs.com/package/angular2-viewport
Or maybe use some alternative events:
https://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0
hope this help you :D
The docs say the scheduler change event is "Fired when the user selects a cell or event in the scheduler."
Great. The problem is that event is also fired on browser window resize. My app now thinks when the browser window is resized that the user clicked in a cell.
How do I distinguish between these two conditions?
Thought I had the answer here but no dice. No idea what causes the scheduler to fire the change event on resizing. I am showing it in a Marionette JS view. Maybe that has something to do with it? Not sure. It shouldn't.
I know it's all wired correctly because the calendar works properly when clicked - correct views are displayed based on whether a calendar slot has an event or is blank. But the change event fires when on window resize causing my app to fire view changes. A break point in the scheduler change event confirms it is firing on window resize.
Below I tried ditching the change event in favor onClick based on some prescriptions found in various posts. Ugly code but it worked in Chrome. Unfortunately doesn't work in other browsers. Why is there simply no "onClick" event? I just looked at a competing scheduler product and it has one.
Chrome only solution: "e" below is the onClick event object:
//Get the element ID - the DOM ID of the thing that was clicked. You'll use it to
//dip into the scheduler data model to get the event specific data you're after.
var uid = e.toElement.parentElement.parentElement.attributes[2].nodeValue;
//Get a reference to the scheduler data model
var scheduler = $("#scheduler").data('kendoScheduler');
//Use the uid to find the event associated with the click action
var event = scheduler.occurrenceByUid(uid);
Here are the posts that helped formulate that Chrome solution:
Call Scheduler events from EventTemplate
Kendo UI scheduler doesn't allow for reliable cell click event handling
Problem with this obviously is that it doesn't work in other browsers. That uid value (e.toElement.parentElement.parentElement.attributes2.nodeValue) is in different places in different browsers. So this solution is a no go.
I have no idea how a product like this doesn't have an onClick event. Likely have to use a different calendar. Very frustrating.
The issue at hand is I am rendering this calendar in a Marionette js item view. when a scheduler cell item is clicked I take the user to a different view. But the event that is used by the scheduler to handle clicks, "change", also fires on browser window resize. So on a browser window resize my app takes the user to a different view. Not good. No work around.
You can reproduce all next steps on standard kendo UI Scheduler example. For example on this: http://docs.telerik.com/kendo-ui/web/scheduler/how-to/dynamic-calc-of-height
Click on empty time slot.
Editor pop up is opening for creating new event
Type title etc.
Click "Save"
Now we see new event on the scheduler table.
But if we do next:
Click on event
Editor pop up is opening for editing event
Click on cancel.
Scheduler - delete the event!
How to save event and prevent this scheduler incomprehensible behavior?
But on this example all works fine.
http://docs.telerik.com/kendo-ui/web/scheduler/how-to/add-control-to-customeditor
Please, explain some one, what is happens? What is the reason of different behavior?
The reason for this behavior is the missing dataSource "schema.model" configuration which is mandatory for the CRUD operations. For more information about how to set up the Scheduler you can check the following help article:
Scheduler: overview
I'm after what seems to me to be a straightforward pattern for handling page refreshes when I've got a drop-down that reacts to the onchange event.
I've used the following in the vb code behind (in the Load handler):
MyDropDown.Attributes.Add("onchange", "ProcessDDChange(this.value);")
Function ProcessDDChange() is in-page JavaScript that grays out some other form inputs for certain values of the drop down.
This works fine, but after a postback, onchange is apparently not fired when the previous state is restored, so disabled boxes are enabled again.
I've investigated load events (page and drop-down), but both fire too early to be of use and I can't see any later options.
Is there a standard way of doing this? I need a hook for running a js function post DOM setup, post asp state restore.
Info
I'm using .net 3.5 and I'm looking for a cross browser solution. This is not my project, so I can't add jQuery (much as I'd like to) or other libs.
You could wrap the dropdown in an update panel and set the trigger for the change event like epascarello suggests. Have you tried adding it to the markup like
<asp:DropDownList runat="server" ID="MyDropDown" onchange="ProcessDDChange(this.value);"></asp:DropDownList>
EDIT:
So you are loosing the onchange listener when you postback, the above example should preserve it. But if not you could also try this in the codebehind event that you would like to have call the ProcessDDChange: for vb.net
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "err", "ProcessDDChange(this.value);", true);
FINAL EDIT:
Thanks for sticking it out with me Bob, while I was attempting to understand the question:
The document.ready event is raised after the PageLoad event is complete and the DOM is constructed. This would be the proper place to call your ProcessDDChange().
document.addEventListener("DOMContentLoaded", function(event) {
ProcessDDChange(ddlId.selectedValue);
});
onchange does not fire when the page loads. You would need to trigger the function on page load OR you need to have the server set up the page correctly from the start.
So I have a grid on a page that displays tablular data, with a checkbox by each row.
So in this situation, when a checkbox is clicked, allot of things will react on the page potentially.
Also, if a button is clicked, again allot of things will potentially react on the page.
So say if someone checks a checkbox, the row should be highlighted, there is a toolbar that will show/hide buttons, etc.
If someone were to click on the toolbar directly, again things similar to when the checkbox was clicked will react.
So what I want to do is this, whenever a checkbox is clicked, or whenever a toolbar button is clicked, I want to 'announce' to anyone who is listening that this event occurred.
I can then, based on the source of the event, react in a similar or different manner.
how to best go about designing things like this?
I think you want to look into using the Observer Pattern. Basically, interested parties subscribe or listen for an event on a publisher, and when the event occurs, the source notifies all the listeners of it.
two things come to mind:
1. event delegation (you don't want to bind to each input on the grid)
look at this link to a great way of doing this while also maintaining a clean code:
by ben nadel
2. using custom events, or even better - use this pub/sub plugin
i have a large grid like this in my app that evolved over time, and manually binding to each input + responding in different ways caused the code to be a "bit" ugly,
It's great that you now where you are going and prepare up front
You could try YUI Custom Events. This allow you to fire off your own "event" which listeners can hear.
I like how it works with jquery, since you can bind an event to many
elements at once.
$("input[type=checkbox]").click(function(e){
alert(e.currentTarget.id);
});
This code would make all checkboxes alert their name. Of course, by using css classes,
you could bind a subset of all checkboxes to create an action.
$("input[type=checkbox].cssClass").click(function(e){
someOtherFunction(e.currentTarget);
});