Hi all,
I have the content fragment data in custom servlet end point as JSON and I need to get the servlet end point data using ajax call in js and need to display over the json data in the page, if any one know how to excute this kindly give some idea on this.
This is my Custom Servlet End point data
Thanks
Nandheswara
Solved! Go to Solution.
Views
Replies
Total Likes
May be one of the way you can follow this .
in your sightly code of the page ,
<sly data-sly-use.fragmentCall="fragemntData.js"></sly>
${fragmentCall.title}
${fragmentCall.description}
${fragmentCall.comment}
fragemntData.js : It contains the Ajax call.
"use strict";
var comment;
var title;
var description;
$.ajax({
url: "/bin/exporter",
success: function (result) {
comment = result.comment;
title = result.title;
description = result.description;
}
})
return {
title : title;
description:description;
comment: comment;
}
Otheriwse you can get the object from response and same you can return to sightly . there you can loop and display the required fields.
Thanks
Siva
This can be simply done by creating a js
$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: "/bin/exporter",
success: function (result) {
$("#h11").html(result);
}
});
});
});
Hi @Nandheswara what is the issue you are facing? I don't understand the request.
You need to simply use a GET request via Javascript, you can use Jquery, VanillaJS, or any other framework.
Take below as an example:
$.ajax({
type: 'GET',
url: '/bin/exporter.json'
}).done(function(data) {
console.log('Done data loaded:' + data);
//Manipulate the DOM to render in page
}).fail(function(err) {
console.log('Err' + err);
});
You can create a html template and container where you will display ajax response.
<!-- Your HTML template -->
<div class="template">
<span class="item-name"></span>
<span class="item-price"></span>
</div>
<!-- Your container where the cloned elements will be appended -->
<div id="container"></div>
The following ajax code implementation will fetch the response from your AEM servlet, iterate through the array list, clone the HTML template, update the elements in each iteration with the class selector, and then append the updated template to the container in your HTML.
// Your AJAX call
$.ajax({
url: '/bin/exporter.json',
type: 'GET',
success: function(response) {
// Clear previous content from the container
$('#container').empty();
// Loop through the AJAX response
response.forEach(function(item) {
// Clone the template and update its elements
var $clonedTemplate = $('.template').clone();
$clonedTemplate.find('.item-name').text(item.name);
$clonedTemplate.find('.item-price').text(item.price);
// Append the updated template to the container
$('#container').append($clonedTemplate);
});
},
error: function(xhr, status, error) {
console.error('Error occurred:', error);
}
});
May be one of the way you can follow this .
in your sightly code of the page ,
<sly data-sly-use.fragmentCall="fragemntData.js"></sly>
${fragmentCall.title}
${fragmentCall.description}
${fragmentCall.comment}
fragemntData.js : It contains the Ajax call.
"use strict";
var comment;
var title;
var description;
$.ajax({
url: "/bin/exporter",
success: function (result) {
comment = result.comment;
title = result.title;
description = result.description;
}
})
return {
title : title;
description:description;
comment: comment;
}
Otheriwse you can get the object from response and same you can return to sightly . there you can loop and display the required fields.
Thanks
Siva