CodeIgniter and Ajax Using JQuery Tutorial

CodeIgniter and Ajax Using JQuery Tutorial | little brain

http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/

LITTLE BRAINHOM E ABOUT ARCHIV ES

1 of 15



CodeIgniter and Ajax Using JQuery TutorialI created this tut orial becaus e I w as hav ing a hard ti me finding good si mple CodeIgniter + JQuery tutori al for new bie like me. The one I found, created by MR Forbe s, is hard to underst and and apparent ly is nt w orki ng. Anot her one, pr0di gys , i s usi ng Mooto ols for the AJAX frame work. So I dec ided t o c reate my ow n CodeIgni ter and JQ uery tutorial based on pr0di gys tutorial. Im as suming y ou already kno w how t o c ode usi ng CodeIgniter. If youre new t o C odeI gnit er, you need t o fi nd others tutori al fi rs t. The videos gi ven in C odeIgnit ers si te is a good st art. This t utoria l is abo ut creati ng simple C ode Igni ter + databas e + ajax sy stem. Us er will be shown a form t o post a mess age. Then af ter he/she press the submit button, the s yste m wi ll s ave the mes sage us ing ajax and t hen sho w the mes sage. You c ould s ee the result firs t i f you wa nt. Data ba se The firs t t hing w e need to do i s c reating a t able to s ave the mes sage. For thi s tutori al, W e w ill use this: 1 CREATE TABLE IF NOT EXISTS `messages` ( 2 ` i d` t i n y in t ( 4 ) NO T N U L L A U T O _ IN C R E M E N T , 3 ` m es s a g e ` V A R C H A R ( 2 5 6 ) N O T N U L L , 4 P R IM A R Y K EY (`id`) 5) Controller Then, w e need to creat e a co ntrolle r. My c ontrolle r is named m e s s a g e . You could name y our cont roller a ny name y ou li ke. After that , c reate 2 func tions/methods , v ie w and add. view is us ed to get the defa ult vi ew and lis t o f messa ges from the databas e. The codes are: 1 f u n c ti o n v i ew ( $ t y p e = N U L L) 2 { 3 // get data from database 4 $ d a t a [ ' m e s s a g es ' ] = $ t h i s - > Me s s a g e _ m o d e l - >g e t ( ) ; 5 6 i f ( $ ty p e = = " a j a x " ) / / l o a d i n l i n e v i e w f o r ca l l f r om a j a x 7 $ t h i s - > lo a d - > v i e w ( ' m e s sa g e s _ l i s t ' , $ d a t a ) ; 8 e l s e // l o a d t h e d e f a u l t v i e w 9 $ t h i s - > lo a d - > v i e w ( ' d e f au l t ' , $d a t a ) ; 10 } W e fetch messa ges from the databas e using M es s a g e _ m o d e l - > ge t ( ) functio n. Then the data is pas sed to the vi ew. Here, w e have 2 view s calle d. O ne for the default vi ew, w here we c alled the page using m e s s a g e / v i e w , a nd the other i s for calling from ajax. add is a proc cess used to insert the mes sage to the databas e. The codes a re : 1 f u n c t io n a d d () 2{ 3 / / i f H T T P P O S T i s se n t , a dd t h e d a t a t o d a t a b a s e 4 i f ( $ _ P O S T & & $_ P O S T [ ' m e s s a g e '] ! = N U L L ) { 5 $ m e s s a g e [' m e s s a g e ' ] = $t h i s - > i n p u t - > xs s _ c l e a n ( $ _ P O S T[ ' m e s s a g e ' ] ) 6 $ t h i s - > M es s a g e _ m o d e l - > a dd ( $ m e s s a g e ) ;

2 of 15



7 8 9}

} else r e d i r e c t (' m e s s a g e / v i e w ' );

This f unct ion is ac cess ed when we pres s t he submit button from t he form. Thi s func tion w ill sav e t he mess age usi ng M e s s a g e_ m o d e l - > a d d ( ) functi on. Model The next thing we need to c reate is the model. I us e M e s s a g e _ m o d e l fo r the name. Here w e c reate tw o functi ons , add and get. add i s a f unct ion to insert the data i nto the dat abase. get i s a func tion to retri eve data from databas e. I thi nk the co des are pretty s elf-e xplainatory, but yo u c ould drop me a mes sage if you nee d s ome expla inati ons on the c odes. 1 f u n c t io n a d d ($ d a t a ) 2{ 3 $ t h i s - > d b - > i n s er t ( ' m e s s a g e s ' , $ d a t a ); 4} 1 f u n c t io n g e t ($ l i m i t = 5 , $ o f f s e t = 0 ) 2{ 3 $ t h i s - > d b - > o r d er b y ( ' i d ' , ' D E S C ' ) ; 4 $ t h i s - > d b - > l i m it ( $ l i m i t , $ o f f s e t ) ; 5 6 r e t u r n $ t h i s - > d b - > g e t (' m e s s a g e s ' ) - > re s u l t ( ) ; 7} View I use 2 files for view secti on. d e f a u l t. p h p and m e s s a g e _ l is t . p h p . The m e s sa g e _ l i s t is used f or displa yi ng the messages take n from the dat abase. 1 < ! - - d e f a u l t .p h p - - > 2 < d i v i d = " f o r m" > 3 < i n p u t t y p e = " t e x t " i d = " m e s s a ge " n a me = " m e s s a g e " / > 4 < i n p u t t y p e = " s u b m i t " i d = " s u b mi t " n am e = " s u b m i t " v a l u e = " s u bm i t " / > 5 6 < d i v i d = " c o n te n t " > 7 < ? p h p $ t h i s - >l o a d - > v i e w ( ' m e ss a g e s _ l i s t ' ) ? > 8 9 1 < ! - - m e s s a g e _l i s t . p h p - - > 2 3 < ? p h p f o r e a c h ( $ m e s sa g e s a s $ m e s s ag e ) : ?> 4 < l i > < ? = $ m e s s a g e - > m e s sa g e ? > 5 < ? p h p e n d f o r ea c h ? > 6 He y, W heres the JQuery? He re w e go. The last, and maybe the most important part of this tutorial. So, we the our c ontrolle r, w e had the model, and we had the view s. I assume you alrea dy kn ow how t o i nclude a jq uery sc ript to your v iew. The jquery code s a re thi s: 1 $ ( d o cu m e n t ) . r e a d y ( f un c t i o n ( ) { 2 $ ( ' # s u b m i t ' ) . cl i c k ( f u n c t i o n ( ) { 3 4 v a r m s g = $ ( ' #m e s s a g e ' ) . v a l ( ); 5

3 of 15



6 7 8 9 10 11 });

$ . p o s t ( "< ? = s i te _ u r l ( ' m e s s a g e /a d d ' ) ? > " , { me s s a g e : m s g } , f u n c t i o n $ (' # c o n t e n t ' ) . l o ad ( " < ? = s i t e _ u r l ( ' m e s sa g e / v i e w / a j a x ' ) ? > " ) $ (' # m e s s a g e ' ) . v a l( ' ' ) ; }); });

So , w hen w e cli ck the s ubmit but ton, the javasc ript w ill take the v alu e o f i nput text box then send i t t o m e s s a g e / a d d us ing post met hod. W hen the act ion suc ceed, the s cript w ill call m e s s a g e / vi e w / a j a x . Note the a j a x keyw ord. It wi ll c all t he m es s a g e _ l i s t v iew i nst ead of the default one . Then the vi ew w ill replace the content in d i v # c o n t e n t tag. W ell done. Yo u c ould see the demo I made from the t utoria l. You could dow nload the w hole f ile s used in t his tutorial i n tutori al. zi p (1.98 KB). Or, if yo u prefer to get one by one, cont roller: mess age (904 byt es) model: mes sage model (583 bytes) view : defa ult (782 by tes) view : mes sage_ lis t (111 byt es) I hope thi s tutori al helps ne wbi e like me. If you have any questio n, jus t drop a comment be lo w Update: N eed how to d o this usi ng JSON ? C heck C odeIgniter an d Ajax U si ng jQu ery tu to rial usi ng JSON .

