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 bine 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.

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 bine 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.

• javascript
• django

Share Improve this question Follow edited Jul 28, 2016 at 15:00 Ilya Bibik asked Jul 28, 2016 at 13:46 Ilya BibikIlya Bibik 4,13444 gold badges2626 silver badges4949 bronze badges 5

• You can call backend function in AddCardToTrello() – vaqifrv Commented Jul 28, 2016 at 13:49
• 1 add one function to call both functions. isn't that possible? – ClearBoth Commented Jul 28, 2016 at 13:49
• Possible duplicate of How to call multiple JavaScript functions in onclick event? – Manish Commented Jul 28, 2016 at 13:50
• Wait, you do not want to call javascript methods? You want a single link to follow a link and also call the function? – epascarello Commented Jul 28, 2016 at 13:51
• You should fix your question title. All of the current answers seem to be missing the point. – Brett Commented Jul 28, 2016 at 14:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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 
}

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>

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

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

A lot of the answers so far seem to be missing the point. Unless I'm pletely 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./backend/function');
}

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./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 remended) you can do the following

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

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

 <script src="https://ajax.googleapis./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 ments 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./api/callers"
    }).then(function(result) {
        // do something with the result

    });
}