জেকোয়েরি লোড মেথড (jQuery load method Tutorial in Bangla)
জেকোয়েরিতে
বেশ কিছু মেথড আছে যেগুলি এজাক্স ব্যবহার করে সার্ভারের সাথে ডেটা বিনিময়
বা ডেটা তুলে এনে ব্রাউজারে দেখাতে পারে। এজাক্স এমন একটি নতুন প্রযুক্তি
যেটা দিয়ে একটা ওয়েব পেজ রিলোড করা ছাড়াই সার্ভারের সাথে যোগাযোগ করতে
পারে।নতুন একটা পিএইচপি পেজে যাবে ঠিকই এবং পিএইচপি কোড ভিতরে ভিতরে
এক্সিকিউট হবে তবে বাইরে থেকে দেখা যাবে শুধু সার্ভার থেকে পাওয়া ডেটা বা
কোন ফলাফল।আর যতক্ষন কোড এক্সিকিউট হবে ততক্ষন ইউজারকে সাধারনত একটা লোডিং
এর ছবি দেখানো হয় যাতে সে বুঝতে পারে যে কোন কাজ হচ্ছে।এরুপ একটি মেথড
হচ্ছে load().নিচে উদাহরন সহ আলোচনা করা হল।
index.php ফাইল
style.css ফাইল
script.js ফাইল
প্রয়োগ দেখুন
ব্যাখ্যা: লিংকে ক্লিক করার পর যে কোডব্লকে ঢুকবে সেখানে url নামে একটি ভেরিয়েভল নিয়েছি এবং এখানে ক্লিককৃত লিংকের href সেভ করে রাখা হয়েছে।
*attr() মেথড দিয়ে যেকোন এলিমেন্টের যেকোন এট্রিবিউট বের করে আনা যায় যেমন আমি href এর মান এনেছি। যদি ছবি হয় তাহলে attr('src') এভাবে ছবির সোর্স বা যেকোন এট্রিবিউট বের করতে পারবেন।
এরপর পর preventDefault() মেথড দিয়ে লিংকে ক্লিকের পর ডিফল্ট একশন রুখে দেয়া হয়েছে। এটা যদি না দেয়া হয় তাহলে এখারে এই লিংকগুলিতে ক্লিক করলে href এ যে পেজের লিংক দেয়া আছে যে পেজে চলে যাবে।
তারপর container ডিভ সিলেক্ট করে html() মেথড ব্যবহার করে একটা স্পিনারের ছবি দিয়েছি এবং এরপর load মেথড দিয়েছি ফলে load মেথড দিয়ে পেজ লোড হওয়ার আগ পর্যন্ত এই লোডিং এর ছবিটি দেখাবে।
load() মেথডে প্রথম প্যারামিটার ঐ url দিয়েছি যেখান থেকে পেজটি লোড হবে (container ডিভে) দ্বিতীয় প্যারামিটার একটা কলব্যাক ফাংশন। এই ফাংশন দিয়ে চেক করা হচ্ছে যে কোন এরর আছে কিনা থাকলে সেটা দেখাবে। (response,status,xhr এগুলি alert দিয়ে দেখতে পারেন) আরও পরিষ্কার ধারনা হবে।
index.php ফাইল
01.<!DOCTYPE html>02.<html>03.<head>04.<title>Webcoachbd 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>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.}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.});ব্যাখ্যা: লিংকে ক্লিক করার পর যে কোডব্লকে ঢুকবে সেখানে url নামে একটি ভেরিয়েভল নিয়েছি এবং এখানে ক্লিককৃত লিংকের href সেভ করে রাখা হয়েছে।
*attr() মেথড দিয়ে যেকোন এলিমেন্টের যেকোন এট্রিবিউট বের করে আনা যায় যেমন আমি href এর মান এনেছি। যদি ছবি হয় তাহলে attr('src') এভাবে ছবির সোর্স বা যেকোন এট্রিবিউট বের করতে পারবেন।
এরপর পর preventDefault() মেথড দিয়ে লিংকে ক্লিকের পর ডিফল্ট একশন রুখে দেয়া হয়েছে। এটা যদি না দেয়া হয় তাহলে এখারে এই লিংকগুলিতে ক্লিক করলে href এ যে পেজের লিংক দেয়া আছে যে পেজে চলে যাবে।
তারপর container ডিভ সিলেক্ট করে html() মেথড ব্যবহার করে একটা স্পিনারের ছবি দিয়েছি এবং এরপর load মেথড দিয়েছি ফলে load মেথড দিয়ে পেজ লোড হওয়ার আগ পর্যন্ত এই লোডিং এর ছবিটি দেখাবে।
load() মেথডে প্রথম প্যারামিটার ঐ url দিয়েছি যেখান থেকে পেজটি লোড হবে (container ডিভে) দ্বিতীয় প্যারামিটার একটা কলব্যাক ফাংশন। এই ফাংশন দিয়ে চেক করা হচ্ছে যে কোন এরর আছে কিনা থাকলে সেটা দেখাবে। (response,status,xhr এগুলি alert দিয়ে দেখতে পারেন) আরও পরিষ্কার ধারনা হবে।
0 মন্তব্য(গুলি):
Post a Comment