Level 4

aem component from front end to backend call

Forum|Forum|2 years ago
August 24, 2023
4 replies
2420 views

I have a requirement like for a checkbox or toggle bar on the AEM page When a checkbox or toggle bar is true should call one search script that is present in the page component of the template when it is false

It should call another search script that is also present in the page component of the template.

What should be the correct way to call these scripts?

Thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

iamnjain

Community Advisor

Hi @djohn98390536

Can you please paste the search script and related code ( remove sensitive data, of-course ). This will help better answer your query.

djohn98390536Author

Level 4

Inside the page component, there r two simple scripts which i need to call based on the checkbox selected by user from a AEM page. what approach is the best practice in AEM.

A_H_M_Imrul

Community Advisor

Hello Dillip,

I am not 100% sure what do you mean by calling scripts. I assume you have to pass some data the from front-end to the back-end based on a checkbox toggle. Ideally the search functionality should be written in a back end service and exposed through an end point via a Servlet.

It looks like you are using jquery, so trying to provide a sample with jquery

Markup:

<form id="searchForm">
    <input type="text" id="searchQuery" placeholder="Enter your search query">
    <label>
        <input type="checkbox" id="searchOnToggle"> Search on Toggle
    </label>
    <button type="submit">Search</button>
</form>
<div id="searchResults"></div>

Javascript

<script>
$(document).ready(function() {
    $("#searchForm").submit(function(event) {
        event.preventDefault(); // Prevent the form from submitting normally

        var query = $("#searchQuery").val(); // Get the search query from the input field
        var searchOnToggle = $("#searchOnToggle").is(":checked"); // Check if the checkbox is checked

        if (searchOnToggle) {
            // Send the search query to the Java servlet using AJAX
            $.ajax({
                type: "GET", // Use GET or POST based on your servlet configuration
                url: "YourSearchServletURL", // Replace with the actual URL of your Java servlet
                data: { query: query }, // Pass the query as a parameter
                success: function(response) {
                    // Display the search results in the searchResults div
                    $("#searchResults").html(response);
                },
                error: function() {
                    alert("An error occurred");
                }
            });
        } else {
            // Clear search results if checkbox is not checked
            $("#searchResults").empty();
        }
    });
});
</script>

Let me know if that helps..

Thanks.

djohn98390536Author

Level 4

Hi @a_h_m_imrul thanks for sharing the above sample code.

As we r calling third party search engine in above script search input is being passed dynamically and showing results in aem page.

As we hv two third party search scripts both search inputs we r taking from same search box and depending on the checkbox user selected respective search script should get called .

aanchal-sikka

Community Advisor

Hello @djohn98390536

The approach will depend on what these scripts are.

1. If search criterion and results are different:

- Implement the logic in JS to call script 1 or script 2 depending on checkbox.

2. If search criterion and results are same, only the query differs:

- Pass checkbox value to the servlet that is meant to execute the search

- Call the servlet. Resolve query based on checkbox value from UI

- Return results

Aanchal Sikka

djohn98390536Author

Level 4

hi @aanchal-sikka can u provide some sample code for option1 we r not using any sling servlet we r following the option1 only

kautuk_sahni

Community Manager

@djohn98390536 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

Kautuk Sahni

djohn98390536Author

Level 4

Hi @kautuk_sahni I need more information the issue I am facing is not yet resolved. Please help and share some required info that'll help me to resolve the issue.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded