calling javascript function on button click meteor

Question

I am having a jquery slider form implemented in a meteor app. When i click on submit button of form, it should call javascript function addme() present in clent.js file. But it is not working. Also, the form is not a template. I know using template.templatename.events we can perform events. But, I'm curious that does normal "onclick" event works in meteor?

I have used jquery menu from this site: http://alijafarian.com/jquery-horizontal-slideout-menu/

and My my.html code:

<head>
     <title>myapp</title>
    <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAlKvABq34UidJ2uZrjnnKTvFAyoZjFNQc&sensor=FALSE&libraries=places">  </script>
    <link rel="stylesheet" type="text/css" href="myapp.css" >
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>
    <script type="text/javascript" src="client.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="markerclusterer.js"></script>

</head>

        <body>
            <div class="header">
            <a href="#" class="slideout-menu-toggle"><i class="fa fa-bars"></i> Bank Innovation Map</a>
        </div>

            {{> maps}}


        <div class="slideout-menu">

        <h3>Add New Innovation Center <a href="#" class="slideout-menu-toggle">&times;</a></h3>

            <div id="locationField">
              <input id="autocomplete" placeholder="Enter the address"
                     onFocus="geolocate()" type="text"/>
            </div>
            <table id="address">
              <tr>
                <td class="label">Street Line 1</td>
                <td class="slimField"><input class="field" id="street_number"  disabled="true"/></td>
                      <tr>
                      <td class="label">Street Line 2</td>
                <td class="wideField" colspan="2"><input class="field" id="route"
                      disabled="true"/></td>
              </tr>
              </tr>
              <tr>
                <td class="label">City</td>
                <td class="wideField" colspan="3"><input class="field" id="locality"
                      disabled="true"/></td>
              </tr>
              <tr>
                <td class="label">State</td>
                <td class="slimField"><input class="field"
                      id="administrative_area_level_1" disabled="true"/></td>
                <tr><td class="label">Zip code</td>
                <td class="wideField"><input class="field" id="postal_code"
                      disabled="true"/></td>
              </tr></tr>
              <tr>
                <td class="label">Country</td>
                <td class="wideField" colspan="3"><input class="field"
                      id="country" disabled="true"/></td>
              </tr>
              <tr>
                <td></td>

                <td>
                <!-- <button type="submit">Click me here!</button> -->
                <input type="submit" class="AddPlaceButton" value="submit" onclick="addme()" />
                </td>
                <td></td>
            </tr>
            </table>    

        </div>


    <!--/.slideout-menu-->

        <script type="text/javascript">
        $(document).ready(function () {
            $('.slideout-menu-toggle').on('click', function(event){
                event.preventDefault();
                // create menu variables
                var slideoutMenu = $('.slideout-menu');
                var slideoutMenuWidth = $('.slideout-menu').width();

                // toggle open class
                slideoutMenu.toggleClass("open");

                // slide menu
                if (slideoutMenu.hasClass("open")) {
                    slideoutMenu.animate({
                        left: "0px"
                    }); 
                } else {
                    slideoutMenu.animate({
                        left: -slideoutMenuWidth
                    }, 250);    
                }
            });
        });
        </script>


 </body>
        <template name="maps">
        <!--    <h1> Bank Innovation Map</h1>-->
           <input id="pac-input" class="controls" type="text" placeholder="Search Box">
            <div id="map-canvas"></div>

        </template>


My client.js code:

if (Meteor.isClient) {
   function addme(){console.log("function called");}
  }

Answer 1

If you don't have a template, you can use Template.body . Here's a simple example:

if (Meteor.isClient) {
  Template.body.events({
    'click .AddPlaceButton': function (e) {
      e.preventDefault();
      console.log("You pressed the button");
    }
  });
}

Answer 2

You can set the event handler in a given template. Take a look at template_events

Updated

You can move the form to a template, then register the event on that

main.html

<body>
    {{> myForm}}
<body>

<template name="myForm">
    <form>
        <!-- your form -->
        <button id="button">BUTTON</button>
    </form>
</template>

my-form.js

Template.myForm.events({
    'click #button': function(e){ /* xxx */ }
});

calling javascript function on button click meteor

Question

2 answers

solution1
7 ACCPTED 2014-07-21 16:51:32

solution2
6 2014-07-21 16:32:00

Updated

calling javascript function on button click meteor

Question

2 answers

solution1 7 ACCPTED 2014-07-21 16:51:32

solution2 6 2014-07-21 16:32:00

Updated

solution1
7 ACCPTED 2014-07-21 16:51:32

solution2
6 2014-07-21 16:32:00