Submit form with Ajax

Experience Manager (PaaS/OnPrem)
1

Hi Team,

I have a normal form and search box in many of my webpages. Now I want to submit my form without refreshing the page(using JQuery of-course) and same is true for search box.

But the problem I am facing is, My project do not have any REST endpoint(URL). could you please help me to achieve this.
I am not sure, how can I implement this .

Thanks,
Amit

2

I not so sure you need a REST endpoint. If you have an hst:actionURL as POST action (see [1]) you can just use form.submit() from Javascript, right?

Jeroen

[1] https://www.onehippo.org/library/concepts/component-development/hst-2-forms.html

3

Ah no page refresh… if you want a REST, please start reading at [2]… a plan JAX-RS service could fit your case.

[2] https://www.onehippo.org/library/concepts/rest/expose-restful-web-services-overview.html

4

https://www.onehippo.org/library/concepts/component-development/serve-a-dynamic-resource.html Checkout this one. What you want is handle a request in #doBeforeServeResource

5

Hi bcanvural,

Thank you, doBeforeServeResource() method is working fine but I am not sure how can I return Json as a response to my Jquery Ajax call method.

Other problem I am facing is it is redirecting to its template, is there any way to stop this.

Please suggest.

Thanks,
Amit

6

Hi Jeroen.hoffman,

Thanks, I am able to hit the methods, but problem is I am not able to return json to Ajax call. And also it is redirecting to resource template, is there any way I can stop this redirect and just return the json to my front end Ajax call.

Please suggest.

Thanks,
Amit

7

Thanks, but this not possible as doAction useses PRG pattern.

Thanks,
Amit

8

Something like this works for me in dobeforeserveresource:

try (OutputStream os = request.getRequestContext().getServletResponse().getOutputStream()) {
            request.getRequestContext().getServletResponse().addHeader("Content-Type", "application/json");
            request.getRequestContext().getServletResponse().setStatus(HttpServletResponse.SC_OK);
             os.write("{\"success\": \"true\" }".getBytes());
             os.flush();
        } catch (IOException ex){
            ex.printStackTrace();
        }
    }
9

Many Thanks @bcanvural , Its really very helpful. I have few other queries, the reason I am asking these questions, actually I am not able to receive the proper data in my Ajax call .

So would you please help on below queries:

  1. Are you getting proper response with data in your javascript method(from where you are firing your AJAX call)
  2. so say if you are getting data on your client side, is your page is getting redirected or rendered the same template you are providing for your dobeforeserveresource() functions?
  3. Do I need to provide more details, because my page is rendering the resource-template provided as part of dobeforeserveresource() once my AJAX call is complete.

Many Thanks,
Amit

.

10
  1. Are you getting proper response with data in your javascript method(from where you are firing your AJAX call)

I wasn’t until I realized the url I was calling was being escaped for some reason. The js part looks like this:

<@hst.resourceURL var="resourceUrl" resourceId="blogresource" fullyQualified=true escapeXml=false/>
  <script>
    jQuery(document).ready(function ($) {
      console.log("${resourceUrl}".replace("amp;", ""));
      $.get("${resourceUrl}".replace("amp;", ""), function (data) {
        console.log(data);
      });
    });
  </script>

(had to replace some chars)
2. …
I’m not getting redirected. Make sure you don’t call super.doBeforeServeResource
3. I don’t have hst:resourcetemplate set at the moment. just returning text response

11

Thanks @bcanvural and @jeroen.hoffman. Finally my issue is solved .

Many thanks to @bcanvural.

1 Like