aem component from front end to backend call

[djohn98390536]

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.

[iamnjain]

Hi @djohn98390536 

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

[djohn98390536]

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. 

[djohn98390536]

<script type="text/javascript" src="//customer.demo.com/scripts/bundles/search-script.js"></script>
<script type="text/javascript">
var DemoSearch;
$(document).ready( function() {
var demoSettings = {
customerId: 296,
engineId: 1798,
searchUrl: "/en_us/common/cse.html",
searchInputs: ["demo-search-form","demo-search-content-form"],
initSearchBoxText: "",
language: "en",
endlessScroll: {stopAfterPage:3, resultsPerPage:10, bottomOffset: 145},
translateSearchTemplates: true,
loading: "<div class='loader'></div>"
};
</script> 

[A_H_M_Imrul]

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.

[djohn98390536]

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]

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

[djohn98390536]

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]

@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.

[djohn98390536]

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.

[djohn98390536]

Hi @kautuk_sahni Please find the below issue.

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?

There are two search scripts like below based on the selection needed to call these scripts.

Sample Search Script

================

<script type="text/javascript" src="//customer.demo.com/scripts/bundles/search-script.js"></script>
<script type="text/javascript">
var DemoSearch;
$(document).ready( function() {
var demoSettings = {
customerId: 296,
engineId: 1798,
searchUrl: "/en_us/common/cse.html",
searchInputs: ["demo-search-form","demo-search-content-form"],
initSearchBoxText: "",
language: "en",
endlessScroll: {stopAfterPage:3, resultsPerPage:10, bottomOffset: 145},
translateSearchTemplates: true,
loading: "<div class='loader'></div>"
};
</script>