CodeIgniter and Ajax Using JQuery Tutorial
CodeIgniter and Ajax Using JQuery Tutorial
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
LITTLE BRAIN
HOM E ABOUT ARCHIV ES
1 of 15
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
2 of 15
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
7 8 9}
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 </div> 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 </div> 1 < ! - - m e s s a g e _l i s t . p h p - - > 2 <ol> 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 ? > </ l i > 5 < ? p h p e n d f o r ea c h ? > 6 </ol> 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
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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.
Showing 79 of 80 comments
Sort by Sub scri be b y e mail Sub sc ri be b y RSS
4 of 15
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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: D
1 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.
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
+1
1 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
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
th is guy is in sane
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 e de mo do esnt wo rk
1 pe rson liked thi s.
dd dd dd d
6 of 15
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
h ttp :// fre e-3 x.com/ fre e-3 x.com/ fre e-3 x.com
1 pe rson liked thi s.
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 nks
1 pe rson liked thi s.
7 of 15
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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.
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 .com
1 pe rson liked thi s.
Not wo rk o n i e6
1 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
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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.
T ha nks. . ni ce tu to ria l. .
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
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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.
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?
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" ></ sc ri pt> wi ll do : )
hi hi hi , tks
11 of 15
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
de mo ve rsio n no t sho w u p. ..
th anks a lo t. wo rks fi ne !
Gr ea t tu tor ia l! T h an you !
T ha nks!
12 of 15
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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
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
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
ni ce tut ori al
T ha nks! ! !
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... .
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
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
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 <-- th is is fo r al l th e sys te m f il es. i p ut my j avascrip t j qu ery www/code ig ni te r/j avascrip t/j qu er y.j s in the vi ew, i in cl ud e l ike t hi s
it ca n run whe n i t yp e my URL l ike t hi s lo ca lh ost/ co de ig ni ter /in de x.ph p/ messa ge bu t no t whe n lo ca lh ost/ co de ig ni ter /in de x.ph p/ messa ge /vie w ca n g ui de me h ow to rea ll y p ut t he j qu er y fi le s ? th anks ! ! ~
15 of 15