[FIXED] How do I change the URL a user copies in Django?

Issue

Building a DJANGO app. All the links on one of my pages when you click 'copy link' don't return the links URL but the GET command that I'm firing off in a custom function, for context clicking a link increments a vote counter in the app and then it redirects to the actual link, however this is preventing users from getting the URL of that link if they use right-click -> copy link in a browser.

How do I intercept a 'Copy Link' request and pass the actual URL to the user?

I've not been able to find any resources on the web to help me, granted I'm not sure what I'm searching has been the right keywords.

My Vote Functions, note there are two vote behaviours as there is an upvote button AND clicking on the link executes a vote.

   def ItemClicked(request,item_uid):
    u = ContentItem.objects.get(contentitemid = item_uid).contentitemurl
    session_id = request.session.session_key
    VoteForItem(item_uid,session_id)
    return redirect (u)

def ItemUpvote(request,item_uid):
    session_id = request.session.session_key
    VoteForItem(item_uid,session_id)
    return redirect('/')

def VoteForItem(item_uid,session_id):
    i = ContentItem.objects.get(contentitemid = item_uid)
    s = session_id
    can_vote = 0
    if VotingLog.objects.filter(itemid=item_uid,votesessionid=session_id).exists():
        can_vote = 0 
    else:
        can_vote = 1
    if can_vote == 1:
        i.contentitemvotecount = i.contentitemvotecount + 1
        i.save()
        new_vote=VotingLog(itemid = item_uid, votesessionid = session_id)
        new_vote.save()

Then in my template I have

{% for c in curated_items %} 
<div id="itemrow" class="row">
    <div class="column">
        <div class="row">
            <div id="itemtitle" class="column"><a href="/itemclicked/{{c.contentitemid}}" target="_blank">{{ c.contentitemtitle }}</a></div>
        </div>
        <div class="row">
            <div id="itemmeta" class="column"><p><a href="/upvote/{{c.contentitemid}}">▲</a>  {{c.contentitemsource}}, <i>{{c.contentitemdatepublished}}</i></p></div>
            <div id="itemmeta" class="column"></div>
        </div>
    </div>
</div>
{% empty %}
<div class="row">
    <div class="column"><p>No objects returned.</p></div>
</div>
{% endfor %}

Solution

To address your issue of the 'Copy Link' action not copying the actual URL due to the voting mechanism, you can use Javascript to handle click events on your links.

First, modify your HTML to include both the voting URL and the actual URL in each link. Use HTML data attributes to store the actual URL:

<a href="/itemclicked/{{c.contentitemid}}" 
   data-url="{{ c.contentitemurl }}" 
   class="vote-link">{{ c.contentitemtitle }}</a>

Then, add Javascript to attach a click event listener to these links.

document.querySelectorAll('.vote-link').forEach(function (link) {
    link.addEventListener('click', function (e) {
        e.preventDefault();

        var votingUrl = this.getAttribute('href');
        var actualUrl = this.getAttribute('data-url');

        fetch(votingUrl, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            },
        }).then(function () {
            window.location.href = actualUrl;
        });
    });
});

With this method, when users right-click and choose "Copy Link", they'll get the actual URL, but a regular click will still perform the voting action and then redirect as intended.

Answered By - Enis