-- M ay 27, 2008 10:28 pm ajax, ci, codeigniter, jquery, tutorial shor tlink 146 Comments

2 0 p eo pl e li ke d t hi s.

Add New CommentType your comment here.

Showing 79 of 80 commentsSort by Sub scri be b y e mail Sub sc ri be b y RSS

T ha nks! K ee p up the go od wo rk! Us e ful tu tori al !1 pe rson liked thi s.

4 of 15



wow th an ks fo r thi s. .. h tt p:/ /ba byd esert wol f.b lo gspo t.. .3 peop le liked thi s.

wow, a mazin g~ h ah a: D1 pe rson liked thi s.

im so rry. bu t th e d emo versi on, it s won t sho w u p. t he re i s a some tro ubl e wi th t he l in es of co de . pl ea se he lp me to sho win g up the de mo ve rsio n. : )5 peop le liked thi s.

ve ry n ice a nd usefu l t uto ri al ... ... ... ..T han ks!2 peop le liked thi s.

Yes. T ha t's g oo d.

I wou ld hi gh ly recommen d cha ng in g yo ur f un ct io n (met ho d) fr om the na me 'v i ew' t o th e na me 'd ispl ay' as it wo ul d most li kel y cau se le ss co nf usio n as vi ew i s t he n ame g iven to di sp la yi ng vi ews in the MVC p at tern . If yo u ch an ge d i t, i t wou ld b e l ike th is: To l oa d a vi ew, t he ca ll i s $ th is->l oa d-> vi ew('we lcome'); To l oa d you r di sp la y: $th is-> di sp la y( ) ; Le ss co nf usin g whe n you are n't usi ng a CI meth od na me for yo ur fu ncti on s.Ivan I van i and 3 mo re li ked this

+11 pe rson liked thi s.

For t he li fe o f me, I do n ot kn ow. via ge ra Iowa Go od j oke : ) Why di d th e Ind ia n wea r a wig ? To ke ep hi s wig wam.2 peop le liked thi s.

th ats la me .. ..I ho pe you are over 5 0 ye ar s o ld ... even t he n it s sti ll pre tty la me

5 of 15



th is guy is in sane

Ve ry n ice a nd u se fu l tu to ria ls to we b d esig ne rs, T ha nks f or p osti ng.2 peop le liked thi s.

Anyb ody fi gu red ou t why thi s d oe sn 't work pro pe rl y on Inte rne t Expl ore r? (I'm u si ng IE8 a nd it sti ll do esn't wo rk) . T he pro bl em is tha t th e very FIRST in pu t to t he for m g ets di sp la yed, bu t se co nd , th ir d or an yt hi ng a ft er th at d o n ot g et r e-l oa de d on to t he me ss ag e- li st vi ew. Ho wever, the da ta g et s in se rte d i nto da tab ase f in e. It wo rks o n Fi reF ox.2 peop le liked thi s.

