jQuery – Andreas Plahn Blog

How to include and use jQuery in Angular CLI project

Tested in angular version 7:

install jquery:
npm install jquery
install jquery typescript intellisense:
npm install @types/jquery
edit the angular.json file in root folder:
in the architect / build / scripts location, add this:
```
"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]
```
To use jquery inside a component.ts add this import at the top:

import $ from ‘jquery’;

Example code to check for functionality:
component html:
```
<button (click)="testJQuery()">Test jquery</button>
```
component.ts:
```
testJQuery() {
$('html').fadeOut();
$('html').fadeIn();
}
```
Click on the button should fade out and fade in the entire page.

Source: How to include and use jQuery in Angular CLI project

Using Self Calling Anonymous Functions and $(document).ready

This is a common pattern with jQuery extensions to ensure that they are always added to the jQuery object, but can be written using $ to keep the code tidy:

(function($){
$(function(){
// your code here
});
})(jQuery);

The $ would actually reference the jQuery library inside while still referring to Prototype on the outside! This can help tidy up your code

Source: javascript – Using Self Calling Anonymous Functions and $(document).ready – Stack Overflow

Using jQuery to prevent Internet Explorer from accidentally submitting form on enter key

$(function () {
    //page is ready
	
	
		//Prevents users from accidentally submitting form with enter key (e.g. IE problem) 
	    //http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter
	    $(document).on("keyup keypress", "form input[type='text']", function (e) {
	        if (e.keyCode === 13 /*enterkey*/ || event.keyCode === 169 /*enter on numpad*/) {
	            e.preventDefault();
	            return false;
	        }
	    });
	
});

Works in ajax templated context as well.

jquery – Fade in each element – one after another – Stack Overflow

Let’s say you have an array of span elements:

$("span").each(function(index) {
$(this).delay(400*index).fadeIn(300);
});

(quick note: I think you need jQuery 1.4 or higher to use the .delay method)

This would basically wait a set amount of time and fade each element in. This works because you’re multiplying the time to wait by the index of the element. The delays would look something like this when iterating through the array:

Delay 400*0 (no delay, just fadeIn, which is what we want for the very first element)

Delay 400*1

Delay 400*2

Delay 400*3

This makes a nice “one after the other” fadeIn effect. It could also be used with slideDown. Hope this helps!

via jquery – Fade in each element – one after another – Stack Overflow.

jQuery – get a list of values of an attribute from elements – Stack Overflow

$”.object”.attr”level” will just return the attribute of first the first .object element.This will get you an array of all levels:
var list = $”.object”.mapfunction{return $this.attr”level”;}.get;

via selectors – jQuery – get a list of values of an attribute from elements of a class – Stack Overflow.

Create a JSON WebService in ASP.NET 2.0 with a jQuery Client – CodeProject

Create a JSON WebService in ASP.NET 2.0 with a jQuery Client – CodeProject.

Short js snippets working with js jquery and bool valuesinput checkboxes

Get value of checkbox (jquery):

$('#myCheckboxInput').attr('checked')

– returns bool true or bool false

Set value of checkbox (jquery):

$('#myCheckboxInput').attr('checked', true)

Second parameter can be true or false.

Convert true or false strings to bool (js):

var myBoolValue = (myString.toLowerCase() === "true");

This is when you know the string will be ‘True’ or ‘FALSE’ for instance. Accepts all case variations of ‘TRUE’ and ‘false’.

Use jQuery to hide a DIV when the user clicks outside of it

From: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

$(document).mouseup(function (e) { var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.hide(); } });

javascript – Jquery Event wont fire after ajax call – Stack Overflow

javascript – Jquery Event wont fire after ajax call – Stack Overflow.

Allan Jardine | Reflections | Visual Event

Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I’ve created Visual Event to help track events which are subscribed to DOM nodes.

Allan Jardine | Reflections | Visual Event.