I have a simple form with a submit button and previously I was using JSP page to write a script tag and execute a JS function. How to convert this to a Sightly page and execute this script? I need to pass data only on click of the submit button and also retrieve data.
Below is the code,
<script>
$(document).ready(function() {
$('body').hide().fadeIn(5000);
$('#submit').click(function() {
var failure = function(err) {
alert("Unable to retrive data "+err);
};
//Get the user-defined values to persist in the database
var myFirst= $('#first').val() ;
var myLast= $('#last').val() ;
var myDescription= $('#description').val() ;
var myAddress= $('#address').val() ;
var url = location.pathname.replace(".html", "/_jcr_content.persist.json") + "?first="+ myFirst +"&last="+myLast +"&desc="+myDescription +"&phone="+myAddress;
$.ajax(url, {
dataType: "text",
success: function(rawData, status, xhr) {
var data;
try {
data = $.parseJSON(rawData);
//Set the fields in the forum
$('#custId').val(data.pk);
} catch(err) {
failure(err);
}
},
error: function(xhr, status, err) {
failure(err);
}
});
});
}); // end ready
</script>
Solved! Go to Solution.
Hi preena,
you have to create clientLib and create your js file and put your code inside
$(function(){
//your js code here
});
and include that clientLib inside your component or page.
How to create ClientLib :AEM Client Libraries explained by example
Thanks
Views
Replies
Total Likes
Hi preena,
you have to create clientLib and create your js file and put your code inside
$(function(){
//your js code here
});
and include that clientLib inside your component or page.
How to create ClientLib :AEM Client Libraries explained by example
Thanks
Views
Replies
Total Likes
Hi Zeeshank,
How do we pass values to the JS from HTL using clientlib? I have seen this example before, but haven't found a way to pass values or retrieve.
And how is it different from using HTL Javascript Use API?
Views
Replies
Total Likes
Hi Preenan,
In Sightly, you can send values from a form to a helper script using JavaScript Use-API and retrieve the form values using "properties.get(<propertyName>, "");"
Unlike using script tag in JSPs, Sightly Executes these helper JS at server side.
Please use the following sample code for further understanding in JavaScript use-API:
http://adobeaemclub.com/javascript-use-api-with-a-simple-component-in-sightly/
Thanks,
Techaspect Solutions.
http://www.techaspect.com/
Hi
<script type="text/javascript">
var locale = "${i18nObj.locale @ context='scriptString'}"
</script>
In your .html page you can pass the value of sightly by using context='scriptString'.like above example
If you want to get the value you can make the javascript variable to be global and acess that value in Javascript.
Views
Replies
Total Likes
and get the value in js like this
url:"/bin/message?message="+message+"&locale="+locale,
here local is getting value from sightly.
Views
Replies
Total Likes
Hi!
I got some part working here. Just want to add one condition while passing value to JS.
Can you show me how to pass the value to Javascript file from HTL only when the submit button is clicked.
Earlier while using JSP page, I had given the condition like below,
$('#submit').click(function() {
//random code
}
How do I do the same in HTL or write this in JS page when using Use API?
Views
Replies
Total Likes
Views
Likes
Replies