আমি দৃশ্যে অ্যাজাক্স লোডিং আচরণটি কীভাবে পরিবর্তন করব?


34

একটি ব্লকে কিছু এক্সপোজড ফিল্টার সহ আমার একটি ভিউ রয়েছে; এটি এজাক্স এবং স্বতঃ-জমা বৈশিষ্ট্য ব্যবহার করে যাতে ফিল্টার বিকল্প পরিবর্তন হওয়ার সাথে সাথে ভিউটি আবার লোড হয়।

কোনও বিকল্প নির্বাচন করা এবং দর্শনটি পুনরায় লোড করার মধ্যে সংক্ষিপ্ত বিলম্বের মধ্যে, পরিচিত নীল এজেএক্স থ্রোবারটি ফর্মের নীচে কোথাও প্রদর্শিত হবে (আমি মনে করি যে লুকানো সাবমিট বোতামটি বর্তমানে অবস্থিত)।

আমি জানি আমি থ্রোবার উপাদানটির জন্য সিএসএসকে ওভাররাইড করে এই চিত্রটি কাস্টমাইজ করতে পারি, তবে আমি এটিকে ব্যবহার না করা পছন্দ করব।

আমি বরং যা করব তা হ'ল একটি জিকুয়েরি অ্যানিমেশন ব্যবহার করে সাময়িকভাবে উন্মুক্ত ফিল্টার ফর্মটি (এবং আদর্শভাবে মূল দৃষ্টিভঙ্গি) হ'ল is এজেএক্স কলটি সম্পূর্ণ হওয়ার পরে তারা ফেইস হয়ে যাবে।

এই ব্যর্থ হওয়াতে, আমি আপডেট করার সময় ভিউ ইউআই মডিউলটি একই পদ্ধতিটি ব্যবহার করতে চাই, নামক পৃষ্ঠার মাঝখানে এই আইকনটি রাখছি:

এখানে চিত্র বর্ণনা লিখুন

যেহেতু এটি ইতিমধ্যে নির্মিত হয়েছে আমি কেবল ধরে নিয়েছি যে এই লোডিং আচরণের স্টাইল / অবস্থান পরিবর্তন করার জন্য কোথাও একটি সেটিংস থাকবে; যদিও এর মতো ভাগ্য নেই।

আমি এই পদ্ধতির কোনওটি কীভাবে বাস্তবায়ন করব?

আমি দ্রুপাল 7 টি ভিউজ 7.x-3.3 এর সাথে ব্যবহার করছি।


মিম্ম ... সকাল প্রজেক্ট :)
লেস্টার পিবডি

আপনার যে সময়সীমার মধ্যে এটি করা দরকার তা কী?
লেস্টার পিবডি

@ লেস্টার আমি প্রচুর ভিড়ের মধ্যে নেই কারণ এটি যে প্রকল্পে আমি কাজ করছি তার কোনওটিই মুক্তি-অবরোধকারী নয় ... তবে আমাকে স্বীকার করতে হবে যে এটি আমাকে বগ করছে! আমি খুব কমই ভিউজ ব্যবহার করি এবং এর সাথে নিম্ন স্তরে 'যুক্ত' হওয়ার জন্য আমার কাছে সময় (বা স্পষ্টভাবে শক্তি) নেই; তবে এখন আমি আমার ই-কমার্সের প্রচেষ্টাকে দ্রুপাল কমার্সে পোর্ট করতে শুরু করছি বলে আমি এই ধরণের জিনিসটি করতে সক্ষম হব। যদি আমি 7 দিনের অনুগ্রহের সময়কালে একটি ভাল উত্তর পাই তবে আমি চাঁদের উপরে চলে যাব :)
ক্লাইভ

আরে আমি ভিউ থ্রোবারকে স্টাইল করার জন্য আমার কাস্টম মডিউলটি (সেটিংস অ্যাডমিন পৃষ্ঠা সহ) তৈরি করা শেষ করেছি। তুমি কি এখনও আগ্রহী? আমি এটিকে কয়েক দিনের মধ্যেই
drupal.org-

1
# র্যান্ডম -: -আমি ভেবেছিলাম @ ক্লাইভ উত্তর সম্পর্কে ছিল, আপনি এমনকি প্রশ্ন জিজ্ঞাসাও করেছেন;): ডি
এসঘোষ

উত্তর:


42

