{% extends "demo/_layout" %}

{% set pageTitle = "Alternate Success from Template after AJAX Submit | Extras" %}

{# Replace 'freeformAjaxTemplateSuccess' with your form handle #}
{% set demoFormHandle = "freeformAjaxTemplateSuccess" %}

{% block content %}

    {% set form = freeform.form(demoFormHandle, { formattingTemplate: pageTemplateFile }) %}

    <div class="freeform-page-heading">
        <h2>Alternate Success from Template after AJAX Submit</h2>
        <p>This example shows how to override the default AJAX success message and load a success message from another template instead.</p>
    </div>

    {% if form %}

        <div id="extras-form-wrapper">
            {{ form.render }}
        </div>

    {% else %}

        <div class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>You must rename your form handle to <code>{{ demoFormHandle }}</code> for this part of the demo to work.</p>
        </div>

    {% endif %}

    {# Instructions to get this page working correctly #}
    <div class="extras-instructions">
        <h4>This page will not display correctly until...</h4>
        <p>
            In order to view this page live, you'll need to make some adjustments to this template or your test form:
            <ol>
                <li>Rename your test form handle to <code>{{ demoFormHandle }}</code> or adjust the form handle name inside this template to match your test form.</li>
            </ol>
        </p>
        <p class="extras-instructions-warning">
            Please note that using the <b>Load Success Template</b> option for the <b>Success Behavior</b> setting will override this. It's also worth noting that feature supersedes this approach.
        </p>
    </div>

{% endblock %}

{% block footerJs %}

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        // Find the form element, can be a specific ID or just look for any forms
        var form = $('form[data-id]');
        form.on('freeform-render-success', function (event) {
            // Disable the default success rendering
            event.preventDefault();

            // We locate the 'form-wrapper' DIV element which contains our form
            // and we swap its contents (the whole form) with the HTML that we
            // fetch from the "/demo/extras/responses/ajax-success-message" template
            $('#extras-form-wrapper').load('{{ siteUrl }}demo/extras/responses/ajax-success-message');
        });
    </script>

{% endblock %}