Javascript, saving a event state?

Shawn

10/19/22, 3:16 PM

So I have a table that has about 10 items listed. When I click on a 'TR', in my javascript code, I have it set where it highlights that particular table row green. This is basically a generated grocery list and as you browse through the store, you basically "check off" your items that you have picked up.

However, me and my wife both use this since I put it on a live site and I was wondering, how would I go about checking off items (highlighting them green) on my end (my phone) say at home, and when she goes to the website, they are green or checked off for her when she views it?

So basically I say we have chicken and ground beef on the list (click on them to highlight them green), which will be highlighted when she looks at the same list on her phone.

My use-case for this is basically looking at my generated list, going into the fridge, clicking everything we already have.. and then when she gets off work, she just goes to the website, see's the already checked off items, and can go about shopping for the ones we need.

Is this possible with Javascript? Here is my current code:

(function ($, _, Drupal) {

  'use strict';

  // Here we use Drupal.behaviors which is Drupal's version for executing Javascript.
  // At the end we attach the themeID, in this case: CPU.
  Drupal.behaviors.highlight = {
    // We then use a attach function that triggers only once to apply our code.
    attach: _.once(function(context, settings) {

      $('tr').click(function(){
        $(this).toggleClass('highlightGreen');
      })
      $('tr').dblclick(function(){
        // $(this).css('background', 'rgba(0,255,0,0.63');
        $(this).hide('slow');
        // console.log(this);
      })


    })
  };

})(jQuery, _, Drupal);

Here is a screenshot of what it looks like:

0 + 2

javascript

Jaypan

10/19/22, 3:43 PM

You could set up the list as a form with hidden checkboxes, and use JavaScript to click the checkbox behind the scene. Then an #ajax call from that checkbox could be sent to the server, where you could save the checked state of the item. You would probably want to set up ajax polling on your wife's side so that updates you make while she has the app open are reflected.

Kevin

10/19/22, 3:43 PM

Without getting too deep into it, essentially you'd have to do an AJAX call to a Drupal route that saves the ID as highlighted.