Posts

Showing posts with the label Jquery

Using Angular-Datatables Notes

These notes are based on angular-datatables v8.0.0
Using Angular ComponentIn order to get a angular component say to run you need to create the code in the same scope. That's how I managed to get it running. So for example you have to create a model via angular and attach it to a jquery event. What your doing is in the definition of the datatable is passing the logic in at that point on how to run.import { Component, OnDestroy, OnInit, ViewChild, AfterViewInit } from'@angular/core';import { Meta, Title } from'@angular/platform-browser'; import { HttpClient } from'@angular/common/http'; import { NgbDateStruct, NgbModal } from'@ng-bootstrap/ng-bootstrap'; import { formatDate } from"@angular/common"; import { DataTableDirective } from'angular-datatables'; import { Subject } from'rxjs'; import { NgbDateFRParserFormatter } from'./../../../dateformat'; import { MRPDetailComponent } from'../MRPDetail/MRPDetail.component'; i…

Bootstrap3 - Radio Nested/Collapsible

Last year I create a login page which I'm very happy to say I built it just how I wanted it. A rare thing if you've ever had to deal with management. Since the page only existed within sharepoint I want to keep things simple. So I went with jquery 2.x and bootstrap 3.3.7. Oldies But Goldies; so a few things I didn't want to create a lot of jquery code. So I had to really use the bootstrap collapsible component as much as I could without breaking it.

Examples
Bootstrap PixKrh7Su5Bootstrap Fdjc8kQiER
Disable collapse for link in a data-toggle element
You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer. <divclass="panel panel-default"><divclass="panel-heading"><divclass="panel-title"data-toggle="collapse"href=

Custom Login Validation

One of the many behaviors that I was asked recently to create was to allowing hide/show of the password and warn users that the locked character key is active. Since this solution could get complex and I just wanted to create a quick/simple demo and because of that I'm going to pick jquery. I could late come back and do it in another library but I already have a few ideas what I want to do.

Notes:
input - Is it standard practice to indicate on the form that Caps Lock is on? - User Experience Stack Exchangehtml5 - What's the difference between HTML 'hidden' and 'aria-hidden' attributes? - Stack Overflow
Examples: 

Edit fiddle - JSFiddleBetter Passwords #3: Caps-lock Warnings — SitePointCode Bins : Password masking in jQuery

Jquery Cheatsheet

Time to time I still use jquery and honestly don't have too many complaints about using jquery over more modern frameworks. Either way keep coming back to this page for reminders or small bugs in my code that I forget to add. I think the best approach for anyone is to create plugins for their needs and just keep expending around that.
Javascript - Event orderlightbox for images, videos, YouTube, iframes, ajaxdeferred.always() | jQuery API Documentation.trigger() | jQuery API DocumentationjQuery advantages/differences in .trigger() vs .click() - Stack OverflowjQuery BlockUI PluginHow to detect pressing enter on keyboard using jquery? - Stack Overflowjquery - Last element in .each() set - Stack OverflowjQuery event.preventDefault() not working in Firefox (JSFiddle included)jquery - Checking to see if AJAX response is empty and other problemsjavascript - jQuery's $(form).submit() not firing for IE only (MVC3 app)javascript - How can I refresh a page with jQuery?http://jsfiddle.ne…

UI Design for Processing Modals

Image
Dialogs, Light boxes, and Modals whatever you call them are a common interface used in websites. When I started out I constantly had to write code to handle multiple situations. After writing a few I started to list a few behaviors I think should happen in/after a modal close. Without going to deep in an explanation I really just wanted to come up with a good way to include offline mode in my applications.
Rules Not all of them but just some examples, the image is a better example. Every action must give imitate feedback to the user (results can be async). I.E. "Buy" will convert to "Processing" Information should be logged and stored for users to retrieve it. Applications Types of applications these I thought of. Ecommerce quick way to buy Settings in a Dashboard Post back or User session stored variables. Social Media Log ins When attaching or connecting to main site account. Pretty much any modal that modifies back-end data.

My Career at Coriell Institute and Personal Achievements

Image
The time has come where I need a change in my career and sadly that requires me to leave my current position at Coriell Institute. So just like what I did way back in 2013 with Northern Safety, I thought I would wrap things up in an article and look back on my achievements. 
Achievements (Order of Completion)
The ones with asterisks are ones I built in groups. 
Atlas Project - Storage Module -Provided an interface to store unique data sets in multi-forms.Coriell Bio-Repository Catalog* Atlas Project - Manager Module - Provided managers to control other user to access data.Blits Project - Modules  Issues & Repairs* - Reported equipment  that were broken or had problems.Inspections* - Collected equipment w/ schedules for inspections. Maintenance - Collected equipment  for regular maintenance and setup schedules. Dashboard* - Graphical dashboard on data provided from other modules.My Goals and Plans While attending Coriell, I had a lot of plans to bring the Front-end at Coriell on t…

The New Way to Create Jquery Plugins Using Grunt & QUnit

Image
This is my take on the Jquery basic documentation for creating a plugin. There are a lot of new ways to create a jquery plugin and even more frameworks to replace jquery altogether. However I found myself at that point where the scope of the project was limited in a framework but had large enough components that could separated into plugins. I've removed all the business logic and now just want to create a very scalable plugin.

Example Project & Setup
With my Jquery Plugin, I'm using Nodejs and continuous integration to do the heavy lifting. All I'm doing is taking a selected element from the caller and determine if it already has a table. Then if it does attach data to provided url's from the developer. Simple enough but there more to it, I just simplified the explanation incase people want to skip over this part and others who are interested can just read more about the plugin on github.

Tools & Systems
Travis-ciNodejs packagesgrunt/grunt-clijshintqunitJs …

AngularJS: Select All Checkboxes

There were very few examples I found on this idea however most of them were not complete or depended on libraries were not included in my projects. I could simply include them and call it a day but that would be too easy. So I took the best example I could find and rewrote it in just AngularJS.

Code:
$scope.items = [ {item:1, flag: true}, {item:2, flag: true}, {item:3, flag: true }]; $scope.allNeedsClicked=function () { var newValue =!$scope.allNeedsMet(); for (var i =0; i <$scope.items.length; i++) { $scope.items[i].flag = newValue; } }; $scope.allNeedsMet=function () { var needsMet = []; for (var i =0; i <$scope.items.length; i++) { if ($scope.items[i].flag ===true) needsMet.push(true); } console.log($scope.items.length, needsMet.length); return (needsMet.length===$scope.items.length); };

Solution: https://fassetar.github.io/blog-examples/angularjs-select-all-checkboxes/

Notes
I should probably put this in a direct…