Creative Technocrayts

Hide show input fields based on select value Many times, while learning a new technology or a framework, it is not sufficient to read just the documentation and syntax, we need to practice. Many of us may try on our own sometimes things will work out for us sometimes we don't know how to evaluate ourselves. All our recent practice articles were published in that thought of giving readers a practice in jQuery  concepts.  Follow our FB page @CreativeTechnocrayts Other jQuery practice articles 1. jQuery DOM functions and array 2. DOM manipulation in jQuery 3. Daily ui practice - Input range sliders Subscribe to Creative Technocrayts and get updates in front end development and UI / UX. Some of us might run into a problem of  showing input value based on user selecting an option from the dropdown. We can achieve that in many ways.If the user is not selecting a value, the form is incomplete so the user cannot submit the form To check whether the select value is s...

How to check whether atleast one input is selected using jQuery Sometimes, while working with forms, a user is expected to select atleast one input, or a feedback should be thrown asking them to "Select atleast one input". How to check that using jQuery When a select option is checked checked attribute is added. To check whether the any of it is checked :checked is used in jQuery. If any of the checkbox is having checked attribute, then the user is allowed to submit. How to check whether an element is present To check whether an element is present, 1) size() function is used 2) .length property is used .length is faster than .size() because, former is a property whereas latter is a function. HTML snippet $('#submitBtn').click(function(){ if($('input[type="checkbox"]:checked').length >= 1){ alert("Is checked"); } else{ alert("Select atleast one"); } }); Other jQuery practice art...

Creating boxes with repeating background color - jQuery practice This article gives an idea of jQuery and DOM methods and javascript arrays Many of you have tried our previous practice exercise it seems. Jquery array i) When you get an input, you check whether it is validated as a number, ii) Based on the input value, number of boxes is created. iii) Set all the boxes with background colors from an array How to get an input value from textbox var inputValue = $(this).val(); console.log(inputValue); Testing whether the input value is a number For testing whether it is a number, regex pattern is used. if (/^[0-9]$/.test(inputValue)){ console.log("It is a number"); } /^[0-9]$/ :here,[0-9] checks whether it is a number. Note: /^[0-9]{1,2}$/ refers two digits number Creating number of boxes based on input value var section = document.createElement('section'); for (i=0;i<=inputValue-1;i++){ //crea...

What is the difference between Javascript, JQuery, JQuery UI, JQuery mobile? Javascript Javascript is a programming language with its own syntax, functions, data structures and loops. Javascript is the most popular language used in web development. According to Stack overflow 2018 survey results Javascript is the most popular programming language. It has become an ubiquitous in web development. What is the difference between JQuery and Javascript JQuery is a Javascript library. It is built on top of Javascript and makes use of its functions. Jquery carries the motto “write less; do more”. JQuery is an extensive library making use of Javascript features and function within its library. JQuery framework is useful for 1) Manipulating DOM elements 2) CSS Selectors manipulation 3) Handling AJAX data for communicating with servers perform actions on specific events. 4) AJAX communication with servers 5) Animation effects 6) HTTP requests JQuery is said to have poor backwar...

DataTables jQuery Plugin Options – Complete Guide In Part I of this series, we introduced the basics of the DataTables.net jQuery plugin . The DataTables jQuery plugin provides a rich set of configuration options for sorting, paging, search, and responsive layouts. Let’s see how you can utilize these options efficiently. CDN Links for DataTables Add the following CSS and JS files to your project using CDN links: Stylesheet References https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Script References https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Disable All Options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” dropdown at the bottom of the data table $('.promo-prici...

jQuery is a JavaScript framework used for client side scripting of HTML. jQuery is used for 1) DOM manipulation 2) Event Handling 3) Animation jQuery is a popular framework with a large community of developers using it and many plugins have been developed using it. While working using jQuery in our projects, we may encounter the following errors in common. 1) Uncaught TypeError: Cannot read property 'xxx' of undefined 2) Uncaught TypeError: 'xxx' is not a function 3) SyntaxError: syntax error 4) 404 Errors 5) Conflict errors You may also read Datatables-plugin options Ways to handle errors in JQuery Check whether JQuery is loaded. if (typeof jQuery == 'undefined') { // jQuery IS NOT loaded, do stuff here. } Check whether the custom script is loaded. Check for console errors. You may find anyone of the above errors. Try whether it is working in document is ready or after page loads or ...