गतिशील रूप से बनाए गए तत्वों पर डेटापिकर () डालना - JQuery / JQueryUI

Question

मैंने गतिशील रूप से टेक्स्टबॉक्स बनाया है, और मैं चाहता हूं कि उनमें से प्रत्येक क्लिक पर एक कैलेंडर प्रदर्शित करने में सक्षम हो। मैं जो कोड उपयोग कर रहा हूं वह है:

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

जो केवल पहले टेक्स्टबॉक्स पर काम करेगा, भले ही मेरे सभी टेक्स्टबॉक्स में एक कक्षा हो, जिसे datepicker_recurring_start कहा जाता है।

आपका सहयोग सराहनीय है!

Comments

जब आप "गतिशील रूप से निर्मित" कहते हैं, तो क्या आप पृष्ठ लोड होने से पहले या पृष्ठ लोड होने के बाद जावास्क्रिप्ट के साथ कोड-पीछे का मतलब है? क्योंकि पेज लोड होने के बाद अगर एलिमेंट्स जोड़े जाते हैं, तो आपको हर बार एक नया टेक्स्टबॉक्स जोड़ने के लिए कैलेंडर को रिबंड करना होगा।

— डेंजरमोनी

मैं इसे PHP के साथ कोड-पीछे लोड कर रहा हूं।

— डूबी

मुझे लगता है कि आप भ्रमित हो रहे होंगे, लेकिन फिर आपके द्वारा दी गई जानकारी के साथ यह बताना मुश्किल है। तो बस पुष्टि करने के लिए, क्या आप पुष्टि कर सकते हैं कि 'डायनामिक रूप से बनाए गए टेक्स्टबॉक्स' से आपका क्या मतलब है।

— Tr1stan

यदि मैं 'पेज एक' लोड कर रहा हूं, तो php यह देखने के लिए db को देखता है कि 'पेज एक' में कितने डेट टेक्स्टबॉक्स हैं और इसे प्रदर्शित करता है। इसलिए जब 'पेज वन' लोड होता है, तो 4 टेक्स्टबॉक्स होंगे, जिन्हें डेटपिकर () लोड करना होगा। 'पेज दो' में 7 टेक्स्टबॉक्स हैं जिन्हें डेटपिकर () फ़ंक्शन को लोड करने की आवश्यकता है।

— डूबी

यदि आपको पहली बार कॉल करने के बाद डेटा पिकर के काम नहीं करने की समस्या है, तो इस उत्तर को देखें: stackoverflow.com/a/16283547/1329910 अपनी समस्या को डेटपिकर को अपनी कक्षा में जोड़ने के साथ करना पड़ सकता है: hasDatepicker

— व्लाद

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

datepicker यह जांचने के लिए पर्याप्त चतुर है कि क्या यह पहले से ही बना है या नहीं (सभी jQueryUI घटक वैसे) यदि jQuery का संस्करण 1.7 से नीचे है तो आप बस लाइव का

— ilyes kooli

आप एक फिल्टर जोड़ना चाह सकते हैं:not(.hasDatepicker)

— सलमान ए

Jp.clone () को किसी क्षेत्र में शामिल करने की तारीख से सावधान रहें। यदि आप ऐसा करते हैं, तो इसे हैडटपिकर क्लास को हटाने के लिए जोड़ें और आईडी डेटपिकर आपके इनपुट में जोड़ देता है: .... ('input.hasDatepicker') देखें।

— याहरमन

Answer 2

मेरे लिए नीचे jquery ने काम किया:

दस्तावेज़ में "बॉडी" बदलना

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

स्कफंद्री का आभार

नोट: सुनिश्चित करें कि आपकी आईडी प्रत्येक क्षेत्र के लिए अलग है

Comments

सही - मेरे लिए मुझे $ का उपयोग करना है (दस्तावेज़) और $ नहीं ('शरीर') - कोड के छोटे स्निपेट के साथ समस्या को हल करना। मुझे कोई समस्या नहीं काम करने के लिए उदाहरण मिल सकता है, लेकिन जैसे ही मैं अपनी जावास्क्रिप्ट के एक झुंड में एक बेला में जोड़ता हूं यह कोड मेरे लिए अब काम नहीं करता है। हालांकि दोनों को धन्यवाद।

— टॉम स्टिकेल

Answer 3

Skafandri द्वारा उत्कृष्ट उत्तर +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();गतिशील रूप से अन्य टेक्स्टबॉक्स तत्वों बाद आपको फिर ।

मैं कॉल के कॉलबैक पद्धति में ऐसा करने की सलाह दूंगा जो तत्वों को DOM में जोड़ रहा है।

तो चलिए बताते हैं कि आप तत्वों को स्रोत से खींचने और उन्हें DOM में लोड करने के लिए JQuery लोड विधि का उपयोग कर रहे हैं, आप कुछ इस तरह करेंगे:

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

Comments

यह हमेशा मेरे अनुभव से काम नहीं करता है। सबसे अच्छा मामला यह है कि अपने तत्वों के लिए अद्वितीय आईडी जोड़ें और उन आईडी का उपयोग करने के लिए उन्हें संदर्भित करें और दिनांक को लागू करें। आंतरिक रूप से लगता है कि प्लगइन उन चयनकर्ताओं का उपयोग करता है।

— वेस जॉनसन

Answer 6

गतिशील तत्वों के लिए नई विधि MutationsObserver है .. निम्न उदाहरण अंडरस्कोर का उपयोग करता है। जेएस (_.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

यह मेरे लिए काम कर रहा था (jquery datepicker का उपयोग करके):

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

Answer 8

अन्य किसी भी समाधान ने मेरे लिए काम नहीं किया। मेरे ऐप में, मैं jquery का उपयोग करके दस्तावेज़ में दिनांक सीमा तत्वों को जोड़ रहा हूं और फिर उन्हें डेटापिक लागू कर रहा हूं। इसलिए किसी भी घटना समाधान ने किसी कारण से काम नहीं किया।

यह वही है जो अंत में काम किया है:

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

आशा है कि यह किसी की मदद करता है क्योंकि यह मुझे थोड़ा वापस सेट करता है।

Answer 9

आप जावास्क्रिप्ट प्रकार में क्लास .datepicker जोड़ सकते हैं, इनपुट प्रकार को गतिशील रूप से बदलने में सक्षम होने के लिए

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

Answer 10

मैंने datepickerसभी इनपुट्स के साथ कंस्ट्रक्टर को फिर से लागू करने से बचने के लिए @skafandri उत्तर को संशोधित किया है.datepicker_recurring_start क्लास के ।

यहाँ HTML है:

<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();
    });
}

इसके लिए जरूरी है कि आपके इनपुट में 'mostrar_calendario' श्रेणी हो।

लाइव JQuery के लिए है 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
    });
});