Hi Everyone,
I have a Custom Doctype called “Defect”.
Currently In the Project Doctype I have added a HTML field called defect_list. In this field I am fetching & displaying the list of Defects using frappe.call through Client Script. This work well.
In my script to render the the list I have created a HTML template with necessary columns. Also I have added a button called Edit for each row of the list. I want to call a function when each button is clicked in the row.
But the problem is When the script loads, the function which has to be called runs automatically without even the button being clicked.
Can someone please help me with this.
Here is the Code for HTML Template & Function to be called.
// Function to generate Defect List HTML
function get_defect_list_html(data) {
try {
var table_html = '<div class="table-responsive"><table class="table table-bordered table-hover">';
table_html += "<thead><tr>";
table_html += '<th style="border: 1px solid #333;">Defect ID</th><th style="border: 1px solid #333;" class=`w-25`>Title</th><th style="border: 1px solid #333;">Created Date</th><th style="border: 1px solid #333;">Reporter</th><th style="border: 1px solid #333;">Assignee</th><th style="border: 1px solid #333;">Status</th><th style="border: 1px solid #333;">Severity</th><th style="border: 1px solid #333;">Actions</th>'; // Add table headers
table_html += "</tr></thead><tbody>";
// Iterate through fetched defects and build table rows
data.forEach(defect => {
table_html += "<tr>";
table_html += `<td style="border: 1px solid #333;"><a href='/app/defect/${defect.name}'>${defect.name || ""}</a></td>`;
table_html += `<td style="border: 1px solid #333;" class="w-25">${defect.title || ""}</td>`;
table_html += `<td style="border: 1px solid #333;">${defect.created_date || ""}</td>`;
table_html += `<td style="border: 1px solid #333;">${defect.reporter || ""}</td>`;
table_html += `<td style="border: 1px solid #333;">${defect.assignee || ""}</td>`;
table_html += `<td style="border: 1px solid #333;">${defect.status || ""}</td>`;
table_html += `<td style="border: 1px solid #333;">${defect.severity || ""}</td>`;
table_html += `<td style="border: 1px solid #333;"><button type="button" id="${defect.name}" onclick="${edit_defect()}" class="edit-button" style="background-color: #008CBA; color: white; padding: 5px 10px; text-align: center; border-radius: 6px; text-decoration: none; border: none; cursor: pointer;">Edit</button></td>`;
table_html += "</tr>";
});
table_html += "</tbody></table></div>";
return table_html;
} catch (error) {
console.error("Error in get_defect_list_html function:", error);
throw error;
}
}
// Function to Edit Defects
function edit_defect() {
frappe.msgprint(__('Edit button clicked!'));
}
Here is the Output:
