রেলে রুবি সহ AJAX কীভাবে ব্যবহার করবেন

আসুন বুঝতে পারি কেন AJAX বিদ্যমান, যাতে আপনি আপনার রেল প্রকল্পগুলিতে এটি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও ভাল ধারণা পেতে পারেন।

যখন আপনি একটি ওয়েবসাইট পরিদর্শন করেন, তখন কি হয়?

একটি পৃষ্ঠা সার্ভার থেকে লোড করা হয়. কিন্তু আপনি যদি নতুন তথ্য দেখতে চান তবে আপনাকে হয় পৃষ্ঠাটি আপডেট করতে পুনরায় লোড করতে হবে, অথবা একটি ভিন্ন পৃষ্ঠা দেখার জন্য একটি লিঙ্কে ক্লিক করতে হবে৷

এটি একটি সিঙ্ক্রোনাস প্রবাহ .

নতুন ডেটা শুধুমাত্র তখনই উপস্থাপিত হয় যখন সার্ভার থেকে একটি নতুন পৃষ্ঠার অনুরোধ করা হয়।

কিন্তু…

আপনি যদি এই পৃষ্ঠাটি পুনরায় লোড করতে না চান?

আপনি যদি ব্যাকএন্ড থেকে ডেটা আনতে চান তাহলে কী হবে৷ , যে কোনো সময় আপনি চান, যাতে আপনি বর্তমান পৃষ্ঠার কোনো অংশ আপডেট করতে পারেন?

এখানেই AJAX আসে৷

AJAX মানে অ্যাসিনক্রোনাস জাভাস্ক্রিপ্ট এবং XML .

এটি এমন একটি কৌশল যা আপনার ওয়েব ফ্রেমওয়ার্ক থেকে স্বাধীন, তবে রেলের বিশেষভাবে এটির জন্য ভাল সমর্থন রয়েছে কারণ আপনি এই নিবন্ধে শিখবেন।

মনে রাখবেন যে আপনার অ্যাপে AJAX যোগ করা এটিকে আরও জটিল করে তোলে।

সরাসরি AJAX অনুরোধ

AJAX এর দুটি অংশ রয়েছে, অনুরোধ, যা আপনি জাভাস্ক্রিপ্ট ব্যবহার করে ব্রাউজার থেকে করেন এবং প্রতিক্রিয়া, যা আপনি আপনার রুবি অ্যাপ থেকে পরিচালনা করেন।

আপনি একটি AJAX অনুরোধ করতে পারেন প্লেইন জাভাস্ক্রিপ্ট সহ।

কিন্তু এর জন্য প্রচুর বয়লারপ্লেট কোডের প্রয়োজন হওয়ায় আমরা সাধারণত jQuery-এর মতো জাভাস্ক্রিপ্ট লাইব্রেরির মাধ্যমে এটি করি।

এখানে একটি jQuery অনুরোধ কেমন দেখায় :

$.get( "/vegetables", function(data) {
  alert("Vegetables are good for you!");
});

যাইহোক, যেহেতু Rails 5.1 jQuery ডিফল্টরূপে উপলব্ধ নয় (তবে আপনি এটি আবার যোগ করতে পারেন)।

দ্রষ্টব্য :আপনি একটি InvalidAuthenticityToken পাবেন আপনি একটি jQuery POST অনুরোধ করার সময় ত্রুটি, এর মানে হল যে আপনাকে csrf-token জমা দিতে হবে একটি নিরাপত্তা পরিমাপ হিসাবে বর্তমান পৃষ্ঠা থেকে. Rails.ajax ব্যবহার করা হচ্ছে এটি আপনার জন্য স্বয়ংক্রিয়ভাবে করে।

একটি সমাধান আছে!

রেলের নিজস্ব AJAX ফাংশন রয়েছে :

Rails.ajax({
  url: "/books",
  type: "get",
  data: "",
  success: function(data) {},
  error: function(data) {}
})

মনে রাখবেন, এটি এখনও ব্রাউজার থেকে অনুরোধের দিক থেকে।

এর মানে হল যে এটি জাভাস্ক্রিপ্ট কোড .

রেলে, এই AJAX কার্যকারিতা "আনবট্রুসিভ জাভাস্ক্রিপ্ট", বা সংক্ষেপে "UJS" নামে কিছু দ্বারা সরবরাহ করা হয়।

