Recently, I had come across a situation where I had to make 2 ajax calls sequentially, i.e. fetch address from GeoLocation API and send it to Fedex API for fetching the transit time. For this, I needed to convert the address from GeoLocation in particular format using loop to send it to Fedex. Initially, I used '$.each()' method of jquery on an address array to convert it in desired format. This is common approach that we follow and it took 1.12ms for the processing. I wanted to reduce this processing time. After a bit of research,

Introduction Image Cache is JS library used to provide a nice interface for locally storing images for offline apps using PhoneGap/Cordova. This library is especially useful for mobile web applications using Phonegap/Cordova where image becomes stale (invalid) after normal offline navigation. therefore in this case we can not relied upon Normal Cache. So by using image cache we can store images in the cache and replace the stale version of normal cache with fresh version of image cache. This is the best solution I have found so far to provide easy caching of images within a Cordova web

Active Admin is a great plugin that helps us to get administration functions with elegant and simple interface up and live quickly without much of a hassle or efforts. One can also make use of various customisations as per their need with very little effort. In this article, I will be explaining how we can add custom search bar in Active Admin. Adding custom search bar is not as easy and straight forward as other Active Admin customisations. I will be making use of jQuery to do this. Here, I will be taking an example of searching resources with tags

Few days back, we were facing problem establishing communication between a Webview control and a Titanium UI or vice versa. We were integrating Facebook authentication in our Titanium mobile app using Titanium Facebook mobule where we stumbled upon this issue. We wanted to trigger FB Auth Titanium module specific code on click of an HTML Login button tied with a jQuery click event. The FB auth module checks if Facebook mobile app is installed on the device and opens this mobile app for authentication otherwise it opens the browser window popup and redirects to Facebook site to authenticate. This is

In our current app we are using kalendae datepicker plugin. Lately, we wanted to add a 'today' button that is visible to the user in all the datepicker popovers(used for numerous date fields throughout the app). As the name suggests on clicking this button, the current date gets selected and is displayed in the corresponding field. Github link of kalendae - https://github.com/ChiperSoft/Kalendae We can do this by writing function to add button in popup and then we can use it wherever we need. function setTodaysDate(kalendae_popup){ var inputToAdd = $("", { type : "button", id : "set_today_date"

Recently we have used WebUI-Popover plugin in Active Admin. It is a lightWeight popover plugin with jquery. It can be use with bootstrap, but bootstrap is not necessary! Browser compatibility for this plugin is ie8+,Chrome,Safari,Firefox,Opera. We need jquery1.7.1+ for this. Steps For adding WebUI-Popover are: Download from https://codeload.github.com/sandywalker/webui-popover/zip/1.1.2 Extract zip folder go into src folder copy jquery.webui-popover.css this file and paste in app/assets/stylesheets of your project. Same for jquery.webui-popover.js paste in app/assets/javascripts in your "active_admin.

Yesterday I was working on one of our portal (It's in Ruby on Rails and we have used quite alot jquery as well). Was integrating a nice Photo Gallery plugin on one of the page. Applcation is having many pages. Every page has some different behaviour and we have different jquery calls for that as per need. For a performant application, we always want to avoid any unwanted calls to different methdods/functions. In my case, as I mentioned earlier I wanted to show Photo Gallery on a page and photo gallery loads as soon as page is loaded. Gallery

Easy way to create a numeric input, which accepts only numbers (i.e. 0-9 and no other characters). app/components/numeric-input.js import Ember from 'ember'; export default Ember.TextField.extend({ tagName: "input", type: "number", attributeBindings: [ "name", "type", "value", "maxlength", "id" ], keyDown: function(e) { var key = e.charCode || e.keyCode || 0; // allow enter, backspace, tab, delete, numbers, keypad numbers, home, end only. return ( key === 13 || key === 8 || key === 9 || key === 46 || (key >= 35 && key = 48 && key = 96 && key And in your template, call it as {{numeric-input value=mobilePhone name="mobilePhone" id="mobile" maxlength="8" }} As the number input displays up

Timeago is a widely used jQuery plugin which makes it easy to support automatically updating timestamps. (ex: 2 minutes ago) plugin documentation: http://timeago.yarp.com/(link) Now we will see how to integrate timeago jquery plugin in ember application. (Here we will give example using ember-cli) install jquery-timeago plugin using bower bower install jquery-timeago In Brocfile.js app.import('bower_components/jquery-timeago/jquery.timeago.js'); Create Ember Component to display time format app/components/time-ago.js import Ember from 'ember'; export default Ember.Component.extend({ timeValue: new Date(), didInsertElement: function() { Ember.$().ready(function (){ Ember.$('time.timeago').timeago(); // update every

Jquery.isotope.js A jquery plugin to organize the Grids and shuffle the grids automatically based on the height and width of the container. Advantages It has different layouts that we can use to organize the grids in the way we want. Also enables us to extend the existing layouts extensively to suite our needs. It allows us to filter the grids based on the properties of grid. eg: "All employees, Male Employees, Female Employees" We can also order the grids based on priorities. From the above example, we can order employees based on their age( Male Employees