আপনি যদি কিছুটা jquery ব্যবহার করতে কিছু মনে করেন না তবে আপনি সর্বদা এমন কিছু করতে পারেন:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});

4
হ্যাঁ, আমি এই সমাধানের সাথে একমত। কেবল নোট করুন, সেই jQuery ajaxSendএবং আরও নিয়ন্ত্রণের জন্য ajaxCompleteশর্তের সাথে ব্যবহার করা যেতে পারে if (settings.url == '/views/ajax') {//... }
কলাব্রো

বাহ আমি সত্যিই অত্যধিক জটিল জিনিস এটি এখন খুব সুস্পষ্ট বলে মনে হচ্ছে! আমাকে দৃশ্যগুলির চেয়ে ফিল্টার ফর্মের সাথে ইভেন্টগুলি সংযুক্ত করতে হয়েছিল (অন্যথায় ajaxSuccessকেবল একবারে বরখাস্ত হয়ে যায়; আমি অনুমান করি যে ইভেন্টটি স্বয়ংক্রিয়ভাবে প্রতিস্থাপিত হয়ে পুনরায় আবদ্ধ হয় না <div>) তবে এটি নিখুঁত, সুন্দরভাবে উল্লেখ করার জন্য নয় । অনেক অনেক ধন্যবাদ
ক্লাইভ

@ কালাব্রো আপনার এই সাহায্যের জন্য আবারও ধন্যবাদ, যদি আমি এই এবং আপনার উত্তরের মধ্যে অনুদানকে বিভক্ত করতে পারি; তবে এটি প্রায় পুরোপুরি কার্যকর উদাহরণ হিসাবে আমি এইটির জন্য যেতে পেরেছি :)
ক্লাইভ

@ ক্লাইভ, আমি সমাধানটি পেয়েছি খুব খুশি :)
কালব্রো

1
JQuery 1.8 হিসাবে, .ajaxSuccess () পদ্ধতিটি কেবলমাত্র নথির সাথে সংযুক্ত করা উচিত । উপরের কলাব্রোর পরামর্শ অনুসারে সেটিংস মানটির তুলনা করা, যাওয়ার উপায়। উত্স: api.jquery.com/ajaxSuccess
cjoy

29

সম্পূর্ণতার জন্য এখানে কোডটি ব্যবহার করে আমি শেষ করেছি; এটি যখন প্রকাশিত ফিল্টার ফর্ম এবং এজেএক্স লোড শুরু হয় তখন দৃশ্যটি উভয়ই বিবর্ণ করে দেয় এবং শেষ হয়ে গেলে আবার ফিরে আসে:

(function($) {
  Drupal.behaviors.events = {
    attach: function(context, settings) {
      $('#views-exposed-form-events-page', context).ajaxStart(function(){
        $('#views-exposed-form-events-page,div.view-id-events', context).fadeTo(300, 0.5);
      });
      $('#views-exposed-form-events-page', context).ajaxSuccess(function(){
         $('#views-exposed-form-events-page', context).fadeTo(300, 1.0);
         $('div.view-id-events', context).css('opacity', 0.5).fadeTo(300, 1.0);
      });
    }
  };
})(jQuery);

অসাধারণ! আমি আনন্দিত যে আপনার জন্য কাজ করেছে।
চান্স জি

ড্রুপাল 6 এ এটি কীভাবে হয়?
রায়ান জি

সত্যিই দুর্দান্ত, তবে কেবল একবার প্রযোজ্য :)
কোজো

10

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

এটি স্যান্ডবক্সের লিঙ্ক: http://drupal.org/sandbox/ANDiTKO/1556808

যদি আপনার এটি দরকারী মনে হয় তবে এটি এখানে প্রকাশ করুন যাতে এটি সরকারী প্রকল্প হিসাবে অনুমোদিত হতে পারে: http://drupal.org/node/1556114


এটি দেখতে অনেক ধন্যবাদ মনে হচ্ছে :) আমি এটি ইনস্টল করব এবং সুযোগ পেলে পর্যালোচনাতে কিছু মন্তব্য পোস্ট করব
ক্লাইভ

6

আমি শুধু একটি গবেষণা করেছি। হার্ডকোডেড হয় এখানে প্রস্ততকর্তার মধ্যে । একটি উদাহরণ সংরক্ষণ করা হয় না এবং এটি সম্পর্কে আছে । এর অর্থ হ'ল আমরা বস্তুর মধ্যে গিয়ে নিজের প্যারামগুলি সেট করতে পারি না।
throbberDrupal.views.ajaxView
Drupal.views.ajaxViewDrupal.ajax @todo

