জাভাস্ক্রিপ্ট কার্যকর করা যখন একটি উইজেট ব্যাকএন্ডে যুক্ত হয়

20

আমার উইজেটগুলির সাথে জাভাস্ক্রিপ্ট নিয়ন্ত্রণগুলি সংযুক্ত রয়েছে।

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

আমি যখন একটি নতুন উইজেট যুক্ত করি, সেগুলি সঠিকভাবে কাজ করে না, আমি মার্কআপ পাই তবে কোনও জাভাস্ক্রিপ্ট ইভেন্ট কার্যকর হয় না।

আমি যদি নতুন উইজেটটি সংরক্ষণ করি, ফর্মটি যখন পুনরায় লোড হয়, নিয়ন্ত্রণগুলি সঠিকভাবে তৈরি হয় এবং এখন কাজ করে।

পৃষ্ঠাটি রিফ্রেশ করাও সমস্যাটি ঠিক করে, তবে কেবল বিদ্যমান উইজেটগুলির জন্য। নতুন উইজেটগুলিতে এখনও এই সমস্যা রয়েছে।

বিশেষত আমি এই পয়েন্টগুলিতে নির্বাচিত ইনপুটগুলিতে নির্বাচন করতে চলেছি:

নথি প্রস্তুত
Ajaxcomplete

আমি যাচাই করেছি যে আমার কোডটি প্রতিটি ইভেন্টে পছন্দসইভাবে চালিত হয়েছে, তবে ফলাফল প্রত্যাশার মতো নয়।

এখানে একটি পরীক্ষামূলক প্লাগইন যা সমস্যাটি দেখায়:

https://gist.github.com/Tarendai/8466299

আপনি দেখতে পাবেন আমার একটি পাল্টা রয়েছে যা প্রতিটি নির্বাচিত উপাদানগুলির সাথে বেড়ে যায় এটি দেখতে পায় যে এটি রূপান্তর করতে পারে।

মন্তব্য:

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

সুতরাং আমি কীভাবে নির্বাচনের আগে ব্যবহারকারীর রিফ্রেশ / ক্লিক করে পরিবর্তনগুলি বলার আগেই নিয়ন্ত্রণের কাজটি করব?

widgets javascript

— টম জে নোয়েল
সূত্র

এটি একটি ইভেন্ট প্রতিনিধি ইস্যু। আপনার jQuerys .on()পদ্ধতি ব্যবহার করা উচিত । যার জন্য আপনাকে নথিতে একটি ইভেন্ট বাঁধতে হবে। তবে কোন ইভেন্টটি উপযুক্ত হবে আমি এখনই নিশ্চিত নই। শেষ পর্যন্ত এটি কারণ কারণ পৃষ্ঠাটি লোড হওয়ার সময় আপনার আসল বাইন্ডিংগুলি ডমটির প্রাথমিক সংস্করণকে উপস্থাপন করে এবং বেশিরভাগ অংশে এজ্যাক্সের মাধ্যমে যুক্ত হওয়া নতুন উপাদানগুলির (উইজেট সামগ্রী) অন্ধ থাকে। আশা করি এটি আপনাকে সঠিক দিকে নির্দেশ করবে, যদি আমি কর্মক্ষেত্রে থাকি না তবে আমি আরও ভাল উত্তর দিতে পারি।

