Tag: jQuery

document.getElementById vs jQuery $()

are they equal?

Not exactly!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

In jQuery, to get the same result as document.getElementById, you can access the jQuery Object and get the first element in the object (Remember JavaScript objects act similar to associative arrays).

var contents = $('#contents')[0]; //returns a HTML DOM Object

Reference

https://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery

Self-Signed Certificate Error when installing jQuery Types for Typescript

If you are trying to use this command in Visual Studio 2022;

npm install --save-dev @types/jquery

and hit by self-signed certificate error in certificate chain. Try to use this command in a Terminal window on the root of Presentation project;

npm set strict-ssl false
npm install --save-dev @types/jquery
npm install --save-dev @types/jqueryui

This will create Package-lock.json file with the following content;

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "@types/jquery": {
      "version": "3.5.20",
      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.20.tgz",
      "requires": {
        "@types/sizzle": "*"
      }
    },
    "@types/jqueryui": {
      "version": "1.12.18",
      "resolved": "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.12.18.tgz",
      "dev": true,
      "requires": {
        "@types/jquery": "*"
      }
    },
    "@types/sizzle": {
      "version": "2.3.4",
      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.4.tgz"
    }
  }
}

Start typing $ and you will immediately start seeing jQuery methods. Now, You can use Typescript with jQuery and jQuery UI.

Front End Plugins

This is a list of various front-end plugins and visual components.

TreeView

https://jonmiles.github.io/bootstrap-treeview/

This plugin leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set.

To read more, read this

Download from here

Bootstrap Material Select

Bootstrap Material Select is a form control that, after a click displays a collapsable list of multiple values which can be used in forms, menus or surveys.

For more info, read this

Bootstrap selectpicker class

Add the selectpicker class to your select elements to auto-initialize bootstrap-select.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

Via JavaScript

// To style only selects with the my-select class
$('.my-select').selectpicker();

or

// To style all selects
$('select').selectpicker();

If calling bootstrap-select via JavaScript, you will need to wrap your code in a .ready() block or place it at the bottom of the page (after the last instance of bootstrap-select).

Download from here