I need to load script on click event

Question

Hi! I need to load my script on click event... I have a button. I want to call my google script on that button click.

     $("#MSC_AddNewAddress").click(function(){

           ShippingAddressID=-1;
           MSC_ShowAddShipping();
           MSC_Script();
    });

      function MSC_Script(){
          var script = document.createElement('script');
          script.src = 'http://maps.google.com/maps/api/js?sensor=true';
          script.type = 'text/javascript';
          document.body.parentNode.appendChild(script);

}

And where is your issue? Explain it better. BTW, why not including google maps by default, instead of reincluding it on each click? — A. Wolff, Apr 28 '14 at 09:31
Possible duplicate http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load — varun257, Apr 28 '14 at 09:32

score 0 · Answer 1 · answered Apr 28 '14 at 09:34

0

You have the jQuery.getScript() for this :

$("#MSC_AddNewAddress").click(function(){
    $.getScript( "script.js", function( data, textStatus, jqxhr ) {
        // success
    });
});

answered Apr 28 '14 at 09:34

Brewal

8,067
2
24
37

Yes it does... It wouldn't be implemented in jQuery otherwise. Maybe your problem is somewhere else. Do you have any error in console ? – Brewal Apr 28 '14 at 09:47
i got a error TypeError: google.maps.Geocoder is not a constructor http://www.baloobalive.com/Home.aspx Line 704 – Ammi Apr 28 '14 at 10:34
Maybe you are trying to use the google maps API before actually loading it. You have to execute your custom code inside the callback function, where I wrote the `// success` comment – Brewal Apr 28 '14 at 12:23

score 0 · Answer 2 · answered Apr 28 '14 at 09:50

Consider including

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> snippet in your web page.

And then Something like (a jquery function will work) jQuery.getScript

$("#MSC_AddNewAddress").click(function(){
  $.getScript("http://maps.google.com/maps/api/js?sensor=true", function( data, textStatus, jqxhr ));
});

OR by pure javascript

<script>
    function myFunction() {
      var script = document.createElement('script');
      script.src = 'http://maps.google.com/maps/api/js?sensor=true';
      script.type = 'text/javascript';
      document.body.parentNode.appendChild(script);
    }
</script>

HTML for button

<button id="MSC_AddNewAddress" onclick="myFunction()"></button>

I got an error in console TypeError: google.maps.Geocoder is not a constructor http://www.baloobalive.com/Home.aspx Line 704 — Ammi, Apr 28 '14 at 10:35
This is something other issue not related to the question you put here, in order to solve the same try reading https://developers.google.com/maps/documentation/javascript/tutorial — 4dgaurav, Apr 28 '14 at 10:41

I need to load script on click event

2 Answers2