Posts

Showing posts with the label Jquery

Using Angular-Datatables Notes

These notes are based on angular-datatables v 8.0.0   Using Angular Component In 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   './../../../datefor

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 PixKrh7Su5 Bootstrap 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. <div class = "panel panel-default" > <div class = "panel-heading" > <div class = "panel-title" data-toggle = "collapse" href = "#collapseOne" >

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 Exchange html5 - What's the difference between HTML 'hidden' and 'aria-hidden' attributes? - Stack Overflow Examples:  Edit fiddle - JSFiddle Better Passwords #3: Caps-lock Warnings — SitePoint Code 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 order lightbox for images, videos, YouTube, iframes, ajax deferred.always() | jQuery API Documentation .trigger() | jQuery API Documentation jQuery advantages/differences in .trigger() vs .click() - Stack Overflow jQuery BlockUI Plugin How to detect pressing enter on keyboard using jquery? - Stack Overflow jquery - Last element in .each() set - Stack Overflow jQuery event.preventDefault() not working in Firefox (JSFiddle included) jquery - Checking to see if AJAX response is empty and other problems javascript - jQuery's $(form).submit() not firing for IE only (MVC3 app) javascript - How can I refresh a page with

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. P

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* - G raphical dashboard on data provided from other modules. 2015 Coriell Institute. All rights reserved My Goals

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. Like Peanut Butter and Jelly!  Tools & Systems T

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.gith