Как добавить DatePicker JQuery для динамически созданного ввода, который живет в AJAX называется страница

Question

Как добавить DatePicker JQuery для динамически созданного ввода, который живет в AJAX называется страница

Простите, если на этот вопрос ответили, но я искал этот сайт, используя творческие версии различных поисковых терминов, и вылетел пустым.

у меня есть php веб-страница (index.php), которая использует ajax загрузить другой php страница (dataQuery.php), которая имеет html Форма на нем. Я создал небольшой скрипт (addInput()), который позволяет пользователю динамически добавлять в эту форму столько полей ввода, сколько ему нужно. Одним из этих полей является поле даты, к которому я хотел бы присоединить средство выбора даты. В прошлом я включил любой javascript к ajax обратный вызов, однако в этом случае я не мог заставить его работать.

Вот мой function Query():

function Query()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("container").innerHTML=xmlhttp.responseText;

// Tried this suggestion found on stackoverflow:
$('body').on('focus',".newlabour_date", function(){
$(this).datepicker();});

// And this one:
$( "#newlabour_date" ).datepicker();
}
}
xmlhttp.open("GET","/process/dataQuery.php",true);
xmlhttp.send();
}

Вот мой function addInput()

function addInput(table,counter,rowcount)
{
var counter = document.getElementById(counter);
var number = counter.value;
counter.value = ++counter.value;

var rowcount = (rowcount*1+1); // muliply the rowcount by 1 to ensure it doesn't get treated as a concatenation.

var table = document.getElementById(table);
var row = table.insertRow(rowcount);
row.align = "center";

var cell1 = row.insertCell(0);
cell1.className = "bBottom";
cell1.width = "20%";
cell1.height = "21";

cell1.innerHTML = "<input type=\"text\" style=\"position:relative; top:2px;\"class=\"noborder\" name=\"newlabour_date["+number+"]\" id=\"newlabour_date["+number+"]\" size=\"15\" maxlength=\"\" placeholder=\"\" value=\"\">";
}

Я не знаю, возможно ли это, но я чувствую, что это так. Ценю любую помощь.

1

ajax datepicker javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

В вашем коде есть ошибки, вы пропустили newlabour_date для сгенерированного поля ввода
а также table.insertRow(rowcount); выдает ошибку гнева.

Рабочий пример без Ajax:
http://jsfiddle.net/qxarbpcc/

Вот обновленная версия вашей функции addInput:

function addInput(table,counter,rowcount)
{
var counter = document.getElementById(counter);
var number = counter.value;
counter.value = ++counter.value;

var rowcount = parseInt(rowcount)+1; // muliply the rowcount by 1 to ensure it doesn't get treated as a concatenation.

var table = document.getElementById(table);
var row = table.insertRow(0);
row.align = "center";

var cell1 = row.insertCell(0);
cell1.className = "bBottom";
cell1.width = "20%";
cell1.height = "21";

cell1.innerHTML = "<input type=\"text\" style=\"position:relative; top:2px;\" class=\"noborder newlabour_date\" name=\"newlabour_date["+number+"]\" id=\"newlabour_date["+number+"]\" size=\"15\" maxlength=\"\" placeholder=\"\" value=\"\">";
}

Затем измените ваш обратный вызов Ajax на это:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("container").innerHTML=xmlhttp.responseText;

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

Не забудьте добавить jquery и jqueryui в заголовок раздела.

1