[英]How to add jquery datepicker to dynamically created input which lives in an ajax called page
Forgive me if this has been answered, but I have searched this site using creative versions of different search terms and came up blank. 请回答我,请原谅我,但我使用不同搜索字词的创意版本搜索了该网站,结果空白。
I have a php
webpage (index.php), that uses ajax
to load another php
page (dataQuery.php) which has an html
form on it. 我有一个
php
网页(index.php),它使用ajax
加载另一个具有html
表单的php
页面(dataQuery.php)。 I have created a small script ( addInput()
) that allows the user to dynamically add as many input fields to this form as they like. 我创建了一个小脚本(
addInput()
),该脚本允许用户根据需要向此表单动态添加尽可能多的输入字段。 One of these fields is a date field that I would like to have a datepicker attached to. 这些字段之一是日期字段,我想附加一个日期选择器。 In the past I have included any
javascript
to the ajax
callback, however in this case I could not get it to work. 过去,我在
ajax
回调中包含了任何javascript
,但是在这种情况下,我无法使其正常工作。
Here is my function Query()
: 这是我的
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();
}
Here is my function addInput()
这是我的
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=\"\">";
}
I don't know if this is possible, but I have a feeling it is. 我不知道这是否可能,但是我有感觉。 Appreciate any help.
感谢任何帮助。
There are some errors with your code, you have missed the newlabour_date for the generated input field and table.insertRow(rowcount);
有你的代码的一些错误,你已经错过了产生输入字段和newlabour_date
table.insertRow(rowcount);
giving out of rage error. 发出愤怒的错误。
A working example without Ajax: http://jsfiddle.net/qxarbpcc/ 一个没有Ajax的工作示例: http : //jsfiddle.net/qxarbpcc/
Here is the updated version of your addInput function: 这是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=\"\">";
}
Then change your Ajax callback to this: 然后将您的Ajax回调更改为:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("container").innerHTML=xmlhttp.responseText;
$('body').on('focus',".newlabour_date", function(){
$(this).datepicker();});
}
Don't forget to add jquery and jqueryui in head section. 不要忘记在头部添加jquery和jqueryui。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.