গতিশীলভাবে তৈরি উপাদানগুলিতে ডেটপিকার () লাগানো - জ্যাকুয়ারি / জিকুয়েরইউআই

Question

আমি গতিশীলভাবে পাঠ্যবাক্স তৈরি করেছি এবং আমি চাই যে এগুলির প্রত্যেকটি ক্লিক করে একটি ক্যালেন্ডার প্রদর্শন করতে সক্ষম হবে। আমি যে কোডটি ব্যবহার করছি তা হ'ল:

$(".datepicker_recurring_start" ).datepicker();

যা কেবলমাত্র প্রথম পাঠ্যবক্সে কাজ করবে, যদিও আমার সমস্ত পাঠ্যবক্সে ডেটপিকার_রেচারিং_স্টার্ট নামে একটি শ্রেণি রয়েছে।

আপনার সাহায্য অনেক প্রশংসা করা হয়!

Comments

আপনি যখন "গতিশীলভাবে তৈরি" বলছেন, পৃষ্ঠা বোঝার আগে কোড-পিছনের সাথে বা পৃষ্ঠাটি লোড হওয়ার পরে জাভাস্ক্রিপ্টের সাথে কী বোঝাতে চান? কারণ পৃষ্ঠাটি লোড হওয়ার পরে যদি উপাদানগুলি যুক্ত করা হয় তবে প্রতিবার নতুন পাঠ্যবক্স যুক্ত হওয়ার সাথে সাথে আপনাকে ক্যালেন্ডারটি পুনরায় ফিরিয়ে আনতে হবে।

— ডেনজারমনকি

আমি পিএইচপি দিয়ে কোড-পিছনে এটি লোড করছি।

— মোড়া

আমি মনে করি আপনি হয়ত বিভ্রান্ত হয়ে পড়ছেন তবে আপনি যে তথ্য সরবরাহ করেছেন তার সাথে তা বলা শক্ত। সুতরাং কেবল নিশ্চিত করতে, আপনি কীভাবে গতিশীলভাবে তৈরি পাঠ্যবাক্সগুলি বোঝাতে পারেন তা নিশ্চিত করতে পারেন।

— Tr1stan

আমি যদি 'পৃষ্ঠা ওয়ান' লোড করছি, পিএইচপি 'পৃষ্ঠা এক'তে কত তারিখের পাঠ্যবাক্স রয়েছে তা দেখতে ডিবিটির দিকে তাকিয়ে এটি প্রদর্শন করে। সুতরাং যখন 'পৃষ্ঠা এক' লোড হবে তখন 4 টি পাঠ্যবাক্স থাকবে যা ডেটপিকার () লোড করতে হবে। 'দুটি পৃষ্ঠায়' 7 টি পাঠ্যবাক্স রয়েছে যার জন্য ডেটপিকার () ফাংশনটি লোড করা দরকার।

— 3:38

আপনি ডাটা জুতো একটি প্রথম কল পর কাজ করছে না সঙ্গে একটি সমস্যা থাকে, তাহলে এই উত্তরটি যাচাই করুন: stackoverflow.com/a/16283547/1329910 আপনার সমস্যা datepicker যোগ নিজস্ব বর্গ সঙ্গে কি আছে করতে পারেন: hasDatepicker

— Vlad

Answer 1

কৌশলটি এখানে:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

ডেমো

$('...selector..').on('..event..', '...another-selector...', ...callback...);সিনট্যাক্স মাধ্যম:
একটি শ্রোতা যোগ করুন ...selector..( bodyইভেন্টের জন্য আমাদের উদাহরণে) ..event..(আমাদের উদাহরণে 'ফোকাস')। নির্বাচকদের সাথে মেলে এমন ম্যাচিং নোডগুলির সমস্ত বংশধরের জন্য ...another-selector...( .datepicker_recurring_startআমাদের উদাহরণে) ইভেন্ট হ্যান্ডলারটি প্রয়োগ করুন ...callback...(আমাদের উদাহরণে ইনলাইন ফাংশন)

Http://api.jquery.com/on/ এবং বিশেষত "প্রতিনিধি ইভেন্টগুলি" সম্পর্কিত বিভাগটি দেখুন

Comments

এটি এমন একটি সমাধান যা কোনও ধরণের গতিশীল সংযোজনে কাজ করবে। আপনাকে +1

— ড্যাঞ্জারমনকি

