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

Ajax request other than Get and Post

Type setting in Ajax request is used to specify HTTP method that can be used to make remote calls. Many firewalls and application servers are configured to discard other kind of request except Get and Post.

If we want to use other HTTP methods, then we can make a POST request, but add the X-HTTP-Method-Override header; Setting it to the method we want to use, like this;

X-HTTP-Method-Override: PUT

This convention is widely supported by web application frameworks and is a common way of creating RESTful web applications.

You can learn more about this here;

https://en.wikipedia.org/wiki/Representational_state_transfer

See the “Setting Timeouts and Headers” section for detail of how to set a header on a jQuery Ajax request.

Throw exception on server side and handle in jQuery AJAX post call

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

Here are some references;

https://stackoverflow.com/questions/377644/jquery-ajax-error-handling-show-custom-exception-messages

Ajax Request: Response to preflight request doesn’t pass access control check

Today, I started getting this error after making few Ajax calls to a remote server;

Access to XMLHttpRequest at 'https://foo.com' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This problem relates to CORS. Here is some explanation and work around;

https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check

Here is some more useful info;

https://www.edureka.co/community/82342/how-to-add-custom-http-header-to-ajax-request-with-javascript

jQuery Ajax – tips

jQuery Ajax is async by nature. We use to set a flag “async:false” if we need to make Ajax call sync (non-blocking). This feature has been deprecated. Here is a compile list of Ajax using jQuery;

Alternative to “async: false” for successive AJAX calls

Handling Sequential AJAX Calls using jQuery

Multiple Simultaneous Ajax Requests (with one callback) in jQuery

jQuery callback for multiple ajax calls

jQuery.when understanding

jQuery Promises – Taking action .when() multiple ajax calls are complete