How to pass a variable through the F7 Actions

Questions
1

Hi,
I’m a bit lost here, any help would be appreciated.
I’m dynamically adding List items to my page depending on my returned value from a database. These List items are marked with a unique id (the key from the database).
When a user clicks on one of these List items, an Action Sheet opens, giving them the option to either modify or delete an entry or just cancel the action.
This Action Sheet is generated universally for all entries and has callback functions attached to the buttons modify and delete.
My problem is: How can I pass a variable (the id) through the Action Sheet and the callback function to determine which element should be modified or deleted?
(basically it needs to travel like this: ID of clicked item → ActionSheet → onclick-Callback → function called by callback)

I’ve added some of my code below.

Maybe I’m also looking at this wrong but I found no way to determine what button was clicked and use that in the function that opens the Action Sheet. (as in I’ve also tried: open ActionSheet → return what button was clicked → call corresponding function with ID of clicked item in the parameters)

I’m sure someone has already solved this, because otherwise the Action Sheet would be quite useless ;D I just can’t figure it out and had no luck googling or searching in this forum.

// This is my ActionSheet definition
// It consists of two groups for better visibility and is successfully opened when a user clicks a List item
var actionClick = $f7.actions.create({
      buttons: [
        [
          {
            text: "Manage Spot",
            label: true,
            bold: true,
          },
          {
            text: "Modify",
            color: "blue",
            onClick: () => { // This is where I'm not sure how I would pass the ID of the clicked List item.
              $f7.dialog.alert("Modify clicked"); // Or just basically call a function to modify an element, maybe open a designated Module
              // e.g. with modifyElement(id);
              return "change";
            },
          },
          {
            text: "Delete",
            color: "red",
            onClick: () => {
              // same problem as with Modify
              $f7.dialog.alert("Delete clicked");
              return "delete";
            },
          },
        ],
        [
          {
            text: "Cancel",
            onClick: () => {
              return "cancel"; // just close the panel when user clicks cancel
            },
          },
        ],
      ],
    });

// This is my temporary eventhandler-function thats called when the user clicks a List entry.
// It sucessfully logs the ID of the clicked element in the console. Then the ActionSheet is opened
// I'm not sure how I would pass the ID to the ActionSheet here or if that is necessary at all
    function logClick(evt) {
      console.log(this.id);
      actionClick.open();
      //actionClick.open(id) maybe like this? But how do I use this information in the Action Sheet then?
      // res = actionClick.open() this also hasn't worked for me but maybe I did it wrong?
    }

// This is a firebase function triggered when a new entry is added to the database at the given reference.
// This works fine.
    onChildAdded(localSpotsRef, (data) => {
// createPSEntry just returns an html <li> object to add to the list. also works fine ;)
      var newSpot = createPSEntry(
        data.key,
        data.val().nummer,
        data.val().status,
        data.val().ort
      );
      sectionElement.insertBefore(newSpot, sectionElement.firstChild); // Add the new entry to the DOM
      newSpot.onclick = logClick; // I add an onclick-eventhandler to each list entry
      document.getElementById("ps_preloader").innerHTML = ""; // this just removes the preloader
    });

Thanks a lot in advance! I really get to enjoy Framework7 but some things I just can’t figure out and the examples in the documentation don’t help me either…

2

Hi. Look towards EventBus maybe it will help you.

https://www.google.com/search?q=js+event+bus

3

Instead of create a static actions with variable you can create it dynamically into event like:

// This is my temporary eventhandler-function thats called when the user clicks a List entry.
// It sucessfully logs the ID of the clicked element in the console. Then the ActionSheet is opened
// I'm not sure how I would pass the ID to the ActionSheet here or if that is necessary at all
function logClick(evt) {
  const id = this.id;
  // This is my ActionSheet definition
  // It consists of two groups for better visibility and is successfully opened when a user clicks a List item
  $f7.actions.create({
    buttons: [
      [{
          text: "Manage Spot",
          label: true,
          bold: true,
        },
        {
          text: "Modify",
          color: "blue",
          onClick: () => { // This is where I'm not sure how I would pass the ID of the clicked List item.					
            $f7.dialog.alert(`Modify clicked id: ${id}`); // Or just basically call a function to modify an element, maybe open a designated Module
            // e.g. with modifyElement(id);
            return "change";
          },
        },
        {
          text: "Delete",
          color: "red",
          onClick: () => {
            // same problem as with Modify
            $f7.dialog.alert(`Deleted clicked id: ${id}`);
            return "delete";
          },
        },
      ],
      [{
        text: "Cancel",
        onClick: () => {
          return "cancel"; // just close the panel when user clicks cancel
        },
      }, ],
    ],
  }).open();
  //actionClick.open(id) maybe like this? But how do I use this information in the Action Sheet then?
  // res = actionClick.open() this also hasn't worked for me but maybe I did it wrong?
}

// This is a firebase function triggered when a new entry is added to the database at the given reference.
// This works fine.
onChildAdded(localSpotsRef, (data) => {
  // createPSEntry just returns an html <li> object to add to the list. also works fine ;)
  var newSpot = createPSEntry(
    data.key,
    data.val().nummer,
    data.val().status,
    data.val().ort
  );
  sectionElement.insertBefore(newSpot, sectionElement.firstChild); // Add the new entry to the DOM
  newSpot.onclick = logClick; // I add an onclick-eventhandler to each list entry
  document.getElementById("ps_preloader").innerHTML = ""; // this just removes the preloader
});

As you can see from the example, a new sheet is created for each click event (I added the id to the console.log so you can see how it works)

1 Like
4

Thanks guys! I’ll give both solutions a try :wink: Seems like a doable task now!

5

ok thank you very much! The solution was waaaay easier than I thought it would be ;D
Thanks a lot again, this works perfectly!

6

Don’t worry :slight_smile: , if you need to, write to me

1 Like