javascript

Creating a simple search page in Ionic 2 application

An ionic search bar can be created to bind to a model so that when ever there is any change in that element will emit an input change. (ionInput) attribute callback will be triggered. In this below example we are going to create a search page to list a list of topics that can be filtered using search bar

Add below code in .html file

Drupal 7: Adding Drupal set messages using PHP(drupal_set_message()) and Javascript:

In Drupal messages are printed using the PHP function drupal_set_messages(). This article will discuss the adding message to page through the PHP as well as Javascript. The normally the set message will create a div HTML wrapper for display the messages. Using the classes of the set message we can display the Error/Status/Warning message to the end users.

A pull down effect (pull-to-refresh functionality) to load asynchronous data in ionic 2.

We are going to use "ion-refresher" which comes by default in Ionic. This can be achieved by adding the "ion-refresher" as a child to the "ion-content" HTML. Create a callback function for "ionRefresh" at the respective typescript file. The pulling icon and the spinner is provided by default at the refresher.

Theme Ionic 2 Application - Customize and modify default theme layer of ionic application

Ionic is built on top of Sass, which allows us to set some default styles. SASS is nothing but a "CSS preprocessor" which is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Some examples of CSS preprocessor include: Sass, LESS etc.

Bidirectional Relationship Support in JSON

Ever tried to create a JSON data structure that includes entities that have a bidirectional relationship (i.e., circular reference)? If you have, you’ve likely seen a JavaScript error along the lines of “Uncaught TypeError: Converting circular structure to JSON”. Or if you’re a Java developer who uses Jackson library, you may have encountered “Could not write JSON: Infinite recursion (StackOverflowError) with root cause java.lang.StackOverflowError”. This article provides a robust working approach to creating JSON structures that include a bidirectional relationship without resulting in these errors.

A brief introduction on AngularJS

AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications. If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.
AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. You can also create your own directives, crafting reusable components that fill your needs and abstracting away all the DOM manipulation logic.

AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications. If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.
AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. You can also create your own directives, crafting reusable components that fill your needs and abstracting away all the DOM manipulation logic.

Document and window click event not works in iPhone and iPad as expected

$(document).click(function (e) {}); or $(window).click(function (e) {}); will work perfectly on IE, Firefox and Chrome. But it won't work in iPhone and iPad Safari except some elements. Since by default "DIVs" are not "clickable" elements we have to makes iOS treat it as clickable. The problem is iPhones dont raise click events. They raise "touch" events. A small work around is to make the element clickable using CSS. So you need to add

Drupal 8 : Programatically Enabling/Disabling Javascript Local storage for Drupal 8 Forms

Using the help of JavaScript we can able to store the values at browser(local storage). In Drupal 8 core "form.js" file help to maintain form local storage. This can be achieved by sitting boolean value to form key 'data-user-info-from-browser'. The below sample code show how to form variable to save in local storage.