How to execute JS functions and Django backend method call in same click?

Question

I have 2 methods I want to execute when button or link is clicked One is a Javascript that will send information to a 3rd party and the 2nd one is a backend Django method that will update a field in the database. This way I can control that JavaScript Function will execute only once.

Ideally, Javascript should execute first and only after its execution the backend method will be triggered

I tried to combine it in the same link but this is wrong since only javascript executes

<a href="{% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %}" onclick="AddCardToTrello()">Add to Trello</a>

What are my options here ? Can I call my backend method from JavaScript?

UPDATE:

Despite all the great answers the tricky thing in my case how the backed call is generated {% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %}

I use Django as my backend and probably there some difference between invoking the backend method from within JavaScript vs direct click. What happens is that when it is called from within JS domain name gets cut off.

window.location.href = /production/production/order/board/5/127.0.0.1:8000/production/soproduct/details/5/

When the real link is

http://127.0.0.1:8000/production/production/order/board/5/http://127.0.0.1:8000/production/soproduct/details/5//

So somehow when I call the method from Javascript it cuts off my first part of URL(domain name) and this breaks the JS script probably. So none of the answers works. I am not sure about the Ajax since was not able to make it to work so far.

Answer 1

AddCardToTrello(event) {  
  event.preventDefault(); //to stop the page from redirecting
  doStuff(); // do the stuff you to do first
  var href=$(this).attr('href');  
  window.location = href; // redirect here 
}

Answer 2

To expand @TrampolineTales answer, since one of your two actions is a navigation to a different page, you can

function addCardThenGo(url) {
    AddCardToTrello();
    window.location.href = url;
}

then

<a onclick="addCardThenGo({% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %})">Add to Trello</a>

Answer 3

You could simply create a function which contains the two functions you wish to be executed.

function toBeExecuted() {
   f1();
   f2();
}

Answer 4

it turns out you have two questions. One about calling two functions and a second question how to "call a function on the backend"

calling two functions

You can use what others have pointed out (one function, that calls the other two). If you don't want that you could just register two event handlers

Register two handlers

$(function(){
   $(".demo").click(function(){
        console.log("handler1");
     });
  $(".demo").click(function(){
        console.log("handler2");
     });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="demo" >Add to Trello</a>

obstructive

If you wanted to use obstructive javascript (not recommended) you can do the following

function handler1(){
  console.log("handler 1");
}

function handler2(){
  console.log("handler 2");
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a class="demo" onclick="handler1();handler2()" >Add to Trello</a>

Calling "backend code"

While this is not really an answer to your "second" question, i did add it to give you some direction. Your question is also vert broad. I t depends on a lot of things (for example what platform/language you use on the "back end"). Look in the comments and other posts for some valuable resources on this topic.

You will need to expose your "function" on the server ("backend") through http. This exposes your "function" as a http-service to clients. Your client (the browser) can call the http service using XHR. Below is some skeleton code that uses jquery.

function handler1(){
    // there are many other methods like $.get $.getJSON
    $.ajax({
       type: 'GET',
       dataType: 'json',
       url: "http://piedpiper.com/api/callers"
    }).then(function(result) {
        // do something with the result

    });
}

Answer 5

A lot of the answers so far seem to be missing the point. Unless I'm completely misinterpreting your question, they are only partly correct. Yes, you can call a back-end function from the front-end, but you need to use Ajax on the front-end and your back-end function needs to be configured to accept an HTTP POST request.

This answer assumes you are using jQuery. Also, it's unclear what the name of your back-end function is or how your server is configured. I'm making a lot of assumptions here. You should provide more information.

function callBackEnd(url) {
  $.post(url, function() {
    console.log('HTTP POST sent');
  });
}

---

function AddCardToTrello() {
  // ...do whatever this does
  // call the backend
  callBackEnd('http://www.yourserver.com/backend/function');
}