XF 2.1 Javascript Confirm Box, in XF Styling?

[Jaxel]

In JavaScript, you can do prompt() or confirm() to introduce an action request from the end user. Does XF have a system like this built in? Something that doesn't require any server interaction, just a momentary pause in the javascript flow?

 

[Arty]

You can try using XF.overlayMessage. First parameter is title, second parameter is HTML where you can put buttons with events.

XF.overlayMessage('Confirmation', '<p>Do you agree?</p><button class="button button--primary" onclick="XF.hideOverlays(); do_stuff();">Yes</button> <button class="button" onclick="XF.hideOverlays();">No</button>');

 

[Jaxel]

Was hoping for something more elegant.

 

[Chris D]

More elegant in what way, exactly? It does exactly what you want, so if that's not what you want, then you'd need to be more clear about what you do want.



Obviously if you wanted it to look different, that would just be a case of changing the HTML.

 

[DragonByte Tech]

More elegant in what way, exactly?

I’m guessing he meant whether there was a function like XF.Confirm() that took title, message, confirmUrl, rejectUrl as arguments and produced that HTML behind the scenes

Which to be fair would not be the worst idea, though I don’t think it exists already.

 

[Cupara]

I’m guessing he meant whether there was a function like XF.Confirm() that took title, message, confirmUrl, rejectUrl as arguments and produced that HTML behind the scenes

Which to be fair would not be the worst idea, though I don’t think it exists already.

I have to agree on having this as a default function would save some time and lines of coding.

 

[asprin]

Is this achievable via a template?

i.e. on a form when a user clicks the <xf:submitrow /> button, it should ask for confirmation.

If user selects "Yes", submit the form. If user selects "No" close the dialog box and do nothing.

 

[Ozzy47]

I want to add a confirmation to the logout button. This is what I have:

        <div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}" style="margin-right: 5px;">
            <a href="{{ link('logout', null, {'t': csrf_token()}) }}"
        class="p-navgroup-link p-navgroup-link--iconic"
        data-xf-init="tooltip" title="{{ phrase('log_out')|for_attr }}" rel="nofollow">
                <i aria-hidden="true"></i>
                <span>
                    <xf:fa icon="fa-sign-out" />
                </span>
            </a>
        </div>

How would I add a confirm message when someone clicks in the icon?