how-to-call-controller-method-from-javascript.png
Blogger_636868970787058608.png
By: Muhammed Nishad

How to Call Controller Method from Javascript

Technical

In Odoo, it’s always a herculean task to connect between different layers of technologies like Python, JavaScript, XML, and Qweb. Here I’m going to describe calling an HTTP controller from Javascript. We do different calls like rpc.query, ajax.jsonRpc, action._rpc etc. But all these calls make a JSON request to where we are calling. But some controllers, especially some from the website module does not allow us to make JSON requests as they only accept HTTP requests. So, here I’m going to make how to call a controller using JavaScript’s XMLHttpRequest class. First, we have to create a new instance of XMLHttpRequest like below

var xhttp = new XMLHttpRequest();

Now, we have to set a call back to the request, I’m binding it with the onreadystatechange event

xhttp.onreadystatechange = function () {
   console.log(this.responseText);
};

Here, I have added a function as a callback to the ready state change event of the XMLHttpRequest object. I have just logged the result to the console because it does not seem too important to me.

Now, let’s get into the main part, here, we are going to set the request method and URL.

xhttp.open("POST", "/subscribe/checkout", true);

Here, we have specified the request method, Since we have some data to submit, We use the POST method here.

As the next parameter, we passed the URL since the control is already inside my odoo website, I have given the relative URL.

The last value may be a little confusing to people who are not familiar with JavaScript, Actually, it’s just a boolean value that indicates whether the request is asynchronous or not.

xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

We have just set the request header to x-www-form-urlencoded.

The next step is to prepare the data. I have retrieved all the data from my form and have stored them in some variables. So, what I’m going to do is, just put them in a JavaScript object, then make it JSON object and send the request.

var data = {};
data.number_of_users = no_o_users;
data.company_name = company_name;
data.contact_phone = contact_phone;
data.contact_email = contact_email;
data.contact_name = contact_name;
data.password_password = password_password;
data.customer_industry = customer_industry;
data.customer_country = customer_country;
data.plan_selected = plan_selected;
data.checked_ids = checked_ids;
data = JSON.stringify(data);
xhttp.send(data);

In the above snippet of code, we have put the saved data into an object and then we converted it to a JSON string using the json.stringify() method.

And in the last line of the snippet, we submit the request to the server.



cybrosys youtube

Comments

0


Leave a comment

 
Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message