Adding new data onclick does not reflect everywhere

Community Help
1

Hello,

I’m writing my first Notebook after seeing great example from friends, so I’m taking a spin at it.

Here, Calcul des frais kilométriques d'auto-partage / Thomas Parisot / Observable, I have an array of items. They are displayed as rows of Text() and Textarea(). There is a Button() to add a new row to the data.

I have two problems:

  1. when I click the “Add New” button, I can see the returned value is updated, but neither the HTML representation of it, neither the data at the bottom — I need to click on the cell for it to be refreshed
  2. when I modify a value via the “HTML form”, it does not seem to reflect anywhere. I’m not sure how reactivity works in this case. I’ve only seen examples where inputs where notebook variables :-/

Thanks for your help, it’s an amazing tool and I love how friendly this forum is.

See you around!

Thomas

1 Like
2

The easiest way to get the HTML to update is to ensure that it depends explicitly on the button push. Thus, simply add the name of the button to your entretiens_html variable. Thus, the first two lines might look like so:

entretiens_html = {
  add_entretien;

Here’s the result:

Since your entretiens_html is a viewof, you might be able to pull the same trick and get away with including entretiens_html in any cell that you want to update. I’m not sure exactly which cells you want to update or how you want them to update but I suspect it might be trickier than that. In that case, you might want to add an event listener using standard Javascript tools. For example, following button could be used to increment a mutable variable n:

button_with_listener = {
  let b = Button('Hit me')
  b.addEventListener("click", function() {
    mutable n = n+1
  });
  return  b
}

Here’s that in action:

3

Thanks Mark, you definitely helped me to get back on track :slight_smile:

It totally worked to remove the viewof and to declare the “Add New” as a dependency. I get it’s used for the dependency graph I’ve seen a few schemas here and there.

I still have to figure out a few things to mutate within an array, it’s still not that straightforward. I’ll work on it with a cool header later on. Thanks so much for your help so far!

1 Like
4

Okay, with your help, Agnes Chang’s notebook and Basile help, managed to catch the data dependency thingy.

I made 2 changes:

  1. I transformed it as a viewof, updated its value and dispatched an event on each field update.

  2. Then I added it as a dependency of vehicule_depenses_entretien variable:

vehicule_depenses_entretien = {
  entretiens_html;
  
  return entretiens_data.reduce((sum, d) => sum + d.prix, 0)
}

This way, whenever a field is updated, my reactive sum is updated, etc.

Thank you so much!

1 Like