AJAX এর সাথে একটি আংশিক আপডেট করা হচ্ছে

আপনি যদি AJAX থেকে পাওয়া ডেটা দিয়ে আপনার পৃষ্ঠার শুধুমাত্র একটি অংশ আপডেট করতে চান, তবে আপনার কাছে বেশিরভাগই দুটি বিকল্প রয়েছে।

1. আপনি একটি Javascript + ERB ভিউ লিখতে পারেন, যা উপাদানটিকে আপডেট করে
2. আপনি একটি স্ট্রিং হিসাবে নতুন HTML এর সাথে আপনার কন্ট্রোলার থেকে একটি JSON প্রতিক্রিয়া ফেরত দিতে পারেন, তারপর উপাদানটি আপডেট করতে Javascript ব্যবহার করুন

এছাড়াও একটি 3য় বিকল্প রয়েছে৷

এতে শুধুমাত্র JSON হিসাবে ডেটা ফেরত দেওয়া জড়িত৷ , তারপর সেই ডেটা ব্যবহার করে জাভাস্ক্রিপ্টের সাথে এইচটিএমএল উপাদান তৈরি করা।

এখানেই প্রতিক্রিয়ার মত JS ফ্রেমওয়ার্ক আসে।

আমার মতে, তারা অনেক অপ্রয়োজনীয় জটিলতা যোগ করে .

কিন্তু আমরা প্লেইন জাভাস্ক্রিপ্ট দিয়ে এটি পরিচালনা করতে পারি!

এটি হল বিকল্প 1 এবং 2।

আপাতত তাদের সাথে লেগে থাকুক 🙂

জাভাস্ক্রিপ্ট দেখার উদাহরণ :

Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")

j escape_javascript এর একটি উপনাম

jQuery উদাহরণ :

$('.random-number').html("<%= j (render partial: 'random') %>")

উভয়ই html &innerHTML লক্ষ্য উপাদানের বিষয়বস্তু প্রতিস্থাপন করুন।

আপনি পুরো জিনিসটি প্রতিস্থাপন করার পরিবর্তে একটি তালিকায় একটি নতুন উপাদান (jQuery) যোগ করতে পারেন।

এই কোডটি .js.erb এর এক্সটেনশন সহ একটি ফাইলে রাখুন , বর্তমান কর্মের নামের সাথে (যেমন create.js.erb ) এবং ভিউ ফোল্ডারের ভিতরে।

কন্ট্রোলারে আপনি এই ভিউটিকে অন্য যেকোন ভিউয়ের মতো রেন্ডার করতে পারেন।

এখন :

আপনি যখন AJAX কল করবেন, তখন এই জাভাস্ক্রিপ্ট কোডটি স্বয়ংক্রিয়ভাবে চলবে এবং HTML আপডেট করবে।

আসুন ২য় বিকল্পটি দেখে নেই।

এখানে কন্ট্রোলার কোড আছে :

render json: { html: render_to_string(partial: 'random') }

তারপর আপনার জাভাস্ক্রিপ্ট কোড থেকে :

Rails.ajax({
  url: "/books",
  type: "get",
  success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; }
})

এটি করার আরেকটি উপায়!

আপনার কি ব্যবহার করা উচিত?

DHH এর প্রিয় প্রথম উপায়, যাকে তিনি "SJR" (সার্ভার-জেনারেটেড জাভাস্ক্রিপ্ট) বলে।

আমি অনুমান করি এভাবেই রেল আপনাকে এটি করতে চায়, তবে নির্দ্বিধায় উভয়ই চেষ্টা করুন (SJR &render_to_string ) নিজে এবং দেখুন কোনটি আপনার জন্য সবচেয়ে ভালো কাজ করে৷

আপনার JS ভিউ এর জন্য HAML কিভাবে ব্যবহার করবেন

ঠিক আছে।

ধরা যাক আপনি একজন HAML ব্যবহারকারী।

এই SJR ব্যবহার করা কি সম্ভব কৌশল এবং রেন্ডার .js.haml ভিউ?

হ্যাঁ!

এখানে একটি উদাহরণ আছে :

- content = j (render partial: "random")

Rails.$('.random-number')[0].innerHTML = ("#{content}")

এটি ERB সংস্করণের চেয়ে কিছুটা কুশ্রী, তবে এটি কাজ করে।

পেজ রিফ্রেশ না করে কিভাবে একটি রেল ফর্ম জমা দিতে হয়

