Tag: How to create webapp

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

flask-gentelella : A beautiful admin bootstrap for pythoners


Gentelella is a free to use bootstrap admin template for developing Python Flask web app, with custom Ajax libraries which includes variety of chart scripts like eChart, Morris Chart etc.

It packed with all must have AJAX and CSS libraries for a Python Web Geek

The bootstrap is also a ready to use flask app, all you need to do is customize the custom script. The app uses blueprint to organize flask routes, which is automatically created based on based on modules.

You can develop database powered app with less pain in few hours with this awesome bootstrap from Colorlib.

Clone and start using the project today

git clone https://github.com/afourmy/flask-gentelella.git
cd flask-gentelella

For instruction and the bootstrap project please visit GitHub page

Have a look at my demo app hosted on heroku.com which is not using any database, it depends on simple json API