From what I read in the docs, to update a partial after a form submission via AJAX, you use the data-request-update API attribute, and you just have to use, i.e., "msgs: '#msgs'" so that it will update the #msgs element with the contents of the msgs partial...but it's not.

<div id="msgs">
        {% partial 'msgs' %}
    </div>
    <div id="form-box">
        <form data-request="onSend" data-request-error="alert(jqXHR.responseText);" data-request-update="msgs: '#msgs'">
            <span>
                <input type="text" name="uname" id="username" autocomplete="off" placeholder="Username" required>
                <input type="text" name="msg" autocomplete="off" placeholder="Write message" required>
                <button type="submit" id="sendBtn">Send</button>
            </span>
        </form>
    </div>

What am I missing?

Last updated 6 years ago

Nvm, I figured it out

I'm having the same problem. Thanks for not sharing your answer with us.

Last updated 6 years ago

Ok. Found the answer to why my Ajax wasn't working. I'm on a new, blank installation of October and was building using a tutorial. The tutorial was including a template with links to jQuery. I'm used to working with raw JS so hadn't thought about October having a dependency on it. Working now :-)

You must add ajax libraries {% framework extras %}

I added them at the end of the layout, like this:

<script src="{{ 'assets/js/new-age.min.js' | theme }}"></script>
{% scripts %}
{% framework extras %}
</body>
</html>

You can read more here: https://octobercms.com/docs/ajax/extras

Last updated 3 years ago