Possible jquery conflict when using ideal postcodes lookup

1 Views

I am trying to set up jquery instant postcode search function (from https://ideal-postcodes.co.uk/documentation), I successfully added the fields on my website http://kyl.ri-web.com however the Postcode field is not showing up.
I am sure this is a jquery conflict issue but just can’t get it to work.

The website is a WordPress website and I have already tried deactivating all plugins to check for any conflicting.

Read More

I have installed the script from ideal-postcodes.

I have added the empty div with the ID ‘lookup_field’ which should be replaced by the postcode lookup but it’s not showing.

The other fields should be filled once a relative postcode has been selected.

I’ve added the script to run in the footer.

Post Views: 1

Related posts

1 comment

  1. Looks like you’re calling your script before jQuery is declared. Move your script to just above the closing tag, like so:

    </div><!-- #page -->
<script type='text/javascript' src='http://kyl.ri-web.com/wp-content/themes/know-your-location/js/main.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://kyl.ri-web.com/wp-content/plugins/js_composer/assets/js/js_composer_front.js?ver=4.5.3'></script>
<script type="text/javascript">
jQuery('#lookup_field').setupPostcodeLookup({
  api_key: 'ak_ibm52vjdv8H63MwvUHsdyZpTO2dyb',
  output_fields: {
    line_1: '#first_line',  
    line_2: '#second_line',         
    line_3: '#third_line',
    post_town: '#post_town',
    postcode: '#postcode'
  }
});
</script>
</body>
</html>

    As this is a WordPress site, it may be easier to move your jQuery file into the head section, also call jQuery using ‘jQuery’ not ‘$’, see updated code

Comments are closed.