Send argument in Javascript Use API from HTML

[Shaheena_Sheikh]

I have a js file with the following code:

"use strict";
use(function () {

//var url= this.url; //line 3
var url = "http://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/use-api-javascript.html?lang..."; //line 4
var getRequest = new org.apache.commons.httpclient.methods.GetMethod(url),
client = new org.apache.commons.httpclient.HttpClient(),
status = new org.apache.commons.httpclient.HttpStatus();
var info = {};
var statusCode= client.executeMethod(getRequest);
if (statusCode != 404)
info.code = true;
else
info.code = false;
return info;
});

HTML:

<template data-sly-use.item="java model path">

<sly data-sly-use.status="'myfile.js' @url='${item.url}'">

</template>

The above code works fine for the hard coded value of URL in JS line 4. Now if i uncomment line 3 and comment out line 4 from my JS. The code breaks.

[MayurSatav · Accepted solution]

Hi @Shaheena_Sheikh ,

I checked the above code and I think it is because of the synchronous request in

http.open('HEAD', url, false);

If this value is false, the send() method does not return until the response is received and this might be the case parsys stops loading. If possible could you please share more details so that I can debug it?

Edited

To sent URL as a parameter, you should use data

<div data-sly-use.status='myfile.js' @ url=${file2.path}" data-example="${status.aFunction}" />

you can access arguments by using 'this.'

use(function () {
var url = this.url;
.
.
.
});

2nd method

access data variable attribute through class

<div class="myClass" data-sly-use.status="myfile.js" data-url="${file2.path}"> in HTML

var args= $(".myClass");
var url= args.data("url");

Thank you.

[Shaheena_Sheikh]

I have updated the code. Now, this part of code work, but i want to send argument to my HTL Javascript Use api function

[MayurSatav]

I have updated my reply. please check

[Shaheena_Sheikh]

<sly data-sly-use.status="'myfile.js' @ url=${file2.path}"> gives me an error --> SlingException: Cannot get DefaultSlingScript: Identifier 'myfile.js' @ url=http://localhost:4502/<path> cannot be correctly instantiated by the Use API

[Shaheena_Sheikh]

And for the second code that you suggested im getting the error: SlingException: Cannot get DefaultSlingScript: org.mozilla.javascript.EcmaError: ReferenceError: "$" is not defined.

[Shaheena_Sheikh]

Thanks, its working now

[kautuk_sahni]

@MayurSatav, thank you for sharing the answer with AEM community. We need great AEM SMEs like you. Keep contributing to the AEM community. 

[MayurSatav]

Thank you @kautuk_sahni