Google Spreadsheet script refresh table inside a ModelessDialog

So i'm trying to create a "search box" using a "ModelessDialog", the main idea is as follow

1) User runs a macro that pops a ModelessDialog with the following fields: autocomplete, search button, and table (empty, only with headers) 2) The "Autocomplete" field is where the user can type an "ID" , (this part is already done) 3) The idea is, When the ID is selected, press the "Search" button to run some other macros in the background, then returns the data needed to populate the table and refresh the current "ModelessDialog"

The idea of doing it this way is that i dont want to open / render a whole page, as i want to be as fast and without having to "jump" between windows

Any advice? (im not adding any code since i don't have any trouble with the rest of the code /html, as the autocomplete auto populates, and the button runs the macro and returns some data)

Also im kind of new in javascript and html (I followed tutorials to make the other parts work :D )

The client-side JS code that resides in your modeless dialog can call server-side functions via google.script.run. The server functions can fetch the data required for filling the table, perform string interpolation and return an HTML string to the client. Just set the callback function for google.script.run to modify the contents of your table received from the server.

Modeless dialog HTML

  <div id="myTable">
    <table>
      <!-- table contents -->
    </table>
   </div>

JS script for the dialog:

  google.script.run.withSuccessHandler(function(html){

      var tableContainer = document.getElementById("myTable");
      tableContainer.innerHTML = html;

  }).getTableData();

More on client-client server communication here More on templated html here