Function not getting called from jquery google apps Script -

so have function works fine when run, can see output data logs, want make more ui friendly , call function clicking button. can't function work ui missing? please help. here's code.

function showdialog()           {             var ui = htmlservice.createtemplatefromfile('show')             .evaluate().setwidth(300).setheight(400);             spreadsheetapp.getui().showmodaldialog(ui, "select folder");           }     function generatefoldertree() {       logger.log("generatefoldertree called");       try {           var parentfolder = driveapp.getrootfolder();          getchildfolders(parentfolder);        } catch (e) {          logger.log(e.tostring());        }      }       function getchildfolders(parent) {        var childfolders = parent.getfolders();        while (childfolders.hasnext()) {          var childfolder = childfolders.next();          logger.log("folder name: " + childfolder.getname());          var fold = childfolder.getname();        }     }      show.html      <!-- use templated html printing scriphlet import common stylesheet. -->         <?!= htmlservice.createhtmloutputfromfile("stylesheet").getcontent(); ?>         <!-- use templated html printing scriptlet import javascript. -->          <div>         <div class = "block" id = "dialog-elements">         <button class = "selectfolder" id = "selectfolder" >select folder</button>         </div>         <!-- block going hidden until user selects folder -->         <div class = "block" id = "hiddenattrib">         <p><label = "selectedfolder"> selected folder: </label></p>         <p><label id = "foldername"> folder name: </label></p>         <p><label id = "folderid"> folder id: </label></p>         </div>         <div class = "foldertable" id = "foldertable">         <p><label class = "showstatus" id = "dialog-status">status: </label></p>         <table style = "width:100%" id = "source">         <!--<tr>            <td> <button>awesome</button></td>         </tr>-->           </table>           </div>          </div>         <!-- use templated html printing scriptlet import javascript. -->         <?!= htmlservice.createhtmloutputfromfile('showjavascript').getcontent(); ?> 

jquery

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>     <script>     $(function(){     $("button").click(runmyfunction);     });     function runmyfunction(){      //this.disabled = true;     google.script.run     .withsuccesshandler(generatefoldertree)     .withfailurehandler(showerror)      $("#hiddenattrib").hide();         var counter = 4;         var = 0;         (i = 0; i<counter; i++){           var row = $("<p><tr><td><button>this test</button></td></tr></p>");           $("#source").append(row.html());     }     }      function showerror(error) {         console.log(error);         window.alert('an error has occurred, please try again.');       }     </script 

>

in 'jquery' script not calling function.

the pattern call should be:

google.script.run .withsuccesshandler(successcallback) .withfailurehandler(errorcallback) .appsscriptfunction() 

so case should be:

google.script.run .withsuccesshandler(successcallback) .withfailurehandler(showerror) .generatefoldertree() 

the functions use in withsuccesshandler , withfailurehandler functions in client side, same doing function showerror need function when call successful.

you can see in document.