Copy data to clipboard after sorting

JavaScript
1

Hello ,
I am writing code for a html string to use java script. The purpose of this is to open html string and sort the items in a new order and save the new sort order to clipboard. I am able to sort the html but no data gets updated to clipboard. I am new to java - any information will be very helpful.

var order = $("#linksSortable tbody").sortable("toArray" )
		window.clipboardData.setData('text',order.toString())

Thanks,
CXL

2

@NewLearner

I noticed in your code snippet that you’re using jQuery UI’s sortable to manage the sorting of elements and then attempting to copy this new order to the clipboard. It looks like you’re running into issues because you’re using window.clipboardData for clipboard interactions, which, unfortunately, is specific to Internet Explorer and not supported by other major browsers like Chrome, Firefox, or Safari.

To ensure your clipboard functionality works seamlessly across all modern browsers, I recommend utilising the Clipboard API. This modern and widely supported solution will resolve your current issues and prove your code in the future.

You can try using this JavaScript:

var order = $("#linksSortable tbody").sortable("toArray");

// Convert the order array to a string
var orderString = order.toString();

// Use the Clipboard API to write the text
navigator.clipboard.writeText(orderString).then(function() {
  console.log('Copying to clipboard was successful!');
}, function(err) {
console.error('Could not copy text: ', err);
});

Implementing these changes is straightforward and will significantly improve your code’s compatibility. Here are a few key points to guide you:

  • Clipboard API: We use navigator.clipboard.writeText() to handle the text copying. This method returns a promise, allowing you to catch errors or confirm success programmatically.
  • Compatibility: The Clipboard API enjoys broad support among modern browsers, enhancing your code’s cross-browser compatibility.

However, there are a couple of important considerations:

  • Permissions: Modern browser security policies typically require a user-initiated action (like clicking a button) to permit clipboard write operations. So, you might need to trigger this clipboard write within an event listener tied to a user action.
  • HTTPS Requirement: For security reasons, the Clipboard API is only available on pages served over HTTPS, or on localhost during development.

Implementing these changes should help you achieve the desired functionality reliably across different browsers.

Regards,
Michael Swan

1 Like
3

Thanks for the feedback - and explaining the thinking! I tried this out - but somehow this breaks my sorting of the html table. Is there a way I can just test the jscript/html to make sure my syntax etc. is all ok?

4

@michaelswanuk

5

@NewLearner,

If you need to test your code, we recommend using CodePen (https://codepen.io/). You might need to add or modify CSS to fix any issues.

Although we’re happy to offer guidance on the SitePoint Forum, we cannot write your code. After all, the goal is to learn.

Best regards,
Michael Swan