I cannot get jquery to work in cake3

1

In cakephp2 I had a number of jquery scripts I called in some views.
In cakephp3 these jquery functions dont work . I dont get an error just nothing happens. In cakephp2 the same code works perfectly

I load the jquery and scripts in layout file as usual
<?php echo $this->Html->script('jquery.min');?>
<?php echo $this->Html->script('cancelledBy_date_picker'); ?>

 //view
  <input type="button" value="calculate" id="calculate_address_lat_long">
 <div class="" id="formated_address_lat_long"></div>

In a view I call the script like this above and in the cancelledBy_date_picker.js the script is the below.

      $(document).on('click', '#calculate_address_lat_long', function () {
             var address = '';
            address += $('#TutorAddressStreet').val();
            address += ' ' + $('#TutorAddressSuburb').val();
           address += ' ' + $('#TutorAddressPostcode').val();
           address += ' ' + $('#TutorAddressState').val();
    
          alert('sdfsf');
    
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results);
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $('#TutorAddressLat').val(latitude);
            $('#TutorAddressLong').val(longitude);
            $('#formated_address_lat_long')
                .html('<div class="alert alert-success">' + results[0].formatted_address + '</div>')
                .fadeTo(100, 0.1).fadeTo(250, 1)
                .css({"position": "relative","top": "15px"});
        } else {
            $('#formated_address_lat_long')
                .fadeTo(100, 0.1).fadeTo(250, 1)
                .html('<div class="alert alert-error">Address Not Found</div>')
                .css({"position": "relative","top": "15px"});
        }
    });
});
2

There seems to be something wrong with the code.

Why is there an onclick property in the input element when a function by the name of calculate_address_lat_long2 apparently doesn’t exist?

And the jquery event targets a non-existing element by the id of calculate_address_lat_long2.

Looks like a mix up (this shouldn’t work in cake 2 either, though).

The correct code should be:

<input type="button" value="calculate" id="calculate_address_lat_long">

$(document).on('click', '#calculate_address_lat_long', function () {
    ...
3

I am using jquery in ver 3.3.3, working 100% so double check your code, it is not cakephp.

4

The code I am giving you is copied from a cakephp2 with the same jquery code. It all works fine.
Yes it is jquery I need to access in cakephp3 which worked fine in cakephp2 . I think I made this point clear.

5

Hi, I updated the code and the OP. It still just doesnt work but i can get the address types in. I cant display the returned message

Yes it works perfectly in cakephp2 as I checked and the function names are the same as what you have suggested. I just was tinkering with the code to make it work and changed names by mistake.

 <input type="button" value="calculate" id="calculate_address_lat_long">

$(document).on(‘click’, ‘#calculate_address_lat_long’, function () {
var address = ‘’;
address += $(’#street’).val();
address += ’ ’ + $(’#suburb’).val();
address += ’ ’ + $(’#postcode’).val();
address += ’ ’ + $(’#state’).val();

 //   alert( $('#street').val());
      alert( address);
      
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results);
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $('#TutorAddressLat').val(latitude);
            $('#TutorAddressLong').val(longitude);
            $('#formated_address_lat_long')
                .html('<div class="alert alert-success">' + results[0].formatted_address + '</div>')
                .fadeTo(100, 0.1).fadeTo(250, 1)
                .css({"position": "relative","top": "15px"});
        } else {
            $('#formated_address_lat_long')
                .fadeTo(100, 0.1).fadeTo(250, 1)
                .html('<div class="alert alert-error">Address Not Found</div>')
                .css({"position": "relative","top": "15px"});
        }
    });
});

  $(document).on('click', '#calculate_address_lat_long', function () {
6

it works now as I need to include