Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Rails REST & AJAX JS library with (PHP|.+)

Using Rails REST & AJAX JS library with (PHP|.+)

How to use RubyOnRails jQuery-uJS library with any PHP project.

Junior Grossi

April 29, 2017
Tweet

More Decks by Junior Grossi

Other Decks in Technology

Transcript

  1. Using Rails REST & AJAX JS library with (PHP|.+) Junior

    Grossi 10th PHPMG Talks @ThoughtWorks - Apr 2017
  2. About Me PHPMG group organizer Software Engineer at InterNACHI (PHP/Laravel)

    Creator of Corcel PHP Master's in Information Science - UFMG 2015 Specialization in Web Developmenet - PUCMG 2013 MBA in Business Management - FGV 2009 Bachelor's in Computer Science - PUCMG 2007 Zend Certi ed Engineer - 2011
  3. The magic behind R u b y O n R

    a i l s [how it works]
  4. n p m i n s t a l l

    j q u e r y - u j s
  5. AJAX with d a t a - r e m

    o t e on < f o r m > < % = f o r m _ f o r @ u s e r , r e m o t e : t r u e % > < f o r m a c t i o n = " / u s e r s " m e t h o d = " P O S T " d a t a - r e m o t e = " t r u e " >
  6. AJAX with d a t a - r e m

    o t e on < a > < a h r e f = " / u s e r s / 1 0 / a c t i v a t e " d a t a - r e m o t e = " t r u e " > A c t i v a t e < / a >
  7. AJAX Response j s o n or h t m

    l j a v a s c r i p t d a t a - t y p e = " s c r i p t "
  8. AJAX Call d a t a - r e m

    o t e = " t r u e " d a t a - t y p e = " s c r i p t " < f o r m a c t i o n = " / u s e r s / 1 0 " m e t h o d = " P U T " . . . >
  9. Live code #1 S e r v i c e

    P r o v i d e r r o u t e s / w e b . p h p and T a s k s C o n t r o l l e r c r e a t e . b l a d e . p h p and s t o r e . b l a d e . j s a c t i v a t e . b l a d e . j s d a t a - d i s a b l e - w i t h
  10. h t t p : / / u r l

    . j g r o s s i . c o m / p h p m g t a l k s 1 0
  11. RESTFUL routes < a h r e f = "

    . . . " d a t a - m e t h o d = " d e l e t e " d a t a - r e m o t e = " t r u e " > D e l e t e < / a > d a t a - m e t h o d = " D E L E T E "
  12. Live code #2 i n d e x . b

    l a d e . p h p d e s t r o y . b l a d e . j s
  13. Con rmation Dialog d a t a - c o

    n f i r m = " A r e y o u s u r e ? "
  14. Live code #3 Like Action a c t i o

    n s . b l a d e . p h p
  15. Summary d a t a - r e m o

    t e for AJAX d a t a - t y p e for Response d a t a - m e t h o d for REST method d a t a - d i s a b l e - w i t h when submitting d a t a - c o n f i r m con rmation dialog d a t a - p a r a m s request parameters
  16. d a t a - p a r a m

    s = " f o o = b a r & j o h n = d o e " < a h r e f = " / s a y - n a m e " d a t a - p a r a m = " n a m e = j u n i o r " . . > < a h r e f = " / s a y - n a m e ? n a m e = j u n i o r " . . >
  17. Tip for AJAX loader $ ( d o c u

    m e n t ) . a j a x S t a r t ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . a d d C l a s s ( ' i s - l o a d i n g ' ) ; } ) . a j a x S t o p ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . r e m o v e C l a s s ( ' i s - l o a d i n g ' ) ; } ) ; $ ( d o c u m e n t ) . a j a x S t a r t ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . c l o s e s t ( ' . l o a d e r ' ) . s h o w ( ) ; } ) . a j a x S t o p ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . c l o s e s t ( ' . l o a d e r ' ) . h i d e ( ) ; } ) ;