এটিই আমি প্রত্যাশা করেছিলাম এবং কেন আমি jQuery( document ).ajaxStop( function() {অংশটি যুক্ত করেছি যাতে আমি সদ্য লোড হওয়া উইজেটগুলিতে নিয়ন্ত্রণগুলি শুরু করতে পারি। তবে আমি যদি এই লাইনটি সরিয়ে ফেলে থাকি তবে আমি নতুন উইজেটগুলির মানক এইচটিএমএল নির্বাচনের ইনপুটগুলির প্রত্যাশা করব, তবে তারা = গুলি করবে না

— টম জে নওয়েল

@ অ্যারন-হলব্রুক যেমন মন্তব্য করেছেন, এর ব্যবহারগুলি widget-updatedএবং widget-addedইভেন্টগুলি ব্যবহার করে এটি সবচেয়ে পরিষ্কার approach এছাড়াও আমি @ মাইকেলজেমস কোডে এলিমেন্ট আইডি ব্যবহার করে জোর দিতে চাই #widgets-right। আপনার জেএস কোডের অভ্যন্তরে সক্রিয় উইজেট উপাদানগুলিকে লক্ষ্য করার জন্য এটি ব্যবহার করার বিষয়ে নিশ্চিত হন অন্যথায় আপনি নকল উপাদানগুলি পেতে পারেন কারণ আপনার কোডটি স্ক্রিনের বাম দিকে লুকানো নিষ্ক্রিয় উইজেট উপাদান নির্বাচন করতে পারে (এবং উইজেট যুক্ত হওয়ার পরে ক্লোন হয়ে যায়)।

— জুলিয়েন

12

বড় খবর,

আমি এটা ঠিক করেছি।

আমার প্রাথমিক মন্তব্যে আপনার বক্তব্য অনুপস্থিত এবং আপনাকে ইতিমধ্যে কার্যকর করা হয়েছে এমন একটি উত্তর দেওয়ার জন্য দুঃখিত। এটি আমাকে ট্রেনে যাওয়ার সময় আমার ফোনে উত্তর দিতে শেখাবে!

আপনার এজ্যাকস্টপের ব্যবহার সঠিক। বেশিরভাগ অংশের জন্য হ'ল জেএস সঠিকভাবে কাজ করছে, আপনি সিএসএস শৈলীর সূচনা এবং ডিওমের পরিবর্তনগুলি দেখতে পাচ্ছেন।

বিষয়টি আপনার নির্বাচকের কাছে প্রকৃতপক্ষে lies

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

সুতরাং আপনি বাম পাশের একটি নির্বাচন করতে হবে। নীচে সংশোধিত কোড দেওয়া হয়েছে:

<script>
jQuery( document ).ready( function( $ ) {
    function runSelect() {
        var found = $( '#widgets-right select.testselectize' );
        found.each( function( index, value ) {

            $( value ).selectize();
                .removeClass( 'testselectize' )
                .addClass( 'run-' + window.counter );

            console.log( $val );
            window.counter++;
        } );
    }

    window.counter = 1;

    runSelect();

    $( document ).ajaxStop( function() {
        runSelect();
    } );
} );
</script>

— সম্রাট্
সূত্র

পবিত্র মোলি, আমাকে এই পরীক্ষা করতে হবে <3

— টম জে নোয়েল

একটি প্রধান মাথা ব্যাথার খুব মার্জিত সমাধান!

— বসক

3

আমি প্রতিটি একক 'এজাক্সটপ' ইভেন্টে চালানো বিরুদ্ধে পরামর্শ দেব এবং পরিবর্তে 'উইজেট-যুক্ত' পাশাপাশি 'উইজেট আপডেট হওয়া' ইভেন্টগুলিতে ব্যবহার করার পরামর্শ দেব।

— টায়রুন

16

@ অ্যারন-হলব্রুক মন্তব্য করার সাথে সাথে একটি ক্লিনার পরিষ্কার করার পদ্ধতিটি করা হবে:

jQuery(document).on('widget-updated widget-added', function(){
    // your code to run
});

পৃষ্ঠা লোড করার পাশাপাশি উইজেটগুলি আপডেট হওয়ার সময় আপনি অনেক ক্ষেত্রে জেএস চালাতে চাইবেন to আপনি এই মত করতে পারেন।

function handle_widget_loading(){
   // your code to run
}
jQuery(document).ready( handle_widget_loading );
jQuery(document).on('widget-updated widget-added', handle_widget_loading );

উত্তর হিসাবে রেফারেন্সের জন্য এখানে কেবল আটকানো সেই মন্তব্যগুলি খুঁজে পাওয়া অনেক সহজ

— chifliiiii
সূত্র

2

সম্ভবত $ এর পরিবর্তে jQuery ব্যবহার করা উচিত

— মার্ক কপলুন