hi Di ne sh, yo u cou ld cre at e an ot he r vi ew fo r for m, an d ch an ge the add f un ct io n in co nt rol le r to so meth in g l ike th is: fun tion a dd( ) { $ this ->l oad- >li brar y(' form _va lida tio n'); i f ($th is- >for m_v alid ati on-> run () === F ALS E) { $th is-> loa d->v iew ('ad d_f orm' ); } e lse { // ad d to da taba se } }

th en you ca ll the ad d fu ncti on vi a jq ue ry t o sho w t he f orm.2 peop le liked thi s.

th e de mo do esnt wo rk1 pe rson liked thi s.

dd dd dd d

6 of 15



th anks for sha ri ng such a ni ce art icle .1 pe rson liked thi s.

h ttp :// fre e-3 x.com/ fre e-3 x.com/ fre e-3 x.com1 pe rson liked thi s.

st art le arn in g capt ch a man . spa mme rs h ere

For t ho se who a re h avin g th e IE pro bl em, h ere i s t he fix. T he issu e i s i n re gar ds to IE ca ch in g a nd e ach t ime i t at temp ts t o l oad th e "d iv" gi ve n th e URL, i t th in ks it 's lo ad in g th e same con te nt. So, a qu ick f ix wou ld b e t o "con fuse" IE th at e ach t ime you post a co mme nt, it i s a new URL we a re re -lo ad in g. And we ca n ach ie ve t hi s b y g ivin g a ra nd om in te ge r att ache d to th e en d of the URL. Here 's th e cod e :

$(d ocume nt) .re ady(f un ct io n() { $('# su bmit ') .cli ck(fu ncti on () { va r msg = $('#me ssag e'). va l(); va r lo ad _u rl = "? ra ndo m=" + M ath .ra nd om()*9 99 99 ; $. post( "", {me ssag e: msg}, fun ct io n() { $('# co nte nt ') .lo ad (l oad _u rl ); $('# messag e'). va l(''); }); }); });

Hop e th at h el ps. Yo u can al so alwa ys use j Que ry' s "ap pe nd( )" meth od to re -l oad th e pa ge , somet hi ng l ike ... $('# co nte nt ') .ap pe nd ('ne w commen t th at wa s j ust p osted .. .! '); ...1 pe rson liked thi s.

Hi, I rea ll y n ee d you r hel p. I am usi ng cod e i gn it or fo r CRUD. Do you i nclu de jq eu ry l ib i n ea ch of you r vi ew scr ip ts. i j ust ad de d an on cl ick e vent for a hre f l in k an d i n js i a m po pp in g up an a le rt b ox, i t do estn t work. T ha nks1 pe rson liked thi s.

7 of 15



T ha nks f or p osti ng t hi s, b ut nei th er d emo n or cod e wor ks co rre ct ly wi th Ie6. It was rep ort ed ear li er b ut n ot a nswere d. Wha t mig ht b e th e re ason ? Af ter l oa di ng the pa ge i t i s po ssib le on a dd an d show o ne n ew re co rd. Aft er th at su bmit d oe sn't ch an ge scre en ap pe ran ce bu t sh own n ew re co rd a fte r br owser re fre sh (bu t th at n ot t he wa y t o use i t). .. Any ad vi ce?1 pe rson liked thi s.

Go od tut ori al , b ut i ca n't do wnl oa d th e f il es. an d i can 't rea d t he cod e o f th e vi ew f il es1 pe rson liked thi s.

Yo u re al ly sh ou ld be mo re care fu l. Yo u're n ot val id at in g an y u se r in pu t! T h is is da ng ero us! Yo u sho ul d re al ly take a way th e de mo be for e an y d amag e i s d on e.1 pe rson liked thi s.

ni ce art icel ..i 've impl eme nte d, a nd it wo rks. .th x.. bu t, can yo u wri tin g a rti ce l a bo ut CI + aj ax + th ickb ox or Ci + aj ax + ext js.. in si mple ca se , can yo u exp la in h ow to in se rt d ata to d at ab ase wit h JQu ery aj ax th en lo ad moda l b ox wit h th ickb ox, a ft er th at t he dat a l oa d to e xtj s g rid th x he al thd ict. bl og sp ot .com1 pe rson liked thi s.

Not wo rk o n i e61 pe rson liked thi s.

hi Leo , th e co de is workin g. t he $('# sub mit' ).c lick () i s a n on cl ick even t wrap pe d usi ng jq ue ry l ib rar y. t he d emo wo rks :)1 pe rson liked thi s.

th anks for t he r ep ly... he re i s a not he r qu esti on . i h ave be en fig ur e it for 2 da ys. fo r php req ui re_ on ce , i nclu de ... i can t use b ase_ url () or B ASEPAT H. no t su re wh at h ap pe n he re ... i d id i t same wa y as ho w i do wit h th e ja vascr i pt . ca n h el p me wit h th at ? th anks...1 pe rson liked thi s.

8 of 15



fo r thi s p art ... $(d ocume nt) .re ady(f un ct io n() { $('# su bmit ') .cli ck(fu ncti on () { va r msg = $('#me ssag e'). va l(); $. post( "", {me ssag e: msg}, fun ct io n() { $('# co nte nt ') .lo ad ("") ; $('# messag e'). va l(''); }); }); }); ho w cou ld i a dd mo re el eme nt t o it ? yo u a re usi ng j son wa y ?1 pe rson liked thi s.

th e li nk works. be for e th is i fo un d th at wh en the URL li ke: lo ca lh ost/ co de ig ni ter /in de x.ph p/ messa ge /vie w whe n it got an oth er / a ft er i nd ex.p hp th en i ha ve t o i nclu de e xtra "../ " to t he o ri gi na l ".. /j qu ery.j s". if l oca lho st/cod ei gn it er/ in de x.ph p/me ss ag e/ vi ew/ an oth er / beh in d vie w. th en i ha ve i ncl ud e ".. /.. /" to th e in cl ud e l in k. bu t yo ur r efe ren ce li nk so lve t he p ro bl em. it h el p l ots.. .. . th anks lo ts...1 pe rson liked thi s.

T ha nks f or th e t uto ri al , bu t ho w d o I ch an ge t he u ri seg men t (3) t o a tta ch co mme nts to a pa rti cu la r ph ot o? No t pri nt an yt hi ng b ecau se I can n ot f in d th e vari ab le

T ha nk yo u :)

