Hi,
I want to create a django site that will have many coding shortcuts for many languages just like the site below. when clicking a link it will show you the code and you can then copy or download from there.
How to do that in django? Please give me hints for links to tutorials that can help.
That’s a really broad question.
What specifically about this do you not know to do?
What have you done with Django so far?
I have a lot of code that i use a lot and sometimes i forget part of it (memorizing) so i need to have a site that holds my codes in a text editor that allows copying what is inside it.
I have not started doing anything yet i just need a kick start.
That’s all fine.
What is your previous experience with Django?
What part of creating this site do you not know how to do?
I have this code but even if i have more records it is copying the first one only.
{% extends 'mysite/main.html' %}
{% block content %}
<!DOCTYPE html>
<html>
<body>
<h3>Coding snippets</h3>
{% for data in userData %}
<textarea readonly id="data" rows="4" cols="50">{{data.code_details}}</textarea>
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
// Get the text field
var copyText = document.getElementById("data");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied text
alert("Copied the text: " + copyText.value);
}
</script>
{% endfor %}
</body>
</html>
{% endblock content %}
why is that?
It is not valid to have multiple elements on a page with the same id attribute.
If you’re going to iterate over a list of items to be rendered on a page, you need to ensure that each instance has a unique id.
(One common pattern is to generate the id by concatenating the pk of the individual instance to the name of the model.)
You also have your JavaScript function definition inside your loop which means it is going to be repeated for each element in userData.
how to generate the id?
<textarea readonly id="{{forloop.counter}}" rows="4" cols="50">{{data.code_details}}</textarea>
<button onclick="myFunction()">Copy text</button>
but how to refernce that in java:
var copyText = document.getElementById("{{forloop.counter}}")
this will not work as the loop has exited but the values are there if i put:
var copyText = document.getElementById("1")
this works but how to reference them?
Your onclick function call in the button object can pass the id as a parameter to the function. The function definition can then accept that id as a parameter to the function.
I tried this still not working:
<h3>Coding snippets</h3>
{% for data in userData %}
<textarea readonly rows="4" cols="50">{{data.code_details}}</textarea>
<button id = "{{data.id}}" onclick="myFunction('{{data.id}}')">Copy text</button>
{% endfor %}
<script>
function myFunction(str num) {
// Get the text field
var copyText = document.getElementById("num")
What specifically is not working? Are you getting any JavaScript errors in the browser’s JavaScript console? Have you verified that the rendered html is what you expect it to be?
When i click the button nothing is happening.
{% for data in userData %}
<textarea readonly rows="4" cols="50">{{data.code_details}}</textarea>
<button id = "{{data.code_title}}" onclick="myFunction('{{data.code_title}}')">Copy text</button>
{% endfor %}
<script>
function myFunction(num) {
// Get the text field
alert(num);
var copyText = document.getElementById(num)
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied text
alert("Copied the text: \n" + copyText.value);
}
</script>
the alert will come out right but when trying to access the id it is not giving anything or any errors!
I found the problem. I was accessing the id of the button not the textarea which has the text.