avatar
catch event submit button to call REST APIs AEM AEM

> 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

You need to login to do this manipulation!