যদিও এটি আমার কাছে আশ্চর্যজনক মনে হয়েছে যে আপনি প্রতিবার .datapicker()পাঠ্যবক্সটি ফোকাস অর্জন করতে কল করতে চান - সুতরাং আপনি এই পদ্ধতির সাথে সতর্ক থাকতে চান (ধরে নিচ্ছি আমি এই অধিকারটি পড়ছি)। তবে আমি মনে করি আপনি .datapicker()ঠিকঠাক হয়ে যাবেন কারণ এটি সম্ভবত পরীক্ষা করে নেবে যে পুনরায় তৈরি করার চেষ্টা করার আগে একটি ডেটপিকার তৈরি করা হয়েছে কিনা। অন্যান্য কোড সহ আপনার এই অনুগ্রহ নাও থাকতে পারে। এছাড়াও, .on (শুধুমাত্র JQuery 1.7 চালু হয় - তাই নিশ্চিত আপনি সঠিক সংস্করণ ব্যবহার করছেন ভুলবেন না।

— Tr1stan

ডেটপিকারটি এটি ইতিমধ্যে তৈরি হয়েছে কিনা তা যাচাই করার জন্য যথেষ্ট চৌকস (উপায় দ্বারা সমস্ত jQueryUI উপাদান) যদি jQuery সংস্করণটি 1.7 এর নীচে থাকে তবে আপনি কেবল লাইভ

— ইলিস কুলি

আপনি একটি ফিল্টার যুক্ত করতে চাইবেন:not(.hasDatepicker)

— সালমান এ

তারিখ-চয়নকারী অন্তর্ভুক্ত এমন কোনও অঞ্চলের মধ্যে jQuery.clone () ব্যবহার করা থেকে সাবধান থাকুন। যদি আপনি তা করেন তবে hasDatepicker শ্রেণি অপসারণ করতে এটি যুক্ত করুন এবং আইডি ডেটপিকারটি আপনার ইনপুটটিতে যুক্ত করে: .... সন্ধান করুন ('ইনপুট.হ্যাসেটপেটিকার') remove সরানক্লাস ('hasDatepicker') remove সরানআউট ('আইডি');

— ইয়াহেরমান

Answer 2

আমার জন্য jquery নীচে কাজ করেছে:

"বডি" নথিতে পরিবর্তন করা হচ্ছে

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

স্কাফান্দ্রিকে ধন্যবাদ

দ্রষ্টব্য: প্রতিটি ক্ষেত্রের জন্য আপনার আইডি আলাদা কিনা তা নিশ্চিত করুন

Comments

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

— টম স্টিকেল

Answer 3

স্কাফানড্রি +1 দ্বারা দুর্দান্ত উত্তর

এই মাত্র hasdatepicker ক্লাস পরীক্ষা করার জন্য আপডেট করা হয়।

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

Comments

তা হলে কি সংক্ষিপ্ত করা যায় $('body').on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();});?

— লুক স্টিভেনসন

Answer 4

নিশ্চিত করুন যে .date-pickerশ্রেণীর সাথে আপনার উপাদানটির ইতিমধ্যে কোনও hasDatepickerক্লাস নেই। যদি তা হয় তবে পুনরায় আরম্ভের চেষ্টাও $myDatepicker.datepicker();ব্যর্থ হবে! পরিবর্তে আপনার প্রয়োজন ...

$myDatepicker.removeClass('hasDatepicker').datepicker();

Comments

ঠিক তাই! গতিশীল লোড উপাদানগুলি আমার পক্ষে সমস্যা না হয়ে শেষ হয়েছিল, তাই এই সমাধানটি কার্যকর হয়েছিল।

— স্টার্লিং বেসন

Answer 5

.datepicker();অন্যান্য পাঠ্যবাক্স উপাদানগুলি গতিশীলভাবে তৈরি করার পরে আপনাকে আবার চালনা করতে হবে ।

আমি কলটির কলব্যাক পদ্ধতিতে এমনটি করার পরামর্শ দিচ্ছি যা ডিওমে উপাদান যুক্ত করছে।

সুতরাং আসুন আমরা জিক্যারি লোড পদ্ধতিটি কোনও উত্স থেকে উপাদানগুলি টানতে এবং সেগুলি ডিওএম-এ লোড করতে ব্যবহার করে যাচ্ছি বলে আপনি এরকম কিছু করতে পারেন:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

Comments

এটি আমার অভিজ্ঞতা থেকে সবসময় অনুশীলনে কাজ করে না। সর্বোত্তম কেস হ'ল আপনার উপাদানগুলিতে অনন্য আইডি যুক্ত করা এবং সেই আইডিগুলি তাদের রেফারেন্স করতে এবং ডেটপিকারটি প্রয়োগ করা। অভ্যন্তরীণভাবে মনে হয় প্লাগইনটি সেই নির্বাচনকারীদের ব্যবহার করে।

— ওয়েস জনসন

Answer 6

গতিশীল উপাদানের জন্য নতুন পদ্ধতি MutationsObserver .. নিম্নলিখিত উদাহরণে ব্যবহার underscore.js করতে ব্যবহার (_.each) ফাংশন।

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

Answer 7

এটিই আমার জন্য কাজ করেছিল (জ্যাকারি ডেটপিকার ব্যবহার করে):

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});

Answer 8

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

অবশেষে এটিই কাজ করেছিল:

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

আশা করি এটি কাউকে সহায়তা করবে কারণ এটি আমাকে কিছুটা পিছনে ফেলেছে।

Answer 9

আপনি একটি জাভাস্ক্রিপ্ট ফাংশনে ডেটপিকার ক্লাস যুক্ত করতে পারেন, ইনপুট ধরণের পরিবর্তনশীল করতে সক্ষম হতে

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

Answer 10

ক্লাস datepickerসহ সমস্ত ইনপুটগুলিতে কনস্ট্রাক্টরটিকে পুনরায় প্রয়োগ করতে এড়াতে আমি @ স্কেফান্ড্রি উত্তরটি পরিবর্তন করেছি .datepicker_recurring_start।

এইচটিএমএল এখানে:

<div id="content"></div>
<button id="cmd">add a datepicker</button>

এখানে জেএস:

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

এখানে একটি ওয়ার্কিং ডেমো

Answer 11

এটিই আমার জন্য JQuery 1.3 এ কাজ করেছিল এবং এটি প্রথম ক্লিক / ফোকাসে প্রদর্শিত হচ্ছে

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

এটির জন্য আপনার ইনপুটটির শ্রেণি 'মোস্টার_ক্যালেন্ডিও' থাকা দরকার

নতুন সংস্করণগুলির জন্য লাইভ হ'ল জিকুয়ারি 1.3+ এর জন্য আপনার এটিকে "চালু" এর সাথে মানিয়ে নিতে হবে

পার্থক্য সম্পর্কে এখানে আরও দেখুন http://api.jquery.com/live/

Answer 12

$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});