আপনি যদি AJAX ব্যবহার করে একটি ফর্ম জমা দিতে চান তবে আপনি AJAX অনুরোধ না লিখেই এটি করতে পারেন৷

রেল আপনার জন্য এটি পরিচালনা করতে পারে৷

কিভাবে?

remote: true ব্যবহার করুন form_for সহ বিকল্প .

এখানে একটি উদাহরণ আছে :

<%= form_for @fruit, remote: true do |f| %>
  <%= f.label :name, 'Fruit' %>
  <%= f.text_field :name %>

  <%= f.submit 'Create' %>
<% end %>

এখন আপনি "তৈরি করুন" এ ক্লিক করলে রেলগুলি আপনার জন্য একটি AJAX অনুরোধ পাঠাবে এবং পৃষ্ঠাটি পুনরায় লোড হবে না৷

আপনি যদি বৈধকরণ ত্রুটিগুলি প্রদর্শন করতে চান আপনাকে একটি জাভাস্ক্রিপ্ট ভিউ তৈরি এবং রেন্ডার করতে হবে (.js.erb ফাইল) যা বর্তমান ত্রুটিগুলিকে নতুন ত্রুটিগুলির সাথে প্রতিস্থাপন করে৷

"AJAX এর সাথে একটি আংশিক আপডেট করা" এর উদাহরণের মতো৷

Btw, এই remote বিকল্পটি লিঙ্কগুলির সাথেও ব্যবহার করা যেতে পারে, তাই আপনি একটি AJAX delete করতে পারেন অনুরোধ৷

উদাহরণ :

<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }

আপনি একটি জাভাস্ক্রিপ্ট ভিউ ব্যবহার করে প্রতিক্রিয়া পরিচালনা করতে পারেন।

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

উদাহরণ :

respond_to do |f|
  f.html { redirect_to :index }
  f.js
end

এই উদাহরণে Turbolinks কে এটি পরিচালনা করতে দেওয়া সহজ হতে পারে।

আপনি এখনও AJAX অনুরোধ এবং একটি redirect_to করতে পারেন কন্ট্রোলার থেকে (respond_to ছাড়া ), তারপর Turbolinks পৃষ্ঠার বিষয়বস্তু পুনরায় লোড না করেই প্রতিস্থাপন করবে।

AJAX কাজ করছে না? এখানে কিছু টিপস আছে

যদি আপনার AJAX অনুরোধ কাজ না করে তাহলে আপনার কিছু ডিবাগিং করতে হবে।

প্রথমে, আপনার ব্রাউজার ডেভেলপার টুল খুলুন।

আপনি যেকোন জাভাস্ক্রিপ্ট ত্রুটির জন্য কনসোল প্যানেল দেখতে চান৷ .

সেগুলি ঠিক করুন৷

এছাড়াও, নিশ্চিত করুন যে আপনি যে CSS নির্বাচককে লক্ষ্য করছেন তা সঠিক এবং আপনার কোনো টাইপ ভুল নেই।

তারপর, আপনার রেল লগ পরীক্ষা করুন কোনো ত্রুটির জন্য।

তারপর, নিশ্চিত করুন যে সঠিক ভিউ রেন্ডার করা হচ্ছে।

আপনি যদি এই প্রক্রিয়াটি অনুসরণ করেন তবে কেন আপনার AJAX অনুরোধ কাজ করছে না তা খুঁজে পেতে এবং এটি ঠিক করতে সক্ষম হবেন৷

সারাংশ

আপনি AJAX সম্পর্কে শিখেছেন, একটি ওয়েব ডেভেলপমেন্ট কৌশল যা আপনাকে অ্যাসিঙ্ক্রোনাস অনুরোধ করতে দেয়!

আপনি এটাও শিখেছেন কিভাবে রেলে এটি বাস্তবায়ন করতে হয়। মনে রাখবেন যে আপনার নিয়মিত (নন-জেএস ফ্রেমওয়ার্ক) রেল অ্যাপ কাজ করার জন্য AJAX এর প্রয়োজন নেই , কিন্তু এটি এমন কিছু যা আপনার টুলবক্সে থাকা সহায়ক৷

এই নিবন্ধটি শেয়ার করতে ভুলবেন না যাতে আরও বেশি মানুষ এটি থেকে উপকৃত হতে পারে 🙂

পড়ার জন্য ধন্যবাদ!