CODEWITHSUNDEEP
javascriptjquerypythonhtmldjango
GreenGodot
GreenGodot

Reputation: 6753

Invoke a seperate event when I click on a hyperlink on my Django template page

I have an tag on my Django template for an advert that fulfills two functions:

  1. When a user clicks it, data is logged about the click (its location on the page, the text of the link, etc.)
  2. It is then redirected to an external link on a different website.

The way the page template is loaded is that the tag is dynamically filled with the href attribute pointing towards a view function in my views.py :

<a href="url arg1&arg2&redirect_url" target="_blank"> 
    <span dir="ltr">Lawyer Education</span>
</a>

The problem is that in practice, when a user hovers over my hyperlink, on the bottom left of the browser they see the URL pointing towards the view and its DJango url with arguments is displayed as opposed to the URL they are expecting to be redirected to.

Is it possible to have the redirect URL be displayed instead in some way? Or to have the view function be fired as an event while the redirect occurs at the same time?

Javascript/jQuery/PHP is not my forte so I am not sure how to proceed if that is the way to go to solve my problem...

Upvotes: 2

Views: 1672

Answers (1)

S&#233;bastien
S&#233;bastien

Reputation: 12139

Yes it is possible, with Ajax.

Write a normal link pointing to the address where the user will be redirected to: that way hovering will display the intended address in the status bar.

Then in JavaScript:

  • Intercept clicks on the link
  • Do the logging operation via an AJAX call
  • Once the info has been saved on the server, redirect the user

HTML

<a href="https://example.com/" class="intercept">go to example.com</a>

If you need to attach specific bits of information on each link you can use custom data- attributes, which you will use via JavaScript (using jQuery's .data() method). Those informations have to be written in the backend and output as is to the browser. For instance: 

<a href="https://example.com/" data-arg1="important information" data-arg2="good to know" class="intercept">go to example.com</a>

JavaScript, with jQuery and specifically jQuery's .ajax() method

$(document).ready(function() {

    // This is the click event handler, selecting only the links that have the "intercept" class
    $('a.intercept').on('click', function(event) {

        event.preventDefault(); // prevent the normal action for the browser, which is to follow the link

        var redirectUrl = $(this).attr('href'); // keep track of the URL you need to go to

        // This is where you prepare your query to send to the backend, by retrieving the data attribute values
        var arg1 = $(this).data('arg1'); // 'important information'
        var arg2 = $(this).data('arg2'); // 'good to know'

        // call your backend script
        $.ajax({
          url: 'http://yourwebsite.com/your-tracking-script',
          data: {
              url: redirectUrl,
              param1: arg1,
              param2: arg2
          },
          complete: function() {
              // When the server sends response that operation is done, send user on his/her way  
              window.location.href = redirectUrl; // Redirection
          }
        })
    })
});

Here is a snippet simulating the asynchronous operation with a timeout

    $(document).ready(function() {
        $('a.intercept').on('click', function(event) {
            event.preventDefault();
            var redirectUrl = $(this).attr('href');
            setTimeout(function() {
            window.location.href = redirectUrl;
            }, 2000)
        })
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com/" class="intercept">go to example.com</a>

Upvotes: 4

Related Questions