asda sd

ve ry n ice t ha nks : )

9 of 15



T ha nks d ud e

is th ere a ny way i can ma ke co mme nts sys te m l ike fa ce bo ok whe re on ever y po st i can su bmi t th e co mment or do u kn ow a ny kn ow tu tor ia l to p ost commen t on sa me pa ge a s yo u h ave in yo ur b lo g, i wil l b e ve ry tha nkfu l

I a ppr ecia te you r tu to ria l. . Rea ll y very he lp fu l fo r a cod ei gni te r la mer li ke me! ;- ) T ha nk yo u so much, ma n.

tn xs! ;) ver y n ice tu ts! ke ep it comi ng ... ; )

T ha nks. . ni ce tu to ria l. .

th anks for t he t ut s! ver y he lp li ke us! more p owe r mate !

th is is a gre at tut ori al .. ..b ecau se rea ll y p ut a rea l case fo r th e tu to ria l. ..t ha nks fo r sha rin g th is...

ni ce ..

th anks..

As a ne wbi e I g et a s much o ut o f wi tne ss i ng t he p ro s th in ki ng pro ce ss as I d o see in g th e ne w cod e i tsel f e ve n d uri ng mi st akes or d eb ugg in g.

10 of 15



Dud e , th an ks .. . it wa s kin da in ter esti ng . It s al ways h el pf ul to h ave a simp le tut ori al . Becau se we ha ve issue s un de rsta ndi ng th e , simpl e th in gs no t th e compl ex.

Fi x o rto gra ph y p le ase!

Ve ry n ice a rti cl e. T ha nks fo r shar in g th is! .. .

Hel lo : ) I'm usin g th is with a te xtar ea b ox. If my t ext ha s mo re th an on e li ne it re fre shes th e who le pa ge i nste ad of u si ng aj ax it se lf . Wha t i s th is ab ou t?

Type you r comment he re. htt p: //d isqu s. co m/commen ts/

Com me nt r em oved .

it sh oul d b e tr ivia l. < sc ri pt src="/ pat h/ to/ jq ue ry.js" type ="t ext/ ja va sc ri pt" > wi ll do : )

