PricingBlog

Using the toast package on success/error form submissions

  • plusmin-1268494361235292182

    Armand

    1 year ago

    I didn't see a post for the Toast package in the packages channel. So I thought I'd post my question here. @Jacob Kofoed

    I've been struggling a bit on to get the toasts to work on the following use case:
    I have a form that I want to submit with a button, to my database (so via an API POST). I see that with the Toast package I have to use the said button as a component. And in the component I set the messages for the toast. However, I want to show a success message on a successful submission and an error message when the submission didn't go through.

    What is the best way to set this up?

    I currently have this:
    1. Click event in component.
    2. Click on main page triggers the above.
    3. And triggers an API call
    4. On success/error...so this is where I get stuck.
    I've been playing with attributes inside the component to get this working, but I have some doubts whether that is the best way to do it.

    Apologies if this is basic question. My knowledge on how to make components communicate back and forth with the parent is limited. And I hope any answer/guidance with the above question will also help me understand it a bit better. For the record, I have watched the videos on YT regarding components, but they don't cover this use case (or I just fail to understand it in that way).

    Thanks 🙏
    1
  • jacobkofoed-1268532161825210419

    Jacob Kofoed

    1 year ago

    Hi @Armand I did this video to go through the process. I hope it helps 🤞

    https://youtu.be/uhKIVMxJSmc
  • plusmin-1268532385197326367

    Armand

    1 year ago

    Awesome! Will check it out. Thanks 🙏
  • plusmin-1268534453018427392

    Armand

    1 year ago

    I understood it all. So I should move my API Post to the button component? Because now I have it on the main page (also because I have a bunch of variables from the form inputs there that I want to send to my database with the API Post).
  • jacobkofoed-1268537213147283567

    Jacob Kofoed

    1 year ago

    You can use auto-fetch if you want to, but not on the page. You can just move everything to a component and just have the page render the toaster and then the component with everything inside. That way they will have access to the toaster.
  • jacobkofoed-1268537651447988257

    Jacob Kofoed

    1 year ago

    The important part is that you must call the toaster from a component that is a descendant of the toaster component somehow.
  • plusmin-1268539311385612319

    Armand

    1 year ago

    I made a quick video to clarify what I'm trying to do. Let me know if that makes sense what I'm trying to do.
    And again, thanks for looking into my question 🙂
  • plusmin-1268862305207058577

    Armand

    1 year ago

    I've managed to find a way to make it work. Here's a video that shows how, for anyone who might be struggling with this as well. @Jacob Kofoed FYI

    TLDR
    The toast message didn't show up because the component was hidden again when the message was supposed to pop up. Making sure the component is hidden with a delay solved it.
  • I have no idea if the way I have it set up is best practice, but it works.
  • drhariri-1290014230061252691

    DrHariri

    1 year ago

    Hey @Jacob Kofoed, this package looks great.
    Since the design is already made and the logic, is there no way to trigger the toaster through a workflow step?
    It is not always the case that you want to use a separate component and sometimes the load is processing something already on page load and the toaster could be useful there as well.
    Thanks!