Conditionally show element based on external API response

I’m trying to get an alert to display or not display, depending on the output of a form submission. Here are the steps that I’d like to happen:

  1. User submits form (POST request).
  2. Form input is sent to external API (POST request) and external API response is received.
  3. Alert display conditionally, depending on the output of the API response.

I have everything working except the “conditionally” part (I can get the alert to show on a button click, and I’ve checked that the API response is as I expect in Chrome’s developer tools). I’ve been trying to get the conditional alert working with the “Show” dynamic attribute on the alert where I select the relevant part of the form’s “data” and do a string comparison on that. Is this the right way to do this, or am I supposed to do this a diffferent way?

Hi,
That does sound like the correct way of doing it.
Try to create a regular binding on say a P tag and see what the values are and why the condition might be failing.

Thanks for taking the time, Sid.

Here’s the value and results of string comparisons of my relevant variable (output_safety_check) when I bind them to P tags:
Screen Shot 2021-07-15 at 11.36.52 AM

Here’s the code for the dynamic value of the P tag that’s showing true:
Screen Shot 2021-07-15 at 11.36.14 AM

Here’s the code for the alert’s dynamic “Show” attribute:
Screen Shot 2021-07-15 at 11.36.40 AM

I got Wappler to generate both of these by clicking on the relevant stuff in the “Data Bindings” popup (didn’t manually write this code). The only difference I see between these two is that the alert one doesn’t have content at the beginning of it; when I add that manually, it still doesn’t seem get the alert to show.

In the generated HTML, I don’t see anything about my dynamic “Show” attribute:

Or does dmxBootstrap4Alert.js add that (see below)?
Screen Shot 2021-07-15 at 1.26.38 PM

Bump. Can anyone point me to the file that should be doing the work for the string comparison to decide whether to add this dynamic attribute?

Everything in the condition looks in order.
Can you try to put in just 1 or 0 in the dynamic show to see if the alert shows up?

Ah, good debugging idea. Don’t know why I didn’t try that haha. Unfortunately, putting “1”, “true”, etc. in the “When” field for the dynamic show doesn’t make it work either. So it seems like the dynamic attribute “Show” isn’t working, at least not as we expect. Does it work for you?

Perhaps you are conflating the dynamic attribute “Show” with the alert dynamic attribute “Alert Show”?

Show will display an element, but an alert has a special attribute of when to actually display the alert itself, not just the element.

2 Likes

That appears to be it! Thanks, Ken and Sid!