Having a issue with UI Pages.
I have Created a UI page which will have one static row and i have create a button on click of the that static row will get cloned. If I try to set the value of the cloned component value is being filled in original component even though the Class, name, id everything is different.
HTML
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:ui_form>
<input type="button" value="+" onClick="addInput()"/>
<input type="button" value="-" onClick="removeInput()"/>
<body id="formulario" class='magic'>
<div id="0">
<table style="width:100%" id='table0'>
<tr id ='row0' >
<td style="width:10%"><input type="checkbox" id = 'r' style='display:none'/></td>
<td style="width:10%">
<label>Service Line</label>
<g:ui_reference var="jvar_caseid" name="sl" id="sl" table="incident" query="active=true" onchange="getSS()"/>
</td>
<td style="width:10%"></td>
<td style="width:10%">
<label>Sub Service</label>
<g:ui_reference name="ss" id="ss"/></td>
<td style="width:10%"></td>
<td>
<label>Priority</label>
<select>
<option value="1">High</option>
<option value="1">Medium</option>
<option value="1">Low</option>
</select>
</td> <td style="width:10%"></td>
</tr>
</table>
</div>
<div id="ref" style="display:none">
<table style="width:100%" id='tableref'>
<tr id ='rowref' >
<td style="width:10%"><input type="checkbox" id = 'r'/></td>
<td style="width:10%">
<label>Service Line</label>
<g:ui_reference name="sl" id="sl" table="incident" query="active=true" onchange="getSlValue()" />
</td>
<td style="width:10%"></td>
<td style="width:10%">
<label>Sub Service</label>
<g:ui_reference name="ss" id="ss" /></td>
<td style="width:10%"></td>
<td>
<label>Priority</label>
<select>
<option value="1">High</option>
<option value="1">Medium</option>
<option value="1">Low</option>
</select>
</td> <td style="width:10%"></td>
</tr>
</table>
</div>
</body>
</g:ui_form>
</j:jelly>
Client Script
function getSS(id){
try{
var slValue ='';
var sstag = '' ;
var sst = ''
if(id){
slValue = gel("sl"+id).value;
sstag=gel('lookup.ss'+id);
sst = 'ss'+id;
}
else{
slValue =gel("sl").value;
sstag=gel('lookup.ss');
sst = 'ss';
}
// alert(slValue);
// alert(sstag)
var ssRec = new GlideRecord('problem');
ssRec.addQuery('incident',slValue);
ssRec.query();
var ss = [];
while(ssRec.next()){
ss.push(ssRec.getValue('sys_id'));
}
alert(sst);
var newQuery = "sys_idIN"+ss.join(',');
sstag.setAttribute('onclick',"mousePositionSave(event); reflistOpen( '"+sst+"', 'not', 'problem', '', 'false','QUERY:" + newQuery + "', '')");
//sstag.setAttribute("query",newQuery);
}
catch(e){
alert(e);
}
}
var counter = 1;
function addInput() {
var row = document.getElementById("rowref"); // find row to copy
var table = document.getElementById("table0"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "row" + counter; //change id or other attributes/contents
// var j = 0;
// for (j = 0; j < clone.cells.length; j++) {
// document.getElementById('sl').value = '';
// document.getElementById('sl').name = '';
// document.getElementById('sys_display.sl').value = '';
// }
table.appendChild(clone); // add new row to end of table
var table1 = document.getElementById("table0");
var rowCount = table1.rows.length;
var row1 = table1.rows[counter];
for (var i = 0; i < row1.cells.length; i++) {
for (var j = 0; j < row1.cells[i].childNodes.length; j++) {
if (row1.cells[i].childNodes[j].id == 'sl') {
// row1.cells[i].childNodes[j].setAttribute('onchange', "getSS('" + counter + "')")
}
row1.cells[i].childNodes[j].id = row.cells[i].childNodes[j].id + counter;
row1.cells[i].childNodes[j].name = row.cells[i].childNodes[j].name + counter;
row1.cells[i].childNodes[j].setAttribute("onchange", "getSS(" + counter + ")")
}
}
counter++;
// var root = document.getElementById("table0");
// var allRows = document.getElementByID('row0');
// var cRow = allRows.cloneNode(true);
// root.appendChild(cRow);
}
function removeInput() {
try {
var table = document.getElementById("table0");
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
// alert(JSON.stringify(chkbox));
// alert(chkbox.checked);
if (rowCount > 1) {
if (chkbox.checked == true) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}
} catch (e) {
alert(e);
}
}
original Row child node ids
Cloned Nodes ID
Another Issue
Im trying make the one g:ui reference dependent on Another using but it is not working
var sst =='ss'
var newQuery = "sys_idIN"+ss.join(',');
sstag.setAttribute('onclick',"mousePositionSave(event); reflistOpen( '"+sst+"', 'not', 'problem', '', 'false','QUERY:" + newQuery + "', '')");
please let me know if any progress
Thanks in Adavnace
