> Be assumption that we update flagtick-login__button class:
<button type="button" disabled class="flagtick-login__button btn-submit flagtick-button">Submit</button>
> Associate Angular Framework and jQuery Libraries:
export default class LoginForm extends Component {
private static readonly LOGIN_BUTTON = '.flagtick-login__button';
private signUpPage;
private $component;
private $submitButton!: HTMLButtonElement;
constructor(cmp: HTMLElement) {
super(cmp);
/** OR another case */
this.$component = $(cmp);
this.$submitButton = this.$component.find('.flagtick-login__button');
this.init();
}
init(): void {
this.$submitButton = document.querySelector(LoginForm.LOGIN_BUTTON) as HTMLButtonElement;
if (this.$submitButton) {
this.$submitButton.addEventListener('click', (event) => {
event.preventDefault();
this.login();
});
}
}
}
> Using JavaScript with addEventListener('click', ...). If you want to use jQuery and can search keyword: jQuery Equivalent with addEventListener('click', ...)
constructor(cmp: HTMLElement) {
super(cmp);
this.init();
}
init(): void {
this.bindEvents();
}
private bindEvents = (): void => {
this.$submitButton.on('click', () => {
const emailValue = this.$email.val() as string;
this.login(emailValue);
});
};
private login = (email: string): void => {
this.signUpPage = this.$cmp.dataset.signUpPage;
if (this.registrationPage) {
window.location.href = this.signUpPage;
}
};
> Using $.get() in Angular JS framework
declare interface ParameterDto {
parameter1: string,
parameter2: string,
}
const resource = this.$cmp.dataset.resource as string;
const parameter1 = cookieUtils.getCookie(PARAMETER_1);
const parameter2 = cookieUtils.getCookie(PARAMETER_2);
const endpoint = `${resource}.${this.selector}.json`;
if (parameter1 && parameter2) {
$.get(endpoint)
.done((data: ParameterDto[]): void => {
this.populatingField(data);
$('.flagtick-loader').fadeOut();
})
.catch((err): void => {
logger.error(err);
});
}
> Make sure that page generated with correct integrated AEM component.
http://localhost:4502/content/flagtick/us/en/forms/address-change/jcr:content/root/container/container/addresschangeform.addressChangeForm.json
Note: addresschangeform => id of AEM component. You can check from CRXDE | Lite. Thus, you need to be sure that AEM component already integrated.
So, the addressChangeForm is selector that you defined in both two files: TS file and Sling Servlet Java file.
> Dummy Servlet for example: ValidationAddressServlet:
import static java.net.HttpURLConnection.*;
import static org.apache.sling.api.servlets.ServletResolverConstants.*;
import static org.apache.sling.api.servlets.ServletResolverConstants.SLING_SERVLET_EXTENSIONS;
import static org.osgi.framework.Constants.SERVICE_DESCRIPTION;
@Component(immediate = true, service = Servlet.class,
property = {
SERVICE_DESCRIPTION + MemberAddressServlet.SERVLET_SERVICE_DESCRIPTION,
SLING_SERVLET_RESOURCE_TYPES + MemberAddressServlet.RESOURCE_TYPE,
SLING_SERVLET_METHODS + "=" + HttpConstants.METHOD_GET,
SLING_SERVLET_SELECTORS + MemberAddressServlet.SELECTOR,
SLING_SERVLET_EXTENSIONS + "=" + Constants.EXTENSION_JSON
})
public class MemberAddressServlet extends SlingSafeMethodsServlet {
public static final String SERVLET_SERVICE_DESCRIPTION = "=FLAGTICK - Provides Dummy Information";
public static final String RESOURCE_TYPE = "=flagtick/components/content/addresschangeform";
public static final String SELECTOR = "=validationChangeForm";
private static final long serialVersionUID = 1L;
@Reference
transient private FlagtickIntegrationService flagtickIntegrationService;
@Override
protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
// TODO
}
}
Note: The RESOURCE_TYPE should be correct path to point out to AEM component and SELECTOR, you can totally custom it with your desired name.
> Update selector with another named is validation in TS file.
readonly validation = 'validationChangeForm';
> Hello world
> Zing Me