XF 2.2 How to refresh and display message

[FoxSecrets]

I need to display a message after page refresh.
Currently if the message is returned the page is not refreshed, and if refreshed no message is displayed.
Does anyone know how can do both?

PHP

        //...
        $message = $result['message'];
        $this->message(\XF::phrase($message));
        $refreshPage = true;
      
        return $this->view('FOX\Products:Product\Index', 'fox_products_index', [
            'refreshPage' => $refreshPage
        ]);
        //...

TEMPLATE

<xf:if is="{{$refreshPage}}">
  <script>
    window.location.reload();
  </script>
</xf:if>

 

[Jeremy P]

Generally you'd return a redirect response with the message:

return $this->redirect($this->buildLink('some/link'), \XF::phrase($message));

Then handle flashing the message with JS. Is this in response to a form submission or what?

 

[FoxSecrets]

Yes it's a response to a form submission. What happen to the message sent via the redirect? You mean handle flash message through custom function like below? If so, how can I show into XF standard view, what's the css class for that?

function showFlashMessage(element) {
  var event = new CustomEvent('showFlashMessage');
  element.dispatchEvent(event);
};

var flashMessages = document.getElementsByClassName('js-flash-message');
showFlashMessage(flashMessages[0]);

 

[Jeremy P]

I asked because the core JS AJAX form handler will handle this automatically:

<xf:form action="{{ link('your/action') }}" ajax="true" data-force-flash-message="on" class="block">

The message will flash at the top before redirecting, which is the standard XF UI behavior. If you need a different behavior you'd have to write your own handler and call XF.flashMessage('message...');.

 

[FoxSecrets]

Wow awesome! Didn't know this trick
Thank you @Jeremy P

 

[FoxSecrets]

Hey @Jeremy P , now I'm trying to flash a message in a regular table with a link (not on a form), and you said in this case I should write my own handler, so how to refer to the XF default css that has the flash message?

 

[Jeremy P]

Does the link actually make a request? If so, the usual pattern is for the corresponding controller action to return a redirect with the message, just like a form. Then mark the link as an overlay link and set the force-flash-message option:

<a href="{{ link('some/route') }}" data-xf-click="overlay" data-force-flash-message="on">Do something</a>

The message will display prior to the redirect.

If the link is some other JS thing, you can just call XF.flashMessage('some message', 1000); in your click handler directly.

 

[FoxSecrets]

It doesn't make a request, actually is the action to send email which I intend to display the success message. I tried what you said but seems not to work: XF shows as undefined constant and flashMessage as undefined function. Something missing?

PHP:

XF.flashMessage('admin.fox_email_successfully_sent');
return $this->redirect($this->buildLink('fox-my-page'));

 

[Jeremy P]

It's a JavaScript function, not PHP. Presumably the link does make a request though if it's hitting a controller action?

 

[FoxSecrets]

Yes, sorry, I got confused. And regarding you question I believe it does.
It redirects to page which calls the actionIndex and displays all results from a table, with viewParams. It makes sense? But I tried to insert the "data-force-flash-message="on" attribute in anchor tag and still didn't work. Any suggestion?

 

[Jeremy P]

You need data-xf-click="overlay" too, and you should include the message with your redirect the same as you did with the form.

 

[FoxSecrets]

With redirect it's not working. So I tried using regular message and it worked.
As the action happen on the same page, that's ok. Thanks @Jeremy P

return $this->message(\XF::phrase('admin.fox_email_successfully_sent'));

 

[FoxSecrets]

Hey @Jeremy P , checking again I've notice that I'll really need the redirection because of status updates on page reload. So backing to your solution, it makes the flash message appear but also the overlay of the page itself. If I remove the overlay tag do not display anything. Do you have another approach to solve this?

<a href="{{ link('some/route') }}" data-xf-click="overlay" data-force-flash-message="on">Do something</a>

return $this->redirect($this->buildLink('some/link'), \XF::phrase($message));

 

[FoxSecrets]

@Jeremy P any idea to solve this issue? or anyone else knows?

 

[Jeremy P]

Try setting the followRedirects option:

<a href="{{ link('some/route') }}" data-xf-click="overlay" data-follow-redirects="on" data-force-flash-message="on">Do something</a>

 

[FoxSecrets]

Now it's a little better, there is no overlay window, but I see 2 flash messages.



When I remove "force flash" option, it displays too fast.



Is there anyway to display only 1 flash or add a timer to this flash message?

 

[Jeremy P]

Maybe try without data-force-flash-message, though technically I think this is just a bug in the core.

 

[FoxSecrets]

I tried as I said on the post above, but it's too fast.

Is it possible to set a timer like 'setTimeout' ?

 

[Jeremy P]

Ah sorry. No, that's basically what the forceFlashMessage option already does. It just so happens that the XF.ajax handling automatically flashes messages itself, and the overlay click does not correctly suppress this behavior. It'll be fixed in the next version.

 

[FoxSecrets]

Alright! Thanks @Jeremy P !