This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

penna20166
penna20166

I'm trying to use AJAX via its data attributes API in order to dynamically load varying kinds of content into a single "modal template". One of these contents is a login partial that I pulled from the User's plugin account component and so that I could have them customized a bit. The problem is, now that I'm injecting this partial via AJAX, I've noticed that the "loginAttributeLabel" is coming out empty. Any ideas?

A few snippets of code to help make things clearer:

a) The AJAX handler placed inside my "default.htm" layout's PHP code block:

<? function onGetModal() { $this['type'] = input('type'); return ['#modal .modal-container' => $this->renderPartial('site/modals')]; } ?>

b) The modal template:

c) Inside the "site/modals" partial I check the value of the "type" var and return the corresponding chunk of html. This would be the chunk for the "login" modal:

Log into your account

Fill the form below with your account credentials

{% if not user %} {% partial account ~ '::signin' %} {% endif %}

c) Inside the "partials/account" folder my "signin.htm" looks like this:

d) And this is the link which triggers the login modal:

<a href="#" id="btnLogin" class="btn btn-xs btn-primary launch-modal" data-request="onGetModal" data-request-loading="#loading" data-request-data="type: 'login'">Login

NOTE: I tried to use the "data-request-before-update" data attribute in order to trigger the display of the modal, but that just didn't work. No matter what I tried, the modal only appeared once the partial had been fully retrieved. So I ended up using jQuery + Bootstrap's functionality to force the display of the modal as soon as the anchor is clicked. So there's some piece of JS involved in all this:

$document.ready(function () {

$('.launch-modal').on('click', function (e) {
    e.preventDefault();
    $('#modal').modal();
});

$('#modal')
    .on('hidden.bs.modal', function () {
        // empty the modal's content
        $(this).find('.modal-container').empty();
    });

});

Any ideas, insights or pointers towards what perhaps is going on here will be greatly appreciated.

PS: Please excuse the formatting... couldn't make it much better than this.

penna20166
penna20166

I guess I found the solution myself. Leaving a note here in case anyone else faces this same issue.

I spent some time examing the original templates for both the "account" and the "resetpassword" components of the User plugin. I eventually noticed that the resetpassword's partials all used the "SELF " keyword when either referencing itself or any of its own methods or properties. Apparently this construct is missing altogether from the account component's partials, such as the "signin" and the "register".

Perhaps this doesn't represent an issue when using the component in a more conventional way, but once we start tearing things apart, as I believe is my case, this difference apparently manifested itself.

Last updated

1-2 of 2

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.