it-swarm.com.ru

jQuery DatePicker не работает на динамически создаваемых HTML

Я динамически создаю пару div с внутренним контролем. Два из этих элементов управления должны быть сборщиками даты. Но по какой-то причине они не отображаются (отображается только входной текст) Это работает, если я создаю статический HTML, но не когда я использую динамический.

Это код, который я использую для генерации HTML (я вижу div)

var ShowContainerDiv = document.createElement('DIV');

var btnShowDiv = document.createElement('DIV');
btnShowDiv.id = 'btnShowDiv ';
btnShowDiv.title = 'Change';
btnShowDiv.index = 120;

var lblShow = document.createElement('label')
lblShow.htmlFor = "btnShowDiv";
lblShow.appendChild(document.createTextNode('Show'));
btnShowDiv.appendChild(lblShow );
btnShowDiv.onclick = function () {
    dropdown.style.visibility = "visible";
};

var dropdown = document.createElement('DIV');
dropdown.style.backgroundColor = 'white';
dropdown.style.borderStyle = 'solid';
dropdown.style.borderWidth = '2px';
dropdown.style.cursor = 'pointer';
dropdown.style.textAlign = 'left';
dropdown.style.width = '150px';

var chkRed = document.createElement("input");
chkRed.type = "checkbox";
chkRed.id = "chkRed";
chkRed.value = "Red";
chkRed.checked = false;
var lblRed = document.createElement('label')
lblRed.htmlFor = "chkRed";
lblRed.style.color = "#F00";
lblRed.appendChild(document.createTextNode('Red'));

var chkYellow = document.createElement("input");
chkYellow.type = "checkbox";
chkYellow.id = "chkYellow";
chkYellow.value = "Yellow";
chkYellow.checked = false;
var lblYellow = document.createElement('label')
lblYellow.htmlFor = "chkYellow";
lblYellow.style.color = "#FF0";
lblYellow.appendChild(document.createTextNode('Yellow'));

var chkGreen = document.createElement("input");
chkGreen.type = "checkbox";
chkGreen.id = "chkGreen";
chkGreen.value = "Green";
chkGreen.checked = false;
var lblGreen = document.createElement('label')
lblGreen.htmlFor = "chkGreen";
lblGreen.style.color = "#0F0";
lblGreen.appendChild(document.createTextNode('Green'));

var dateFrom = document.createElement("input");
dateFrom.id = "txtDateFrom";
dateFrom.type = "text";
dateFrom.className = "datepicker";
dateFrom.style.width = "70px";
dateFrom.readonly = "readonly";
var lblDateFrom = document.createElement('label')
lblDateFrom.htmlFor = "txtDateFrom";
lblDateFrom.appendChild(document.createTextNode('From'));

var dateTo = document.createElement("input");
dateTo.id = "txtDateTo";
dateTo.type = "text";
dateTo.className = "datepicker";
dateTo.style.width = "70px";
dateTo.readonly = "readonly";
var lblDateTo = document.createElement('label')
lblDateTo.htmlFor = "txtDateTo";
lblDateTo.appendChild(document.createTextNode('To'));

var btnDone = document.createElement("input");
btnDone.type = "button";
btnDone.name = "btnDone";
btnDone.value = "Done";
btnDone.onclick = function () {
    dropdown.style.visibility = "hidden";
};

dropdown.appendChild(chkRed);
dropdown.appendChild(lblRed);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkYellow);
dropdown.appendChild(lblYellow);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkGreen);
dropdown.appendChild(lblGreen);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateFrom);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateTo);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(btnDone);

ShowContainerDiv.appendChild(btnShowDiv);
ShowContainerDiv.appendChild(dropdown);

g.event.addDomListener(btnShowDiv, 'click', function () {
    dropdown.visible = true;
    dropdown.style.visibility = "visible";
});

g.event.addDomListener(btnDone, 'click', function () {
    dropdown.visible = false;
    dropdown.style.visibility = "hidden";
});

map.controls[g.ControlPosition.TOP_RIGHT].Push(ShowContainerDiv);

Затем в файле .js у меня есть это (я проверил, и я включаю файл)

