GET API Call using jQuery and AJAX


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn how to make a GET API request in HTML/web app using jQuery and AJAX?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

How to make GET API request

We have learned how create an API and test API with Post Man client. if you miss the post here it is.

We need to access the API in the real world applications. We can use JavaScript for web apps for that and the best way to do is using jQuery and AJAX.

The GET request is used to get a list of data, says product list,users list, customer list etc and the POST send data to the server.

In the script file you can add following code to access the API, in our example it is a list of users

$(function () {
 $("#btn-get").on("click", function () {
   //List users using API with AJAX

   $.ajax({
     url: "/api/user",
     contentType: "application/json",
     success: function (response) {
       // console.log('success');
       var el = $("#usr-group");
       el.html("");
       response.users.forEach(function (usr) {
         el.append('<li class="list-group-item">' + usr.uname + "</li>");
      });
    },
  });
});
});

the AJAX call is made inside the document ready function, which will execute only after the complete web page is loaded. The ajax call has following properties

  • url – the API itself
  • contentType – type of the content , it can be json structured in many cases.
  • Success – function that will excecuted after the call made successfully
  • error : – can be arrow function for handling errors

The success function return a response , in which our data is packed. In this example the users object. we can iterate through the object list and add to the webpage using jQuery.

Some jQuery post will help you to extend the functionality of your app.

How to create animated tool tip container with CSS and jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn to create custom tool-tip container with CSS and jQuery?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

and the container look like the following (HTML)

 <section class="tool-tip-hide alert text-info" id="ask-tool-tip">            
                   </section>

CSS

Here is our CSS code to hide and show the container

.tool-tip-hide{
    display: none;
}
.tool-tip-show{
    display:inline     ;
}

jQuery code

 $(function () {
  
  var info = $("#ask-tool-tip");
  function resetTooltip() {
    info.removeClass("tool-tip-show");
    info.addClass("tool-tip-hide");
    info.html('')
  }

  resetTooltip();

 async function Message(msg) {
    resetTooltip();
    info.html("");
    info.append(`<i>${msg} !</i>`);
    info.removeClass("tool-tip-hide");
    info.addClass("tool-tip-show").fadeOut(3000, () => {
        info.fadeIn()
  
    });
  
  }
$("#btn-click").on("click", () => {
 Message("Thank you");
})

}

In the above jQuery we are done the following

  • locate the container adding class to the HTML ( tool-tip-hide)
  • create custom method for setup message with animation
  • call the Message function inside a event handler

How to add/remove CSS class using jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn change visual UI features by adding/removing CSS class from jQuery?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Add or Remove CSS class

jQuery has capability of adding and removing properties of DOM elements such as class. It will be help us to change the visual appearance of the container according to user interations

   el.addClass('class-name')
   el.removeClass('class-name')
  

using el.find() can check for the the existence of the class

How to show/hide DOM element using jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn how to show and Hide a div with JQuery

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
 
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Show and Hide action

   $("#show-btn").on("click", function () {
 var el=$('#element')
 el.show().fadeIn(1000)
}
  $("#hide-btn").on("click", function () {
 var el=$('#element')
 el.hide().fadeIn(1000)
}

By using the id of the div we access the element and call the show/hide method. We can add cool animation with jQuery too.

How to redirect a page in jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks. Let’s learn how to redirect to a webpage or route in jQuery?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Redirecting the page

Using the Window.location we can redirect to another webpage or route as follows

   
 window.location.href = "/home.html";

The href can be a web page or an external link . The following post may help you to explore jQuery

How to load content into div using jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks. Let’s learn how to add content to div using class id/class

jQuery

jQuery can be placed in a file or with in HTML , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Adding the content

Adding the content to a div can be achieved

  • access the DOM element using id
  • Placing content using one of the following method
  1. append() – Inserts content at the end of the selected elements
  2. prepend() – Inserts content at the beginning of the selected elements
  3. after() – Inserts content after the selected elements
  4. before() – Inserts content before the selected elements

Here is the plan

  • Find the element using jQery function
  • Clear the content
  • Append the content
$(function () {
  var divEl=$("#content-area")
  divEl.htm('')
  divEl.appen('<p>I am a paragraph</p>')
});

Here the divEl.html(”) is used to clear the content. We can also use class to access the element in a HTML file by using $(‘className’)

I recommend the following post for further read

How to refresh / reload content to a div using jQuery


With JQuery ( light weight, super Java Script library) we can make call to API for fetching data or loading web page.

How about refresh or reload contents every 5 second ?

Steps

To auto reload the content we need the following

  • Create function
  • Set interval

Function

$(function () {
  // Function load content
function fetchData(){

}

});

Turn the data fetching portion of the AJAX call into JavaScript function inside the document ready jQuery function.

Set interval

setInterval(function(){
     fetchData()
 },5000)

The setInterval will invoke the function every 5 second using the call back function.

How to generate a UUID in Nodejs


UUID – Universal Unique Identifier– is a npm package which let you generate safe Cryptographically-strong random values using several settings. The package supports Node 8-14 versions and it has zero dependency module. The package is one of the top weekly downloads in the NPMjs.com

How to install

The package can be installed to Node project using

npm i uuid --save

How to generate values

To use the uuid generator we have to import using either one of the following method

import { v4 as uuidv4 } from 'uuid';
const { v4: uuidv4 } = require('uuid');

Methods

There are 4 commonly used method can be used to generate values.

uuid.v1()Create a version 1 (timestamp) UUID
uuid.v3()Create a version 3 (namespace w/ MD5) UUID
uuid.v4()Create a version 4 (random) UUID
uuid.v5()Create a version 5 (namespace w/ SHA-1) UUID

Random values

we can use uuid.v4() for random values as follows in JavaScript

const { v4: uuidv4 } = require('uuid');​
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

For more guide or instructions on the above method visit the npmjs.