how to include web js file and apply jquery

Hi Mehul Bhandari

First copy all the content from maps.googleapis js file into custom file name it as gmaps.js file and move that file into your custom folder i.e

./custom/gmaps.js

then create new grouping

./custom/Extension/application/Ext/JSGroupings/gmapsGrouping.php

<?php
$js_groupings[] = $gmapsGrouping = array(
    'custom/gmaps.js' => 'include/javascript/gmapsGrouping.js'
   
);

Next, navigate to Admin > Repair > Quick Repair and Rebuild. The system will then rebuild the extensions and create the JSGrouping extension. Once completed, navigate to Admin > Repair > Rebuild JS Grouping Files. This will create the grouping file shown below:

./cache/include/javascript/gmapsGrouping.js

Now under Accounts module custom/modules/Accounts/Clients/base/views/record/record.js file

initialize function add the following code:

this.on("render", this.Getmap, this);

now outside the function

Getmap: function(){

var autocomplete = new google.maps.places.Autocomplete($("input[name=address]")[0], {});

}

Hope this Helps

Best Regards

S Ramana Raju

Hi Ramana Raju Santhana

Thanks ..

only   ($("input[name=billing_address_city]")[0], {});

not working

any idea ??

Hi Mehul  Bhandari

Can you try this and let me know

var pacLocation = this.model.get('address');
var autocomplete = new google.maps.places.Autocomplete(pacLocation,{});

Hope this Helps!

Best Regards

S Ramana Raju

Hi Ramana Raju Santhana

not worked

error :

Uncaught TypeError: a.getAttribute is not a function

HI Mehul  Bhandari

Can i know file name and path where you have written this code

Best Regards

S Ramana Raju

Hi Ramana Raju Santhana

i have write code in  custom/modules/Accounts/clients/base/views/create/create.js

({
     extendsFrom: 'CreateView',
    initialize: function(options) {
        this._super('initialize', [options]);
       
    this.on("render", this.Getmap, this);
       
    },
    Getmap: function(){


            var pacLocation = this.model.get('billing_address_city');
            var autocomplete = new google.maps.places.Autocomplete(pacLocation,{});   
             console.log("000001111111");  
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                console.log("00000");  
                var place = autocomplete.getPlace();


                console.log(place.address_components);
                


    });


     },
    
})

Hi Mehul  Bhandari

Remove line this.on("render", this.Getmap, this); 

and try it by events

events: {

   'keyup input[name="billing_address_city"] ': 'Getmap'  

  }

Kind Regards

S Ramana Raju

Hi Ramana Raju Santhana

Uncaught SyntaxError: Unexpected token :

({
     extendsFrom: 'CreateView',
    initialize: function(options) {
        this._super('initialize', [options]);
       
       events: {
       'keyup input[name="billing_address_city"] ': 'Getmap'  
        }
       
    },
    Getmap: function(){


            var pacLocation = this.model.get('billing_address_city');
            var autocomplete = new google.maps.places.Autocomplete(pacLocation,{});   
             console.log("000001111111");  
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                console.log("00000");  
               var place = autocomplete.getPlace();


                console.log(place.address_components);
       });


     },    
})

Hi Ramana Raju Santhana

Uncaught SyntaxError: Unexpected token :

({
     extendsFrom: 'CreateView',
    initialize: function(options) {
        this._super('initialize', [options]);
       
       events: {
       'keyup input[name="billing_address_city"] ': 'Getmap'  
        }
       
    },
    Getmap: function(){


            var pacLocation = this.model.get('billing_address_city');
            var autocomplete = new google.maps.places.Autocomplete(pacLocation,{});   
             console.log("000001111111");  
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                console.log("00000");  
               var place = autocomplete.getPlace();


                console.log(place.address_components);
       });


     },    
})

Hi Mehul  Bhandari

Brother we need to place events outside the initialize function

initialize:function(){

},

events: { 'keyup input[name="billing_address_city"]': 'Getmap' },

Hi Ramana Raju Santhana , Tevfik Tümer

create view working perfect but when i tried in record view then inline edit functionality not working.

what i have did wrong ??

({
     extendsFrom: 'RecordView',
    initialize: function(options) {
        this._super('initialize', [options]);
    },
    events: {
       'keyup textarea[name=primary_address_street] ': 'Getmap',  
    },
    Getmap: function(){
        console.log("RECORD-OUT");
        if($('[name="save_button"]').is(":visible")){   
        var self = this;
            var autocomplete = new google.maps.places.Autocomplete($("textarea[name=primary_address_street]")[0], {});
            console.log("RECORD-IN");
            google.maps.event.addListener(autocomplete, 'place_changed', function() {

              var place = autocomplete.getPlace();
                console.log("MS123");
                console.log(place);
                 self.model.set("primary_address_city","mumbai");                
                
            });


        }


     },
   
})

Hi Mehul  Bhandari

Good to here that you did while Creation.

What error you are getting also check are there any script errors.

Best Regards

S Ramana Raju

Hi Ramana Raju Santhana

not getting any error .just inline edit not working ..

Hi Mehul  Bhandari

Comment events: code and check whether inline edit is working or not

Hi Ramana Raju Santhana

its working if i comment event code.

Hi Mehul  Bhandari

Where you have written this code.

Write it in record.js files and let me know.

Thanks

S Ramana Raju

Hi Ramana Raju Santhana

i have written in record.js  its working but inline edit not working of that record.

Hi Mehul  Bhandari

For inline edit where you have written your code.

Hi Ramana Raju Santhana

How can i add inline event with keyup event used for that code..

ex

1. events: { 
2.        'keyup textarea[name=primary_address_street] ': 'Getmap',   
3.     },