I have the following code that uses a json call to fetch autofill information.
<script>
$(function() {
$(document).ready( function()
{
$('#citybox').hide();
$('#statebox').hide();
});
// OnKeyDown Function
$("#zip").keyup(function() {
var zip_in = $(this);
var zip_box = $('#zipbox');
if (zip_in.val().length<5)
{
zip_box.removeClass('error success');
}
else if ( zip_in.val().length>5)
{
zip_box.addClass('error').removeClass('success');
}
else if ((zip_in.val().length == 5) )
{
// Make HTTP Request
$.ajax({
url: "http://api.zippopotam.us/us/" + zip_in.val(),
cache: false,
dataType: "json",
type: "GET",
success: function(result, success) {
// Make the city and state boxes visible
$('#citybox').slideDown();
$('#statebox').slideDown();
// US Zip Code Records Officially Map to only 1 Primary Location
places = result['places'][0];
$("#city").val(places['place name']);
$("#state").val(places['state']);
zip_box.addClass('success').removeClass('error');
},
error: function(result, success) {
zip_box.removeClass('success').addClass('error');
}
});
}
});
});
</script>
I have read the docs until my eyes bleed and still have no clue on how to integrate this. I know it has to go into a .js file in static>src>js, but I'm not sure how to call it in base.res.partner form and even more troubling is that the rendered input fields don't seem to have an 'id' to attach too. Somebody that know what they are doing could do this in a few minutes I'm sure... SO I'm asking for help.
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project management
- MRP
This question has been flagged
There are two things (at least) that you will need to do:
- Ensure your .js code is being includes in the page.
- You definitely have to have an 'id' to attach to, OR you will need to change the jquery selector, the $("whatever")..., to reference the fields for city state and zip in some fashion (jquery gives you many option to that which don't required the 'id').
More details:
1. For the first part, you need to have an xml file that is part of your module. The xml will have some lines similar to this which is what cause your js file to be referenced in the template:
<openerp>
<data>
<template id="my_new_addition" name="somename" inherit_id="web.partner">
<xpath expr="." position="inside">
<script type="text/javascript" src="/oepetstore/static/src/js/petstore.js"/>
</xpath>
</template>
....
</data>
</openerp>
This is covered in the example project in the odoo howtos on web page additons:
https://www.odoo.com/documentation/8.0/howtos/web.html
Note: You will need to check that the above .js is include in your page by inspecting the page using the dev tools of your browser.
2. As you noted, the $('#citybox') selector is not going to work if you don't have the id='citybox' on the elemnets in your html page. You will need to override those fields on your html page to add the "id=" to each part. Looks like the above code wants "citybox", "city" and "statebox" and "state" and it wants some classes called "error"and "success" so I hope you are taking that all into account to be included. If these are styles that you need to supply then you'll ned to add a <link rel="stylesheet" ....> next to the <script...> tag above.
Definitely see the above howtos page and download the sample to see get a more thorough example of this.
Hope this helps. Will be good to see the auto fill based on zip entry working.
