App Script Add-on Event handler not working

Question

I am creating an Add-On for Google Spreadsheet. When click the search button nothing seems to happen. How does one go about debugging this ?

I am using the Google Apps Script to create the addon. I am using the example of QuickStart, with some changes to reflect my requirements.

Here is my Code

<div class='sidebar branding-below'>
  <form>
         <div class="block col-contain">
                 <div class="block form-group">
                   <div>
                     <label for="Query-txt"><b>Query Term</b></label><br/>
                     <input type="text" name="querytxt" id="Query-txt" value="" class="width-100" />
                   </div>
                   <br/>
                   <div>
                     <label for="Channel-id-dd"><b>Channel</b></label><br/>
                     <select id="Channel-id-dd" class="width-100">
                         <option value="UCpZG4Vl2tqg5cIfGMocI2Ag">CFC India</option>
                         <option value="UCPPkrC9R5ED2R2JRTaQgETw">NCCF Church</option>
                         <option value="UCL8wQnv6qB7rZtEYfY3vPtw">River of Life Christian Fellowship</option>
                     </select>
                   </div>
                   <br/>
                   <div>
                     <label for="Region-Code-dd"><b>Country Code</b></label><br/>
                     <select id="Region-Code-dd" class="width-100">
                         <option value="AU">AU - Australia</option>
                         <option value="GB">GB - United Kingdom</option>
                         <option value="US">US - USA</option>
                         <option value="UAE">UAE - United Arab Emerates</option>
                     </select>
                   </div>
                   <br/>
                   <div>
                     <label for="Safety-Type"><b>Safety</b></label><br/>
                     <select id="Safety-Type" class="width-100">
                         <option value="moderate">moderate</option>
                         <option value="strict">strict</option>
                         <option value="none">none</option>
                     </select>
                   </div>
                   <br/>
                   <div class="block" id="button-bar">
                     <button class="blue" id="run-Query">Search</button>
                   </div>
                 </div>
         </div>
  </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

 $(document).ready(function (){
    $('#run-Query').click(function () {
    Logger.log("Starting");
    var query = $('#Query-txt').val();
    var channelid = $('#Channel-id-dd').val();
    var countryCode = $('#Region-Code-dd').val();
    var safety = $('#Safety-Type').val();
    google.script.run
        .withSuccessHandler(
          alert("success");
        )
        .withFailureHandler(
          alert("failure");
        )
        .withUserObject(this)
        .search_all(query, safety, channelid, countryCode);
    Logger.log("Complete");
  });
 });

</script>

Answer 1

I see two problems with your code. Firstly, Logger.log() is an Apps Script server-side method. It is designed to be called from server-side code, for example in the Code.gs file. What you are writing above is the client-side javascript that is executed on the end user's browser. To log here, you do the same thing you would in regular javascript programming and use the console.log() method instead. This will write logging statements to the javascript console (accessible with Ctrl+Shift+J in Chrome).

Secondly, withSuccessHandler and withFailureHandler take as a parameter the method to call during success and failure scenarios and no parameters. The method you define will get the parameter automatically. Notice how they are used in the Quickstart:

...
.withSuccessHandler(
    function(returnSuccess, element) {
        element.disabled = false;
})
...

To alert on success, like you have above, you need to use something like this:

...
.withSuccessHandler(
    function(returnVal, element) {
        alert("Call was successful with return value: " + returnVal);
    }
)
...

Using these two methods, you should have the tools necessary to debug your code.