এটি কীভাবে দেখায়?

সংক্ষিপ্ত উত্তরটি সিএসএস।
দেখেছে অ্যাডমিন পৃষ্ঠা শুধু চামড়া throbber এবং এটি এর অভিভাবক শৈলী যোগ করা .ajax-progress-throbber

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url("../images/loading-small.gif");
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

আমি দ্রুপাল.জ্যাক্স দিয়ে কিছু করতে পারি?

হ্যাঁ, আমি এমন কিছু পদ্ধতি পেয়েছি যা আপনি অ্যাজাক্স উপাদানগুলির জন্য ওভাররাইট করতে পারেন (বোতাম, লিঙ্কগুলি, ইত্যাদি)। আমি এখানে একটি উদাহরণ দেখিয়েছি: ড্রুপাল ফর্ম এজেএক্স কীভাবে প্রসারিত বা "হুক" করা যায়? । তবে এই ক্ষেত্রে এটি এতটা ভাল হবে না।
অগ্রগতির উপাদানটি beforeSendপর্যায়ে প্রদর্শিত হচ্ছে, তাই এটি হওয়ার আগে আপনি কিছু করতে পারেন।


তথ্যের জন্য আপনাকে অনেক ধন্যবাদ, তবে আমি কীভাবে আমার সমস্যা সমাধানের জন্য এটি ব্যবহার করব তা নিশ্চিত নই; আপনি কি বলছেন যে কমপক্ষে ভিউস মডিউলটি হ্যাক না করে সিএসএসের বাইরে ডিফল্ট ভিউজ অ্যাজ্যাক্স লোডিং আচরণ যুক্ত / পরিবর্তন করা সম্ভব নয়?
ক্লাইভ

মানে, আপনি সিএসএস ব্যবহার করতে পারেন, কারণ দর্শনগুলিও এটি ব্যবহার করে। কেবল লুকান .throbberএবং কিছু শৈলী এতে যুক্ত করুন.ajax-progress-throbber
কলব্রো

ঠিক আছে, সুতরাং ব্লকটিতে উভয়ই উদ্ভাসিত ফিল্টার ফর্ম এবং নিজেই দেখুন, .ajax-progress-throbberকোনও এজেএক্স চালু হওয়ার সময় একটি শ্রেণি পেতে ? আমাকে অবশ্যই স্বীকার করতে হবে যে আমি এটি ঘটছি তা লক্ষ্য করি নি তবে আমি পরীক্ষা করব এবং আপনি মনে করেন আমি কোনও beforeSendফাংশনে jQuery অ্যানিমেশনটি চালাতে সক্ষম হব (আপনার অন্যান্য প্রশ্নের উত্তরের ভিত্তিতে)? ধন্যবাদ, আমি সত্যিই ভিউগুলি ব্যবহার করি না এবং কী হচ্ছে তা সন্ধানের জন্য কোডের প্রতিটি বিটটিতে সমস্ত দিক দিয়ে খনন করা আমার বিরক্ত করা যায় না! আমি কীভাবে চেষ্টা করে এগিয়ে যাব তা আপনাকে জানাব
ক্লাইভ

1
ফর্মের উপাদানগুলিতে আপনি যে বিবর্ণ প্রভাবটি চান তা অর্জন করার জন্য কিছুটা মনে রাখবেন, আপনি jQuery অ্যানিমেশনগুলির পরিবর্তে সিএসএস ট্রানজিশনগুলিও ব্যবহার করতে পারেন, যদিও jQuery অ্যানিমেশনগুলি সমস্ত ব্রাউজার এবং সিএসএস ট্রানজিশনে কেবল সর্বশেষ প্রজন্মের জন্য কাজ করবে।
লেস্টার পিবডি

ধন্যবাদ @ লেস্টার, আমি বরং আপাতত jQuery ব্যবহার করব। দুর্ভাগ্যক্রমে কালাব্রো আপনার পরামর্শ কার্যকর করে না; ভিউ বা এক্সপোজড ফিল্টার ব্লক নয়, .ajax-progress-throbberক্লাসটি যে কোনও মুহুর্তে প্রয়োগ করুন যাতে আপনার পদ্ধতিটি কাজ করবে না। যদিও চেষ্টা করার জন্য ধন্যবাদ
ক্লাইভ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.