Create a picker dynamically when button is clicked.

[Manoj_Dokku4]

When I click on the + button, a new row should get created, creating a new row is also working fine with the below code.

in the JSP page, I first created a table like below

<table id="attachmentTable" style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;">
	<!-- pickerCallback="BUEPMDocumentPickerCallBack"  -->
	<tbody id="rows">
		<tr>
			<td>
				<wctags:itemPicker 
					id="buObjectPicker" 
					label="Document Picker"
					showTypePicker="false" 
					objectType="WCTYPE|wt.epm.EPMDocument,WCTYPE|wt.doc.WTDocument" 
					componentId="buObjectPicker"
					pickerTitle="Object Picker" 
					displayAttribute="name,number"
					pickedAttributes="name,number,version,iteration,view"
					editable="true" 
					pickerCallback="BUEPMDocumentPickerCallBack"
					pickerTextBoxLength = "40"
					readOnlyPickerTextBox="true"
				/>
			</td>
			<td style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;">
				<select style="width:190px;" name="linkType" id = "linkType" >
					<option value="" disabled selected>(Please Select Document)</option>
				</select>
			</td>
			<td style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;"><button type="button" id="add-NE"><img src="netmarkets/images/add16x16.gif"></button></td>
			<td style="border-collapse: separate; border-spacing: 12px; font-family: Arial, Helvetica, sans-serif;"><button type="button" id="delete-NE"><img src="netmarkets/images/remove16x16.gif"></button></td>
		</tr>
		
		<!-- dynamically rows will get added here -->
	</tbody>
</table>

in the callback function, everytime Im getting console.log(pickerID); as buObjectPicker whenever I click on the picker.

Written the javascript as mentioned below whenever we click on add button and remove button.

<script>

jQuery(function() {
	  let attachmentIndex = 0;

	  const jQueryrows = jQuery("#rows");
	  const jQuerytable = jQuery("#attachmentTable");
	  const jQueryfirstRow = jQuerytable.find("tbody tr").first();
	  
	  console.log({jQueryfirstRow});

	  const templateRowHtml = jQueryfirstRow.prop("outerHTML");

	  jQuery("#attachmentTable").on("click", ".add-NE-clone, #add-NE", function(e) {
	    e.preventDefault();
	    addRow();
	  });

	  function addRow() {
	    attachmentIndex++;
	    const jQuerynewRow = jQuery(templateRowHtml);
	    const jQuerypicker = jQuerynewRow.find("#buObjectPicker");
	    console.log({jQuerypicker});
	    const pickerId = "buObjectPicker-" + attachmentIndex;
	    console.log({pickerId});
	    jQuerypicker.attr("id", pickerId).attr("componentId", pickerId).attr("name", pickerId);
	    jQueryrows.append({jQuerynewRow});
	    console.log({jQueryrows});
	  }

	  jQuery("#attachmentTable").on("click", ".delete-NE", function(e) {
	    e.preventDefault();
	    const jQueryrow = jQuery(this).closest("tr");
	    const totalRows = jQuery("#attachmentTable tbody tr").length;
	    if (totalRows > 1) {
	      jQueryrow.remove();
	    } else {
	      jQueryrow.find("input[type='text']").val("");
	      const jQueryselect = jQueryrow.find('select[name="linkType"]');
	      jQueryselect.empty().append('<option value="" disabled selected>(Please Select Document)</option>');
	    }
	  });

	  function reinitPicker(cfg) {
	    console.log("Init picker with names:", cfg);
	  }
	});


</script>

@HelesicPetr 

Please let me know if there is anything I miss over here.

[Catalina]

Hi @Manoj_Dokku4 

Thank you for your question. 

Your post appears well documented but has not yet received any response. I am replying to raise awareness. Hopefully, another community member will be able to help.

Also, feel free to add any additional information you think might be relevant. 

Best regards,