我正在开发一个组件，其中数据来自Servlet并设置 在component的标签中。我成功设置了数据 标签。但无法访问html元素或标签值 并在弹出对话框中设置它。当我在控制台中检查它时得到null。
createComponent（）将设置参数，然后调用 createLayout和我在调用编辑时单击事件的布局 窗口方法。在那里我无法找到元素。我试过了 用html和文本方法也没有工作。所以我只是切换到js 并试了一下。但没有成功
我在setData（）方法中获取标签但不在＆gt; getEditWindow（）..请帮助我解决它
new ...client(host, credentials, {
'grpc.min_reconnect_backoff_ms': 1000,
'grpc.max_reconnect_backoff_ms': 10000,
})
/*var timeout_ = setTimeout("location.reload(true);", 30000);*/
var a = randNum();
var timeout=[];
(function($) {
$.fn.createComponent = function(options) {
var req_divId = this.attr('id');
var b=a;
var settings = $.extend({
// These are the defaults.
url : null,
separator : null,
lableTag : ['Block 1','Block 2','block 3','block 4'],
color : 'lavender'
}, options);
return this.each(function() {
if (settings.url != null && settings.separator != null) {
var lableIds=[makeid(),makeid(),makeid(),makeid()];
/* timeout[b] = setInterval(function() {
this.setData(settings.url, settings.separator,lableIds);
}, 3000);*/
$(this).createLayout(lableIds,settings.lableTag,settings.color,b);
$(this).setData(settings.url, settings.separator,lableIds);
} else {
test();
}
});
}
$.fn.createLayout = function(lables,lableTags,background,b) {
console.log("inside createLayout");
var timeDiv = makeid();
var dataIds = [makeid(),makeid(),makeid(),makeid()];
console.log("@CreateLayout : DataIds For Popup inputs :-"+dataIds);
var buttonlist = makeid();
var a = "<div class='row'>"
+ "<div class='col-md-10' style='background-color: "+background+";'>"
+
"<div class='row'>"
+ "<div class='col-md-12 timeline'>"
+
"<div class='col-md-6' id='"+timeDiv+"'></div>"
+
"<div class='col-md-6'>"
+ "<h4>Overall Latency : <lable id='latencyValue'></lable></h4>"
+ "</div>" + "</div>" + "</div>" + "<div class='row'>"
+ "<div class='col-md-12' id='Labels'>" + "<div class='row'>"
+ "<div class='col-md-12'>"
+ "<div class='col-md-6'><h4>Name : </h4></div>"
+ "<div class='col-md-6'><h4>Name :</h4></div>" + "</div>"
+ "</div>" + "<div class='row'>" + "<div class='col-md-12'>"
+ "<div class='col-md-6'>"
+ "<h4>"+ lableTags[0] +": <label id='"+lables[0]+"' /></label></h4>"
+ "</div>" + "<div class='col-md-6'>" + "<h4>"
+ lableTags[1]+" : <label id='"+lables[1]+"'></label>" + "</h4>" + "</div>"
+ "</div>" + "</div>" +
"<div class='row'>" + "<div class='col-md-12'>"
+ "<div class='col-md-6'>" + "<h4>"
+ lableTags[2] +" : <label id='"+lables[2]+"'></label>" + "</h4>" + "</div>"
+ "<div class='col-md-6'>" + "<h4>"
+ lableTags[3] +" : <label id='"+lables[3]+"'></label>" + "</h4>" + "</div>"
+ "</div>" + "</div>" + "</div>" + "</div></div>";
this.append(a);
var b = "<div class='col-md-2' id='"+buttonlist+"'"
+ "style='background-color: green;'>" + "<div align='center'>"
+ "<input class='button' type='button' id='editPopup'"
+ "onclick=getEditWindow('"+lables+"','"+dataIds+"') value='Edit'>" + "</div>"
+ "<div align='center'>"
+ "<input class='button' type='button' id='deletePopup'"
+ "onclick=getDeleteWindow('"+lables+"','"+dataIds+"') value='Delete'>" + "</div>"
+ "<div align='center'>"
+ "<input class='button' type='button' id='Active/Inactive'"
+ "value='Active' onclick=changeStat(this,'"+buttonlist+"','"+lables+"','"+b+"'); >" + "</div>"
+ "</div>" + "<div id='editc' style='display: none;'>"
+ "<form>"
+ "<input type='text' id='"+dataIds[0]+"'> <input type='text'"
+ "id='"+dataIds[1]+"' /> <input type='text' id='"+dataIds[2]+"' />"
+ " <input type='text' id='"+dataIds[3]+"' />" + "</form>" + "</div>"
+ "<div id='deletec' style='display: none;'>" + "<form>"
+ "<input type='text' id='a1data'> <input type='text'"
+ "id='b1data' /> <input type='text' id='c1data'/>"
+ "<input type='text' id='d1data' />" + "</form>"
+ "</div>";
this.append(b);
var auto = setInterval(function() {
$('#'+timeDiv).load('time.jsp');
}, 1000);
}
$.fn.setData = function(servlet_url, separator ,lables)
{
console.log('set data is called');
console.log("@setData :lablel Id's :-"+lables);
$.post(servlet_url, function(data) {
var dataArray = data.split(separator);
var ablock = dataArray[0];
var bblock = dataArray[1];
var cblock = dataArray[2];
var dblock = dataArray[3];
$("#"+lables[0]).text(ablock)
$("#"+lables[1]).text(bblock);
$("#"+lables[2]).text(cblock);
$("#"+lables[3]).text(dblock);
console.log("@setData : lable Ids :- "+document.getElementById(lables[0]));
});
}
$.fn.getEditWindowjs = function(lables,dataIds)
{
console.log("@getEditWindow : lable Ids :- "+document.getElementById(lables[0]));
console.log("@getEditWindow : lable Ids :- "+lables);
console.log("@getEditWindow : content :- "+document.getElementById("content"));
console.log("@getEditWindow : DataIds For Popup inputs :-"+dataIds);
//$(function() {
$('#editc').show();
var a1 = (document.getElementById(lables[0]))? document.getElementById(lables[0]).innerHTML: "blank";//$('#'+lables[0]).html();
var b1 = (document.getElementById(lables[1]))? document.getElementById(lables[1]).innerHTML: "blank";//$('#'+lables[1]).html();
var c1 = (document.getElementById(lables[2]))? document.getElementById(lables[2]).innerHTML: "blank";//$('#'+lables[2]).html();
var d1 = (document.getElementById(lables[3]))? document.getElementById(lables[3]).innerHTML: "blank";//$('#'+lables[3]).html();
console.log(a1+", "+b1+", "+c1+", "+d1);
$('#editc').dialog({
title : "Edit Label Data",
modal : true,
create : function(event, ui) {
$('#'+dataIds[0]).val("a1");
$('#'+dataIds[1]).val("b1");
$('#'+dataIds[2]).val("c1");
$('#'+dataIds[3]).val("d1");
},
buttons : {
SAVE : function() {
$(this).dialog("close");
}
},
}).prev(".ui-dialog-titlebar").css("background", "lavender");
// document.getElementById(dataIds[0]).value = ("a1");
/*$('#'+dataIds[1]).val(b1);
$('#'+dataIds[2]).val(c1);
$('#'+dataIds[3]).val(d1);*/
//});
}
}(jQuery));
function changeStat(item,buttonlist,lables,b) {
alert(b);
alert(timeout);
if (item.value == "Active") {
item.value = 'InActive';
document.getElementById(buttonlist).style.background = "red";
clearTimeout(timeout[b]);
} else {
item.value = "Active";
document.getElementById(buttonlist).style.background = "green";
}
}
function getEditWindow(lables,dataIds)
{
console.log("@getEditWindow : lable Ids :- "+document.getElementById(lables[0]));
console.log("@getEditWindow : lable Ids :- "+lables);
console.log("@getEditWindow : content :- "+document.getElementById("content"));
console.log("@getEditWindow : DataIds For Popup inputs :-"+dataIds);
$(this).getEditWindowjs(lables,dataIds);
}
function getDeleteWindow(lables,dataIds) {
console.log("@getEditWindow : lable Ids :- "+document.getElementById("'"+lables[0])+"'");
console.log("@getEditWindow : lable Ids :- "+lables);
$(function() {
$("#deletec").show();
var a = $('#'+lables[0]).html();
var b = $('#'+lables[1]).html();
var c = $('#'+lables[2]).html();
var d = $('#'+lables[3]).html();
$("#deletec").dialog({
title : "Delete Label Data",
moadal : true,
create : function(event, ui) {
$('#'+dataIds[0]).val(a);
$('#'+dataIds[1]).val(b);
$('#'+dataIds[2]).val(c);
$('#'+dataIds[3]).val(d);
},
buttons : {
DELETE : function() {
$(this).dialog("close");
}
},
});
});
}
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * (possible.length/6)));
return text;
}
function randNum()
{
var text = "";
var possible = "0123456789";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * (possible.length/6)));
return text;
}
function test() {
console.log('please pass the url and separator');
}
servlet工作正常，用|来响应随机字符串分隔符，所以我＆gt;刚删除它以增加代码可重复性