how to include web js file and apply jquery

Hi folks

i have developed script for google maps address

I have load js files like

<script src="http://maps.googleapis.com/maps/api/js?key=#@#$$$#&sensor=false&libraries=places"></script>

and fire jqyery on input element like address

<input type="text" name="address"  style="width: 500px;"></input>

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

How can i load this js on Account Module .. How Can i apply jquery this on  $("input[name=billing_address_street]")

I have put all js file content in JsGrouping But  not work ...

How Can i do ???

Tevfik Tümer Angel Magana Ramana Raju Santhana

Parents
  • 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

    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 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.

Reply Children
  • 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.     }, 
  • Hi Mehul Bhandari

    Add your code in recordlist.js file to do so:

    custom/modules/<module-name>/clients/base/views/recordlist/recordlist.js

    Under initialize function check this line and trigger Getmap function by add it like this

    this.events = _.extend({}, this.events, {
                'click [name=inline-cancel]': 'resize',
                'keyup textarea[name=primary_address_street]': 'Getmap'
            });
    

    Hope this Helps

    Best Regards

    S Ramana Raju

  • Hi Ramana Raju Santhana

    i want this at recordview . my record view inline edit not working ..

  • Hi Mehul Bhandari

    Ohh.. you are talking about record view inline edit.. am sorry for that.

    Okay do like this from clients/base/views/record/record.js copy this file content to

    custom/modules/<module-name>/clients/base/views/record/record.js      

    Now under events add your keyup code, to do so:

    events: {
            'click .record-edit-link-wrapper': 'handleEdit',
            'click a[name=cancel_button]': '_deprecatedCancelClicked',
            'click [data-action=scroll]': 'paginateRecord',
            'click .record-panel-header': 'togglePanel',
            'click #recordTab > .tab > a:not(.dropdown-toggle)': 'setActiveTab',
            'click .tab .dropdown-menu a': 'triggerNavTab',
            'keyup textarea[name=primary_address_street]': 'Getmap'
        },
    

    then defined your Getmap function as you are already doing.

    Hope this Helps

    Best Regards

    S Ramana Raju

  • HI Ramana Raju Santhana

    how to know all this events are loading..

    and how do you know all this click events ??