Wednesday, December 30, 2009

JQuery වලින් ලේසියෙන්ම AJAX ගොඩදාන්න

ඔන්න 2009 යෙ අන්තිම සටහනින් කියල දෙන්න යන්නෙ JQuery පාඩමක්. කට්ටියට මතකද දන්නෑ මම කලින් JQuery වලට හීනියට වගේ හැඳින්වීමක් දුන්න. කොහෙ මතක හිටින්නද ඔව්ව නේද? මෙතනට කොටල ඒක පොඩ්ඩක් බලල හිටියනං.

අද මොකක්ද කරන්න යන්නෙ ?

අද මම කියල දෙන්න යන්නෙ ඔය Web Site හදද්දි ගොඩක් වෙලාවට කරන්න ඕන වෙන දෙයක් JQuery සහ AJAX පාවිච්චි කරල ලේසියෙන්, ලස්සනට කරගන්න හැටි. මෙහෙමයි සිද්දිය, පහල තියන රූපෙ බලල ඉන්නකො.



දැනට හිතන්නකො ඔය තියෙන්නෙ අපේ Web Site එකේ සැළැස්ම කියල. හිතන්න ඔය "C" කියන කොටසෙ තියන links වලට කොටපුවාම "B" කොටසෙ තියන "main" කියන div එකේ වෙනස් වෙනස් දේවල් පෙන්වගන්න ඕන වෙනව කියල. තේරුණාද මන්ද? සිංහලෙන්ම කියනවනම් links click කළාම main div එකට load කරන content එක වෙනස් කරන්න ඕන කියල. දැන් තේරෙන්න ඇතිනෙ.

ඔය වැඩේ කරගන්න අපි වෙනම pages හදල links වලට කොටද්දි එව්ව load කරන්න ගියොත් අපරාදයක් වෙනව. මොකද එතකොට "A" සහ "C" කියන කොටස් වල තියන දේවලුත් නිකන් බොරුවට ආයෙමත් load කරන්න වෙනව. ඔන්න ඕක හින්ද තමයි අපි AJAX පාවිච්චි කරන්නෙ. එතකොට page refresh එකක් නැතිවම අපිට පුලුවන් ඕන කරන වැඩේ කරගන්න.

කොහොමද කරන්නෙ ?

මෙහෙමයි, මුලින්ම මම විස්තර කරන්න යන උදාහරණෙ බාගන්නකො.


ඕක මම හදපු පොඩි උදාහරණයක්. බාගත්තු එකේ තියන code කෑලි තමයි මම විස්තර කරන්න යන්නෙ. කෝකටත් කලින් index.html file එක browser එකේ open කරල බලන්නකො. පහළ තියන රූපෙ වගේ එකක්නෙ එන්නෙ.



ඔයාලට පේනව නේද "Home", "About" සහ "Contact Us" කියල links තුනක්. එව්වට කොටල බන්නකො වෙනස් වෙන හැටි. අන්තිම එකේ තියන අවුල දැනට ගනන් ගන්න එපා. මම ඔය උදාහරණෙ හැදුවෙ අර උඩින් ව්ස්තර කරපු සිද්දියට අදාලව. දැන් අපි බලමු code එක. index.html file එක ඔයාලඟ තියන text editor එකෙන් open කරගන්නකො. මුලින්ම බලන්න ඒකෙ තියනව නේද කියල මේ පහළ තියනව වගේ code කෑල්ලක්.

<script src="jquery-1.3.1.min.js" type="text/javascript" ></script>

අන්න ඒකෙන් තමයි මම JQuery link කරල තියෙන්නෙ. සාමාන්‍ය JavaScript එකක් link කරන විදිහටම තමයි. ඊළඟට බලන්න මේ පහළ තියන JavaScript කෑල්ල තියනව නේද කියල.

අපි ලියන හැම event එකක්ම ලියන්න ඕන $(document).ready කියන function එක ඇතුලෙ. ඒකයි එහෙම එකක් තියෙන්නෙ හොඳද. ඔතන මම කරල තියෙන්නෙ අපේ තියන links වලට id දීල එව්වල click event වලට function ලියල තියන එක. මම ඔතනදි එකම වැඩේ කරගන්න ක්‍රම තුනක් තමයි පෙන්නල තියෙන්නෙ.