hi hi hi , tks

Go od tut ori al ! Con gra tu la ti on s!

11 of 15



de mo ve rsio n no t sho w u p. ..

it 's worki ng n ow, so rry f or t he i ncon ve ni en ce :)

th anks a lo t. wo rks fi ne !

Gr ea t tu tor ia l! T h an you !

I a m a b ig ne wbie . Wh ere do yo u pu t th e j que ry co de ? T ha nks!

why don 't lo ad vi ew in yo ur con tro ll er ?

Hey Gr ea t CI/ Aja x t ut ori al , keep up the go od wo rk ; )

T ha nk yo u. . Your t ut ori al in sp ire d me. .

rea ll y n ice, th an k you

sh ou ld rea ll y e sc ap e you r in pu t.. .

T ha nks!

12 of 15



T hi s wa s j ust wha t I n ee de d fo r a li tt le app li cati on I was worki ng o n. M uch a pp reci ate d.

Hi, Br ia n whe re t he $ type va ria bl e i s set? fu ncti on vie w($t yp e = NUL L) { ... if ( $type == "a ja x") // l oa d-> vi ew('messag es_l ist', $d at a); ... . } In yo ut cod e i t do es no t ap pe ar a nymore. is it set by j qu er y?

go od t ut ori al . br ing me so me li gh t: ). th an ks

Gr ea t tu tor ia l! T h an ks , hu ge he lp . On e t hi ng t ha t I'm not ici ng o n my sit e i s th at o nl y t he f irst i np ut r egi ster s. If I p ut in mo re, th ey g et in se rte d in to the DB b ut the li st doe s n ot u pd at e, I ha ve t o re fre sh the web p ag e to see th e ne w ent rie s. Any id ea s?

th anx a l ot

yo u're r ig ht. tha nk yo u f or th e n oti fi ca ti on : )

Hel lo , I cou ld n't fi gu re o ut yet . Is yo ur cod e wo rki ng ? I a m h avin g th e same b eh avio ur a s you r demo , ho wever I ca n't a dd mor e re gi st rie s. Do I ha ve to a dd a n o nCl ick e ve nt a t th e b utt on ? If ye s pl ea se te ll u s h ow.

Nice T uto ri al ! Le o

13 of 15



ni ce tut ori al

T ha nks! ! !

co ul d u p ls gi ve me li nks f or a no the r jq ue ry+CI tu to ria l? th x...

ve ry we ll writ te n.. Nice tu to ria l mat e. T ha nk yo u

Bro, aj ari n d ong CI de ng an AJAX. a ne ma si h b el um ng ert i pa da ha l ud ah be la ja r dar i tu to ria l ora ng ban yak. bu at b ack e nd pro gra m d en ga n AJAX d al am CI. mo hu ja n no oj ect be cce ckk... .

th anks dud e. ..yo u he lp ed me al ot. ..

oh ... ye ah ... if t he vi ew fi le s i s o ut o f vie w f ol de r.. . th en i wil l ha ve bi t pr ob lem to in cl ud ed . so ho w a bo ut css? sa me way how t he j qu ery fi le don e ?

i wan t to in cl ud e fi le s l ike h ea de r an d fo ot er th at sha re d. so in CI in cl ud e i s n ot p ref erre d? hmm..i th in k i can ge t yo ur i de a. ... ju st use cont rol l er to lo ad vie w of h ea de r an d fo ote r. ... th at mig ht wo rks. ... ha ha ... .th an ks

14 of 15



i won de ri ng h ow to in cl ud e th e j que ry. ca use i al so b ee n fo ll owi ng MR Fo rbe s e xampl e. . al th oug h can ge t the fi rst pa ge ru nn in g. B ut wh en i t l oad ba ck th e pa ge aga in , i t no t run ni ng anymor e. i p ut my f il e l ike th is : www/code ig ni te r/syste m

Documents

CodeIgniter and Ajax Using JQuery Tutorial