无法调用jquery函数在cakephp3中工作

时间:2016-09-20 10:12:43

标签: javascript jquery html cakephp

我无法调用下面的jquery函数。我没有得到错误但没有任何反应。代码在cakephp3 mvc中,jquery自动包含在其中。要调用的jquery函数根据cakephp3表单元素

中给出的地址计算lat和long
  <?php
                    echo $this->Form->input('Tutors.address_street');
                    echo $this->Form->input('Tutors.address_suburb');
                    echo $this->Form->input('Tutors.address_postcode');
                    echo $this->Form->input('Tutors.address_state',array('type' => 'select', 'options' => $auStates, 'default' => 'VIC'));
                    ?>
                    <hr>
                    <?php
                    echo $this->Form->input('Tutors.address_lat',["value"=>0]);
                    echo $this->Form->input('Tutors.address_long',["value"=>0]);
                    ?>

                     <input type="button" value="calculate" id="calculate_address_lat_long" onClick="$(this).calculate_address_lat_long();" />

 /////////////   
<script type="text/javascript">
     $(document).on('click', '#calculate_address_lat_long', function () {
        var address = '';
        address += $('#TutorAddressStreet').val();
        address += ' ' + $('#TutorAddressSuburb').val();
        address += ' ' + $('#TutorAddressPostcode').val();
        address += ' ' + $('#TutorAddressState').val();
        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">22Address Not Found</div>')
                    .css({"position": "relative","top": "15px"});
            }
        });
    });
</script>

1 个答案:

答案 0 :(得分:1)

删除onclick -

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

试试这个

  <?php
                    echo $this->Form->input('Tutors.address_street');
                    echo $this->Form->input('Tutors.address_suburb');
                    echo $this->Form->input('Tutors.address_postcode');
                    echo $this->Form->input('Tutors.address_state',array('type' => 'select', 'options' => $auStates, 'default' => 'VIC'));
                    ?>
                    <hr>
                    <?php
                    echo $this->Form->input('Tutors.address_lat',["value"=>0]);
                    echo $this->Form->input('Tutors.address_long',["value"=>0]);
                    ?>

                     <input type="button" value="calculate" id="calculate_address_lat_long" onClick="calculate_address_lat_long();" />


<script type="text/javascript">
     function calculate_address_lat_long() {
        var address = '';
        address += $('#TutorAddressStreet').val();
        address += ' ' + $('#TutorAddressSuburb').val();
        address += ' ' + $('#TutorAddressPostcode').val();
        address += ' ' + $('#TutorAddressState').val();
        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">22Address Not Found</div>')
                    .css({"position": "relative","top": "15px"});
            }
        });
    }
</script>