I need to execute a function() when clicking a button on GoogleDoc sidebar

Question

I have already created a very simple sidebar on my Google Doc as an Add-on. But, since I am not so advanced as I wanted in this matter, I'm stuck. This sidebar has simply a textbox and a button where the user would enter a string text, then simply click the button to 'execute a function' (and here is where I need help).

I have the function and it worked, But. I don't know how to build the script to execute the function by the sidebar's button.

I've made some research in this matter, and what I found didn't do anything nor gave any error messages. It just won't work. If you guys know where can I find here a former question that achieves my goal, please let me know, If not. please tell me how to do it.

Here's the html file code:

 <:DOCTYPE html> <.-- Use this CSS stylesheet to ensure that add-ons styling matches the default Google Docs styles --> <link href="https.//ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet"> <.-- The sidebar will have a input box and the search button --> <div class="sidebar"> <.-- The search box --> <div class="block form-group"> <input type="text" id="url_text" placeholder="Enter DB spreadsheet url" /> <button class="blue" id="search_phrases">Search Phrases</button> </div> <.-- Load the jQuery library from the Google CDN --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10;1/jquery,min.js"> </script> <script> // Attach click handlers after the Sidebar has loaded in Google Docs $(function() { // Here is my problem---------------------------------------- $('#search_phrases').click(function() { higlightPhrases($('#url_text').val()) }); // If the user presses the Enter key in the search box; perform a search $('#url_text');keyup(function(e) { if (e.keyCode === 13) { $('#search_phrases').click(); } }); }); </script>

And, my function is the following (within a script file):

 function higlightPhrases(db_url) { // For comfortable reasons, I've reduced the function script into a message. DocumentApp.getUi().alert(db_url); }

Thanks for your help! AJ

Answer 1

Just to close the post with an answer, as @TheMaster commented above, I was recommended to see

the relevant section of the official apps script documentation: "Client server communication"? See info page for more details.

And so, I've fixed my code like this:

 // Here is(was) my problem---------------------------------------- $('#search_phrases').click(function() { google.script.run.higlightPhrases($('#url_text').val()) });

Thank you! @TheMaster