මුලින්ම බලන්න 5 වෙනි පේළිය, ඒකෙන් තමයි මම "Home" කියන link එක click කරද්දි ( id එක "link1" ) home.html file එක main div එකට load කරන්නෙ. ඔය තමයි සරළම විදිහට JQuery වලින් AJAX request එකක් කරන. ඊලඟට බලන්නකො 9 වෙනි පේළිය, ඒකෙන් "About" කියන link එක click කරද්දි ( id එක "link2" ) about.html file එක main div එකට load කරනව.

හැබැයි මේක කලින් එකට වඩා වෙනස්, අපිට පුලුවන් එක එක effects දාල ලස්සන කරගන්න. beforeSend සහ success කියන functions ඇතුලෙ තමයි එව්ව ලියන්න ඕන. දාන්න පුලුවන් effects ගැන මෙතනින් බලන්නකො. දැන් 3 වෙනි පේළිය බලන්න, ඒක මම comment කරලනෙ තියෙන්නෙ. ඒකෙ comment නැතිකලොත් page එක load වෙද්දිම main div එකට home.html file එක load වෙනව. කට්ටියට තේරෙනවද මන්ද කියන එව්ව.

අන්තිමටම 23 වෙනි පේළිය, ඒකෙ කරල තියෙන්නෙ වෙනස්ම දෙයක්. ඒකෙදි මම data අරගන තියෙන්නෙ boo.php කියන php file එකෙන්. වැඩිය අමාරු නෑ, පොඩ්ඩක් බලපුවාම වැඩේ තේරෙයි. ඕක හරි විදිහට වැඩ කරන්නනම් XAMPP වගේ PHP තියන server එකක run කරල බලන්න ඕන.

ඔන්න එහෙනම් දැන් JQuery වලින් AJAX ගොඩදාන එක ගේමක් නෙවෙයිනෙ. කරලම බලන එක තමයි වඩාත් හොඳ. අවුල් තියනවනම් අහන්නකො. කියවල බලල ප්‍රතිචාරයක් දෙන්නත් අමතක කරන්න එපා. ඉවර කරන්න කලින් ප්‍රාර්ථනා කරනව 2010 අවුරුද්ද අපි හැමෝටම සුභම සුභ එකක් වේවා කියල. ඔබට ජය !

10 comments:

  1. මැක්සා ඒලටම දීලා තියනවා. ගින්දර /පට්ට තව කියන්න වචන නැහැ

    ඒවගෙම ඔබටත් සුබ අලුත් අවුරැද්දක් වෙවා!!!!!!!

    ReplyDelete
  2. තවත් jquery ගැන ලියන්න. :)
    Cannot read? click on the picture to download Sinhala Unicode, or you can use Firefox Add-on.
    qsfox ගැන දැනුවත් කලාට ස්තුතියි. ඔය තියෙන ලින්ක් එකෙන් යන්නෙ qsFOX පරණ version එකකට. මේ ලින්ක් එකේ අලුත් version එක තියෙනවා.
    https://addons.mozilla.org/en-US/firefox/addon/53146

    ReplyDelete
  3. @ වැප්,
    ස්තූතියි ප්‍රතිචාරයට ...

    @ පහන්,
    මළා ! එහෙමද?
    ඔන්න එහෙනම් update කළා ...
    thanks කිව්වට ...

    ReplyDelete
  4. මචං zip file එක extract කරන්න ගියාම password එකක් අහනවානේ.... ???

    ReplyDelete
  5. එල... දිගටම ලියන්ට එහෙනම්..

    ReplyDelete
  6. හ‍පොයි පා‍ස්වෝඩ් ඉල්ලනවෝ :P
    හොඳ ලිපියක්.. ගොඩක් ස්තුතියි..

    ReplyDelete
  7. zip password එක දැන ගන්න සැලැස්සුවොත් ලොකු උදව්වක්.

    ReplyDelete
  8. @ කணிshක, සියදෝරිස්, කණියා, Sujeewa
    මට password දෙන්න අමතක උනානෙ, සමාවෙන්න ඕන කට්ටියම.
    password : sara

    ReplyDelete
  9. එල !!!!!!!!!!!! සිරා වැඩක්.

    ReplyDelete
  10. @ Sadara,
    ස්තූතියි ප්‍රතිචාරයට ..!

    ReplyDelete

කොහොමද සටහන? පට්ටද, නෝමල්ද නැත්නම් චාටර්ද?
සිංහලෙන් ටයිප් කරන්න අමාරු නම් යුනිකෝඩ් එසැණින් පරිවර්තකය පාවිචිචි කරන්න.

Related Posts with Thumbnails