UI:Ajax Library

From ExtractValue Wiki

Jump to: navigation, search

Contents

Pre-requisites

  1. What does the front-end engineer need to know about Centricity?
    1. Database, API, modules, etc.
  2. What does the front-end engineer need to do?
    1. Coding languages (try to not need the front-end person to do PHP)
    2. A lot of AJAX and JQuery
      1. JS Animation: Yellow fading text, fade in / fade out, inserting / removing DOM nodes, creating events, etc.
    3. How to extract JSON data and utilize Google's JST to transform JSON data to HTML markup
      1. http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
  3. What does Extract Value need to do?
    1. Recreate or duplicate some functionality for AJAX
    2. Figure out a JSON schema to notify client of success / failure with payload
    3. Provide any PHP logic required

Usage from Jenni

http://injenue.com/ui/

Rules

Specs

Tooltips

  • Tooltips remember when closed per network (requires boolean database table) 
* Get a T / F flag from PHP and either hide the DIV or not echo HTML for tool tip
* Ping server with a unique id for the tooltip with AJAX when user hits close button or hide

Generic Modal Popup

Auto-complete form

(multi-line auto complete like at www.wikinvest.com. we already have the script)

    • Find User
    • Find Group
    • Find Product
    • Find Portfolio 
* receive JSON from server with results and what kind of result it is
* use JST to style each result

AJAX Accordion 

* loads each tab on click of TAB, saves each tab and moves to next on SAVE)
* serialize and submit form data via AJAX
* perhaps set a form complete / incomplete flag so we can know status
    • Edit user profile
    • Edit group profile
    • Edit product profile
    • Edit portfolio

Adding/subscribing pop-up window

(loads database relationships on click, saves database relationships without page refresh)

    • Adding friend
    • Subscribing Group
    • Requesting promotion 
* modal confirmation box
* hit server with AJAX call
* provide visual notification to user (YFT)

Sorting table

  • needs to remember what you last sorted by
  • needs to remember the last filters

Div mouseover displays EDIT button

(must be SEO friendly--i.e., the div cannot be encapsulated in javascript) 

* hover over DIV event
* either enable/ disable form or swap out divs with view / form when edit is clicked

Dynamic e-mail validation

(checks on email validity like www.mint.com) 

* regex validation?

Upload file

(allows upload of file without navigating to a new page. displays image if appropriate on page refresh)

    • Upload avatar 
* not sure how to do this, but may require iframe and AJAX to request new image

Sending message

Does not require page refresh - like Facebook) 

* AJAX call
* visual update for user
  • loads database relationships on click

Fade-in/fade-out of links (like Basecamp)

  • e.g., "Subscribe to Group" fades to "Request Promotion" 
* YFT after an event

Sliding new content in (like Basecamp)

  • When adding comment 
* insert new DOM element into a comment container DIV

Fading new content in (like Basecamp)

Expanding Textarea

  • A text box will extend (get longer) as more lines are used
    • Example: Basecamp comments or Facebook message box

AJAX sliders for filters

  • on an INT() column (like www.sidestep.com)
    • Some params that might be needed:
  1. Min value
  2. Max value
  3. Interval low
  4. Interval high
  5. If not interval the value
  6. Integers or real numbers
  7. Label of slider
  8. Width of slider
  9. Heigh of slider 
* should be a part of the JQuery library

Inline menus

  • Like Facebook's update image profile

Category Tree

[–] Category:UI
UI
UI:Ajax Library
UI:CSS
[–] Category:Libraries
UI:Ajax Library
Validation Library
Retrieved from "http://wiki.extractvalue.com/index.php/UI:Ajax_Library"
Personal tools