jQuery-এ সম্পূর্ণ পৃষ্ঠা পুনরায় লোড না করে কীভাবে div পুনরায় লোড করবেন

Jquery E Sampurna Prstha Punaraya Loda Na Kare Kibhabe Div Punaraya Loda Karabena



একটি সাইটের জন্য একাধিক ওয়েব পৃষ্ঠা তৈরি করার সময়, ডেটা প্রতিলিপি করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, ট্রিগার করা ইভেন্টে একটি ভিন্ন ওয়েব পৃষ্ঠায় একই ডেটা ব্যবহার করা। এই ধরনের পরিস্থিতিতে, পুরো পৃষ্ঠাটি পুনরায় লোড না করে ডিভিটি পুনরায় লোড করা কার্যকরভাবে ডেটা পরিচালনা করতে সহায়তা করে, যার ফলে সময় সাশ্রয় হয়।

এই ব্লগটি জাভাস্ক্রিপ্টে পুরো পৃষ্ঠাটি পুনরায় লোড না করেই ডিভি পুনরায় লোড করার পদ্ধতি নিয়ে আলোচনা করবে।

jQuery-এ পুরো পৃষ্ঠাটি পুনরায় লোড না করে কীভাবে div পুনরায় লোড করবেন?

দ্য ' div jQuery এর 'on()' পদ্ধতি ব্যবহার করে পুরো পৃষ্ঠাটি পুনরায় লোড না করেই 'কে পুনরায় লোড করা যেতে পারে। ভার() 'পদ্ধতি।







on() পদ্ধতি উপাদানগুলির জন্য এক বা একাধিক ইভেন্ট হ্যান্ডলারকে সংযুক্ত করে এবং load() পদ্ধতিটি আনা উপাদানের মধ্যে সামগ্রী লোড করে। এই পদ্ধতিগুলিকে ডিভ অ্যাক্সেস করতে এবং ট্রিগার করা ইভেন্টে এটি পুনরায় লোড করতে একত্রিত করা যেতে পারে।



উদাহরণ
চলুন নিচের এইচটিএমএল কোডের ওভারভিউ করা যাক:



< শরীর >
< h2 > এইভাবে সম্পূর্ণ পৃষ্ঠা পুনরায় লোড না করে ডিভি পুনরায় লোড করা যায় h2 >
< ডিভি আইডি = 'myDiv' >
< পি > জাভাস্ক্রিপ্ট একটি প্রোগ্রামিং ভাষা যা ফাংশন ধারণ করে , ভেরিয়েবল , ঘটনা এবং বস্তু ইত্যাদি পি >
div >
< বোতাম > পুনরায় লোড বোতাম >
শরীর >

উপরের কোড ব্লকে:





  • উল্লেখিত শিরোনাম অন্তর্ভুক্ত করুন।
  • এছাড়াও, “আইডি” বৈশিষ্ট্যযুক্ত “
    ” উপাদানটি উল্লেখ করুন।
  • এর পরে, '

    ' ট্যাগের মধ্যে অনুচ্ছেদটি অন্তর্ভুক্ত করুন এবং পছন্দসই কার্যকারিতা ট্রিগার করার জন্য একটি বোতাম।

এখন, জাভাস্ক্রিপ্ট কোডে যাওয়া যাক:

< স্ক্রিপ্ট src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
লিপি >
< লিপি >
$ ( 'বোতাম' ) . চালু ( 'ক্লিক' , ফাংশন ( ) {
$ ( '#myDiv' ) . ভার ( '#myDiv' )
সতর্ক ( 'পুনরায় লোড করা' )
} ) ;

এই কোড স্নিপেটে



  • 'এর মাধ্যমে jQuery লাইব্রেরি অন্তর্ভুক্ত করুন src ” বৈশিষ্ট্য।
  • তৈরি বোতাম অ্যাক্সেস করুন এবং সংযুক্ত করুন ' চালু() 'পদ্ধতি।
  • এটি বোতাম ক্লিকের উপর উল্লিখিত ফাংশনটি চালু করবে, যা সংযুক্ত ইভেন্ট থেকে স্পষ্ট ' ক্লিক
  • ফাংশনের সংজ্ঞায়, অন্তর্ভুক্ত 'এক্সেস করুন
    ' উপাদান এবং এটি ব্যবহার করে আবার লোড করুন ' ভার() 'এর উল্লেখ করে পদ্ধতি' আইডি
  • ফলস্বরূপ, বোতামে ক্লিক করার পরে অন্তর্ভুক্ত ডিভ পুনরায় লোড হবে এবং সতর্ক সংলাপ বাক্সের মাধ্যমে বর্ণিত বার্তাটি প্রদর্শিত হবে।

আউটপুট

এটা লক্ষ্য করা যায় যে পুরো পৃষ্ঠাটি পুনরায় লোড না করেই div সফলভাবে পুনরায় লোড করা হয়েছে।

উপসংহার

পুরো পৃষ্ঠাটি পুনরায় লোড না করেই ডিভিটি পুনরায় লোড করতে, ' চালু() 'এর সাথে একত্রিত পদ্ধতি ভার() 'পদ্ধতি। এই পদ্ধতিগুলিকে ট্রিগার করা ইভেন্টে ডিভ-এর বিষয়বস্তু পুনরায় লোড করতে ব্যবহার করা যেতে পারে এটি অ্যাক্সেস করে এবং এটিকে আবার উল্লেখ করে। এই ব্লগটি সম্পূর্ণ পৃষ্ঠা পুনরায় লোড না করেই ডিভি পুনরায় লোড করার পদ্ধতি বর্ণনা করেছে।