Experiencing difficulty with transferring data from HTML to the backend and then from the backend to another HTML page. Utilizing Google Apps Script

When a click event occurs on my main.html page, I am able to retrieve the ID using the following code:

elements.table.on("rowClick", function(e, row){
    //e - the click event object
    //row - row component
    const ID = row._row.data.ID;
    google.script.run.makeRequest(ID);
});

The obtained ID is then passed to a backend function named makeRequest located in dataServerSide.gs.

function makeRequest(data){
  let newData = data;

  console.log(newData + "this is the first")
  return newData;
}

Subsequently, I encountered difficulties in passing the data from the makeRequest function back to another HTML file called ProjectDetail.html. Here are some attempts that were made:

<script>
google.script.run.withSuccessHandler((incomingData) => {
    console.log(incomingData)
}).makeRequest(data);
</script>

I also tried calling the makeRequest function without passing any arguments:

<script>
google.script.run.withSuccessHandler((incomingData) => {
    console.log(incomingData)
}).makeRequest();
</script>

These methods did not yield the desired results. Any assistance will be greatly appreciated. Thank you for your time.

... (additional text has been omitted for brevity and focus) ...

Answer №1

If you're looking to retain the value from the function makeRequest, consider using PropertiesService in your script. Here's a suggested modification for your Google Apps Script:

Modified script:

function makeRequest(data) {
  const p = PropertiesService.getScriptProperties();
  let newData;
  if (data) {
    p.setProperty("data", data);
    newData = data;
  } else {
    const storedData = p.getProperty("data") || "";
    newData = storedData;
  }

  console.log(newData + "this is the first")
  return newData;
}
  • This modification ensures that when

    google.script.run.makeRequest(ID)
    is executed on the Javascript side, the value of ID is stored in the Properties service.

  • Similarly, when running

    google.script.run.withSuccessHandler((incomingData)=>{console.log(incomingData)}).makeRequest()
    , the stored value is loaded and returned.

  • If you suspect only one value needs to be stored based on your original script, the proposed modification above should suffice. To access stored values using keys, follow this alternative script:

    function makeRequest(key, data) {
      const p = PropertiesService.getScriptProperties();
      let newData;
      if (data) {
        p.setProperty(key, data);
        newData = data;
      } else {
        const storedData = p.getProperty(key) || "";
        newData = storedData;
      }
      console.log(newData + "this is the first")
      return newData;
    }
    
    • When
      google.script.run.makeRequest("key1", ID)
      runs on the Javascript side, ID is stored within the Properties service.
    • Subsequently, upon executing
      google.script.run.withSuccessHandler((incomingData)=>{console.log(incomingData)}).makeRequest("key1")
      , the stored value associated with "key1" is retrieved.

Reference:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing AngularJS to achieve similar functionality to window.bind()

When trying to set the context of a function and pass it as a callback, I am following this approach: myController.myService.validateToken(param) .then( myController.myService.getToken.bind( myController.myService ) ); myController.myService.getToken ...

Concern raised about the challenge of removing an element from an array and its potential

When attempting to remove an element from an array without altering the state, I typically use the following code snippet: const tempArray = [ ...originalArray ]; tempArray.splice(index, 1); setOriginalArray(tempArray); After some experimentation, I deci ...

Capture data from ajax effectively by extracting and executing manipulations seamlessly

I have a project where I need to retrieve images from a database using Ajax and display them using a carousel plugin. This is the process: An image URL is saved to the database by an admin The frontend script makes an Ajax call to a PHP file and retrieve ...

Fetching JSON Data from Web Service using Ajax URL Field - A Simple Guide

I'm facing an issue while attempting to retrieve JSON Data from a web service using ajax url. This is how I have coded it so far: <script type="text/javascript> $('#kategoriTable').dataTable({ ajax: { u ...

The local variable within the Angular constructor is not initialized until the ngOnInit() function is invoked

I am encountering difficulties with making backend calls from Angular. In my component, I am fetching the "category" parameter from the URL as shown below: export class ProductsComponent{ productList = [] category = "" $params; $products ...

What are some possible reasons or solutions for Axios sending a 404 error?

Hi there, I'm completely new to the MERN stack and I'm encountering an issue when trying to post data using Axios and Express. I may have misunderstood something, so here's my problem. I have a form on a page that I am attempting to use to s ...

Typescript is having issues with the Foreach function

Can someone explain how I can utilize foreach in this scenario to showcase all the names? exampleData: [{ id: "1", name: "John" }, { id: "2", name: "Jane" }] The following code snippet does not seem to be working: this.exampleData.forEac ...

Numerous asynchronous requests running simultaneously

After successfully querying a database using js/ajax for a single drop-down, I am now looking to enhance my solution by adding multiple identical drop-downs. The goal is to retrieve the same information when an option is selected without allowing duplicate ...

Validate AJAX form with additional string input

While I have successfully passed a custom variable and value through ajax during field validation on blur, I am struggling to find a way to include this information when the form is submitted. Currently, in the on blur validation of jquery.validationEngin ...

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

Issue arises when trying to implement sidebar navigation in Angular with Materialize CSS

Just starting my Angular journey and running into some trouble trying to set up a practical and responsive menu using SidebarNav and Dropdown. I used CLI to install and configure angular2-materialize and materialize-css. To create the menu, I made a comp ...

The dropdown menu adjusts its value based on the selected radio button

When I select the "12 hour" radio button, the drop-down values change to 1 am - 12 am and 1 pm - 12 pm. If I select 24 hours, then the values change to 1-24. Below is my code: <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> ...

TypeScript: restrict access to field to exclusive classes only

Here's an interesting dilemma I am facing. In my project, I adhere to the MVVM architecture pattern where I have separate Views for display logic and ViewModels for functional logic. The ViewModels contain methods and fields that can be accessed by ot ...

Issues with Bootstrap 4 (possibly JQuery) - mobile menu navigation items are unresponsive

I've encountered an issue with my Bootstrap4 navbar on mobile screens where the links in the menu don't seem to work. Below is the code I used: <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28"> < ...

Guide to altering the characteristics of a button

Here is the code for a button within My Template: <div *ngFor="let detail of details" class = "col-sm-12"> <div class="pic col-sm-1"> <img height="60" width="60" [src]='detail.image'> </div> <div ...

As you scroll, the header gradually reduces in size, but at the point where the reduction occurs, a slight flick

As I develop a website, I have implemented a sticky header that shrinks after scrolling past the window height. I experimented with two versions - one using Vanilla-JS and another with jQuery. Both versions work fine, but the issue arises when the header s ...

What steps can I take to fix the issues on Safari that are being caused by three js on my website?

For my friend's birthday, I decided to surprise him by creating a web page for his online radio station. Being new to JavaScript, it was a great learning opportunity for me. After much experimenting, I finally got the page to work smoothly on desktop ...

Discovering the exact distance between a 'li' and a 'div' element

Currently, I am in the process of converting HTML to JSON. Here is an example of the HTML I am working with: <div class="treeprofit" id="divTreeViewIncomeDetails" style="height: auto;"> <li><span class="fa fa-folder-open highlight" ...

Node is throwing a 302 error on Localhost:3000

Looking for some guidance as a beginner trying to create and run a nodejs application. Encountering an error while running server.js via nodemon, the console displays the following: Express server listening on port 3000 Mongoose default connection open t ...

issue with AngularJS custom blur functionality not functioning as expected

I have been attempting to set up notifications similar to this example: http://plnkr.co/edit/GbFioFDNb2OC4ZjARQTp?p=preview However, I have been unable to integrate it into my script successfully. When I click outside the notification box, nothing happen ...