hello guys i need your help i have the following code on my add page startup script are and work fine, the problem is i need the same code on GRIDADD page but it is not working, i know i need to change the selectors but i try and do not work, my question is id the ADD page starupscript the same area to put the code for gridadd?
$(document).ready(function() {
// Function to add copy and paste icons to each select2 dropdown
function addCopyPasteIcons(selectElement) {
var container = selectElement.next('.select2-container');
if (container.length) {
// Create a wrapper div to contain the select2 container and the icons
var wrapper = $('<div style="display: flex; align-items: center;"></div>');
// Move the existing select2 container into the wrapper
container.before(wrapper);
wrapper.append(container);
// Create the copy icon element
var copyIcon = $('<i class="fas fa-copy" style="cursor: pointer; margin-left: 5px;"></i>');
// Create the paste icon element
var pasteIcon = $('<i class="fas fa-paste" style="cursor: pointer; margin-left: 5px;"></i>');
// Append the icons to the wrapper
wrapper.append(copyIcon);
wrapper.append(pasteIcon);
// Variable to store the copied value
var copiedValue = null;
// Add a click event to the copy icon to copy the selected value from the dropdown
copyIcon.on('click', function() {
// Get the full text of the selected option
var selectedOptionText = selectElement.find('option:selected').text().trim();
copiedValue = selectedOptionText;
if (navigator.clipboard) {
navigator.clipboard.writeText(copiedValue).then(function() {
console.log('Copied value to clipboard:', copiedValue); // Debugging
}).catch(function(err) {
console.error('Failed to copy value to clipboard', err);
});
} else {
console.warn('Clipboard API not supported');
}
});
// Function to paste the clipboard value into the dropdown
function pasteClipboardValue() {
if (navigator.clipboard) {
navigator.clipboard.readText().then(function(text) {
var clipboardText = text.trim();
console.log('Clipboard text:', clipboardText); // Debugging
// Log all option texts for debugging
selectElement.find('option').each(function() {
var optionText = $(this).text().trim();
console.log('Option text:', optionText, ' | Matching:', optionText === clipboardText);
});
// Find the option that matches the clipboard text
var optionToSelect = selectElement.find('option').filter(function() {
var optionText = $(this).text().trim();
return optionText === clipboardText;
});
if (optionToSelect.length) {
var valueToSelect = optionToSelect.val();
console.log('Value to select:', valueToSelect); // Debugging
selectElement.val(valueToSelect).trigger('change');
selectElement.select2('destroy').select2(); // Update select2 display
console.log('Pasted value from clipboard:', clipboardText); // Debugging
} else {
console.error('No matching option found for clipboard value:', clipboardText);
}
}).catch(function(err) {
console.error('Failed to read clipboard contents', err);
});
} else {
console.warn('Clipboard API not supported');
}
}
// Add a click event to the paste icon to paste the clipboard value into the dropdown
pasteIcon.on('click', pasteClipboardValue);
}
}
// Apply the function to each select element in the grid edit
$('select[name="x_supervisor"]').each(function() {
addCopyPasteIcons($(this));
});
// MutationObserver to handle dynamically added rows and option changes
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// If a new select element is added
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
var newSelectElement = $(node).find('select[name="x_supervisor"]');
if (newSelectElement.length) {
addCopyPasteIcons(newSelectElement);
}
}
});
// If options in a select element are added/changed
if (mutation.type === 'childList' && mutation.target.tagName === 'SELECT') {
var selectElement = $(mutation.target);
if (selectElement.attr('name') === 'x_supervisor') {
addCopyPasteIcons(selectElement);
}
}
});
});
// Observe the body for changes
observer.observe(document.body, {
childList: true,
subtree: true
});
// Also observe changes to options within select elements
$('select[name="x_supervisor"]').each(function() {
var selectElement = $(this)[0];
observer.observe(selectElement, {
childList: true,
subtree: true
});
});
});