We Keep Coding

How to to bind an Onclick event to a menu item if content equl to

I'm adding multiple Boostrap modals to a website (modals have different content) but I want to add append an onclick event e.i if menu item "request" here i want to add an onclick="request()" to fire the appropriate modal when user click on it.
I know I can simply add this manually but it would be great to learn how to do this dynamically with javascript/jquery!
thank you alot!!

Yes, you can write the it manually but dynamic will always a good practice.
if your model has any thing common more like class.
$(".class").on("click",function(){
// your code or action you want to perform.
});
Hope this will help.

Select2 dropdown menu persists after select removed from DOM

I am using select2 version 4.0.2(rc1)
What I am seeing is that when using select2 with isMultple=true, opening the dropdown and then dynamically removing the select from the DOM, the menu sticks around.
You can see it happening in the select2 examples by focusing on control so you see the time zone options, then in the console typing $('.s2-example').remove(). The list of options sticks around.
Edit: Above is an example of what I am trying to work around. What is happening in my case is the dom is being manipulated to remove the select box by a framework in such a way that I can't hook into it before it happens. What I am trying to do is find a way to respond to the element being removed in the hopes that I can manually remove the options list if it exists.
I'm trying to figure out a clean approach to handling this. I've tried hooking into destroy like so:
$("#select-2-id").on("destroy", function(){...})
but destroy doesn't appear to be fired.
I have considered using a mutation observer but that feels kind of hacky to me. Could anyone suggest a better way to handle this? Any advice would be appreciated. Thanks!

Definitely buried in the documentation (under adapters), but you should be calling the destroy method on the select by passing "destroy" to the jQuery object's .select2() method
$(".js-example-basic-multiple").select2('destroy');
This destroys the instance. You can then safely call .remove()
$(".js-example-basic-multiple").select2('destroy').remove();

SelectBoxIt - trigger an update to the original select element

I'm trying to use the SelectBoxIt jQuery plugin and it looks great and promising and everything though i have 1 issue with this plugin, it seems that there is no native way to update the original select element with the selected value.
at first look on the documentations it seems that indeed there is an option to do so:
Aggressive Change Mode
Note: Aggressive Change Mode will select a drop down option (and
trigger the change event on the original select box) when a user
navigates to an option using the up and down arrow keys via the
keyboard, or searches for an option using the keyboard.
the words:
trigger the change event on the original select box
confused me for a moment but as you can see this is not my use case, it is only referring for a navigation with the keyboard and updating the new drop-down created by the plugin.
am i missing something or there is no native way of doing what i ask for?
and if so, what would be consider a best practice for updating the original select element?
i already thought of some options using callbacks or change events but not sure what would be consider as best practice.

AngularJS changes to the $scope properties aren't reflected in the view without calling $scope.$apply

First here's a plunk: http://plnkr.co/edit/2gD0AB. This plunk doesn't seem to work correctly because $scope.$on("$viewContentLoaded") won't fire, but on my machine it works just fine and I hope you get the idea.
What I'm trying to do there is simply move field objects from $scope.fields to $scope.groupFields = [], $scope.listFields = [], $scope.dataFields = [] when dragging them to the appropriate droppable areas. I've manager to do this using jQuery UI and jQuery UI touch punch (just to be mobile safe).
If you drag an element from the fields box to the one of the empty boxes you'll notice nothing happens on the screen besides the field elements hanging around where you left them. But if do a console.log($scope.fields) in the drop event listener you'll notice that all of the field objects are correctly set inside each of the field boxes.
If you click the Add element button then you'll simply trigger console.log($scope.groupFields); and suddenly all the elements appear correctly in their corresponding boxes like intended in the first place.
After pulling my brains out and after searching the internet for some time I found out that $scope.$apply(), called in the drop event after the moveField function, actually fixes my issue.
And I don't understand why. Shouldn't there be a digest already running and updating the view based on what I'm doing in the controller?
Thanks!

Just because the code that handles these jQuery drop events is inside the controller, it doesn't mean it will run under the angularjs scope/word. For those changes to make effect, you will need to force the angularjs app to do a dirty checking on its models. That can be accomplished by calling $apply() or $digest() methods. You should always call one of these methods after handling an jQuery event that changes $scope properties or after a timeout (or interval).

best practices for designing a page with lots of events

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);
});