jQuery load method Tutorial in Bangla | SP Foundationbd

Jquery তে বেশ কিছু method আছে যেগুলি এজাক্স ব্যবহার করে সার্ভারের সাথে data বিনিময় বা data তুলে এনে ব্রাউজারে দেখাতে পারে। Ajax এমন একটি নতুন প্রযুক্তি যেটা দিয়ে একটা ওয়েব পেজ reload করা ছাড়াই সার্ভারের সাথে যোগাযোগ করতে পারে।নতুন একটা পিএইচপি পেজে যাবে ঠিকই এবং পিএইচপি কোড ভিতরে ভিতরে execute হবে তবে বাইরে থেকে দেখা যাবে শুধু সার্ভার থেকে পাওয়া ডেটা বা কোন ফলাফল।আর যতক্ষন কোড এক্সিকিউট হবে ততক্ষন ইউজারকে সাধারনত একটা loading এর ছবি দেখানো হয় যাতে সে বুঝতে পারে যে কোন কাজ হচ্ছে।এরুপ একটি method হচ্ছে load().নিচে উদাহরন সহ আলোচনা করা হল।

index.php ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title> spfoundationbd Ajax load method tutorials</title>

05.<link rel="stylesheet" href="/style.css"

06.type="text/css" />

07.<script src="/jquery_latest.js" type="text/javascript"></script>

08.<script src="/script.js" type="text/javascript"></script>

09.</head>

10.<body>

11.<div id="content_pane">

12.<a href="/css-tutorials">Reference</a>

13.<a href="/project-page">Project</a>

14.<a href="/php-framework">Framework</a>

15.</div>

16.<div id="container">

17.</div>

18.</body>

19.</html>

style.css ফাইল

01.#container{

02.width:800px;

03.margin:0 auto;

04.padding:10px;

05.position:relative;

06.}

07..loader{

08.position:absolute;

09.left:50%;

10.top:50%;

11.}

12.#content_pane{

13.width:500px;

14.margin:0 auto;

15.}

16.#content_pane a{

17.text-decoration:none;

18.background:#333;

19.padding:5px;

20.margin:0 5px;

21.color:#fff;

22.}

23.#content_pane a:hover{

24.background:#222;

25.}

26.#content_pane a:active{

27.background:#000;

28.}

script.js ফাইল

01.$(document).ready(function(){

02.$('#content_pane a').click(function(e){

03.var url = $(this).attr('href');

04.e.preventDefault();

05.$('#container')

06..html('<img class="loader" src="/spinner.gif" alt=""/>Loading...')

07..load(url,function(response,status,xhr){

08.if(status == 'error'){

09.$(this).html(xhr.status+' '+xhr.statusText);

10.}

11.});

12.});

13.});

ব্যাখ্যা: লিংকে ক্লিক করার পর যে code ব্লকে ঢুকবে সেখানে url নামে একটি ভেরিয়েভল নিয়েছি এবং এখানে ক্লিককৃত লিংকের href save করে রাখা হয়েছে।

*attr() method দিয়ে যেকোন এলিমেন্টের যেকোন attribute বের করে আনা যায় যেমন আমি href এর মান এনেছি। যদি ছবি হয় তাহলে attr('src') এভাবে ছবির source বা যেকোন attribute বের করতে পারবেন।

এরপর পর preventDefault() method দিয়ে লিংকে ক্লিকের পর default একশন রুখে দেয়া হয়েছে। এটা যদি না দেয়া হয় তাহলে এখারে এই লিংকগুলিতে ক্লিক করলে href এ যে পেজের link দেয়া আছে যে পেজে চলে যাবে।

তারপর container div select করে html() method ব্যবহার করে একটা স্পিনারের ছবি দিয়েছি এবং এরপর load মেথড দিয়েছি ফলে load মেথড দিয়ে page load হওয়ার আগ পর্যন্ত এই loading এর ছবিটি দেখাবে।

load() মেথডে প্রথম প্যারামিটার ঐ url দিয়েছি যেখান থেকে পেজটি load হবে (container ডিভে) দ্বিতীয় প্যারামিটার একটা কলব্যাক ফাংশন। এই function দিয়ে চেক করা হচ্ছে যে কোন এরর আছে কিনা থাকলে সেটা দেখাবে। (response,status,xhr এগুলি alert দিয়ে দেখতে পারেন) আরও পরিষ্কার ধারনা হবে।