$(document).ready(function () {
    $(".datepicker").datepicker({
        dateFormat: 'yy/m/d',
        firstDay: 1,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        autosize: true,
        buttonText: "Select date",
        buttonImage: '../Content/images/calendar.png',
        buttonImageOnly: true
    });
});

Почему средство выбора даты не появляется? Спасибо! Гильермо.

15
polonskyg

Когда ты пишешь 

$(document).ready(function () {
    $(".datepicker").datepicker({...});
});

Этот фрагмент выполняется сразу после загрузки страницы. Таким образом, ваши динамические датеры еще не там. Вам нужно вызывать $(aSuitableSelector).datepicker(...) для каждого вновь вставленного элемента. Во-первых, используйте переменную для хранения ваших опций:

var datePickerOptions = {
    dateFormat: 'yy/m/d',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    // ...
}

Это позволяет вам писать 

 $(document).ready(function () {
    $(".datepicker").datepicker(datePickerOptions);
 });

и написать 

 // right after appending dateFrom to the document ...
 $(dateFrom).datepicker(datePickerOptions);

 //...

 // right after appending dateTo ...
 $(dateTo).datepicker(datePickerOptions);

Вы также можете использовать способность JQuery прослушивать изменения DOM чтобы избежать необходимости применять магию JS к вновь вставленным элементам - но я не думаю, что это того стоит.

25
tucuxi

Я нашел самый простой способ добавить средство выбора даты для динамически добавляемого поля ввода:

    $('body').on('focus',".datepicker", function(){
        $(this).datepicker();
    });
2
dinesh regmi

Самый простой способ, который я нашел, чтобы решить эту проблему, это использовать плагин livequery:

http://docs.jquery.com/Plugins/livequery

Вместо того чтобы применять указатели даты ко всем объектам определенного класса, вы указываете LiveQuery применить его к этим объектам. LiveQuery, в свою очередь, будет продолжать применять указатель даты, даже если впоследствии DOM изменится.

Я не видел падений производительности при использовании этого, и изменения кода действительно минимальны (вам нужно добавить плагин на страницу и изменить только одну строку кода).

Вы бы использовали это так:

$(".datepicker").livequery(
        function(){ 
            // This function is called when a new object is found. 
            $(this).datepicker({ ...}});
        }, 
        function() { 
            // This function is called when an existing item is being removed. I don't think you need this one so just leave it as an empty function.
        }
); 

С этого момента каждый раз, когда вы добавляете объект с классом datepicker, к нему автоматически применяется плагин datepicker.

2
Flater

Вы можете просто использовать это.

$('body').on('focus',".date-picker", function(){
  $(this).datepicker();
});
1
Naveen Kumar

Пожалуйста, добавьте ниже код после добавления элемента.

$ (". datepicker"). datepicker ({ dateFormat: 'yy/m/d', firstDay: 1, changeMonth: true, changeYear: true, showOn: 'both', autosize: true, buttonText: "Выбрать дату", buttonImage: '../Content/images/calendar.png', buttonImageOnly: true }) ;

0
BalaNagaPrasad
$( ".datepicker" ).datepicker({inline: true,dateFormat: "dd-mm-yy"});
0
Vipin Yadav

Код, который связывает указатели даты, лучше всего выполнять сразу после динамического создания html. Если вы хотите сохранить код для инициализации datepicker в отдельном файле, я бы порекомендовал следующий подход: После того, как вы закончите генерировать HTML (я предполагаю, что он сгенерирован на документе готово), используйте

$(document).trigger("customHtmlGenerated");

И в файле datepicker вместо $(document).ready(function(){...}) используйте $(document).bind("customHtmlGenerated", function(){...});

0
FreeCandies

Я положил 

$( "#InstallDate" ).datepicker({
  showOn: "button",
    minDate: 0, // no past dates
  buttonImage: "../images/Date.png",
  buttonImageOnly: true,
  buttonText: "Select date",
  dateFormat: 'yy-mm-dd',
}); 

в файл сценария DatePicker.js, а затем добавил следующую строку в конце моей сгенерированной формы Ajax Html

<script type='text/javascript' src='/inc/DatePicker.js'></script> 
0
zzapper