AJAX call in AEM 6

[Har_Khandelwal]

HI, 

I am trying to make an AJAX call through my JS file,

The following is my code:

use(function () {
   console.log('Entry in Active Checker JS File');

    var page = currentPage.getPath()+'/_jcr_content/feature/event.infinity.json';
    var queryString = '?nocache=nocache';
    console.log(page + queryString);

    $.ajax({ 
        type: 'GET', 
        url: page, 
        async: false,
        data: { get_param: 'event' }, 
        success: function (data) { 
             var names = data;

            console.log(names);
            }
    });

    var currentDate = new Date();

    console.log('Exit in Active Checker JS File');
});

Calling it from the html as :

<div data-sly-use="activeChecker.js" data-sly-unwrap>
    123
    </div>

but getting the following error. :

13.01.2015 19:14:57.238 *ERROR* [0:0:0:0:0:0:0:1 [1421156697160] GET /content/global/en-us/home/event4.html HTTP/1.1] com.day.cq.wcm.core.impl.WCMDeveloperModeFilter Error during include of SlingRequestPathInfo: path='/content/global/en-us/home/event4/jcr:content/feature', selectorString='null', extension='html', suffix='null'
org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: org.mozilla.javascript.EcmaError: ReferenceError: "$" is not defined. (/apps/project/components/content/feature/feature.html#11)
    at org.apache.sling.scripting.core.impl.DefaultSlingScript.service(DefaultSlingScript.java:481)
    at org.apache.sling.engine.impl.request.RequestData.service(RequestData.java:511)
    at org.apache.sling.engine.impl.filter.SlingComponentFilterChain.render(SlingComponentFilterChain.java:45)
    at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:64)
    at com.day.cq.wcm.core.impl.WCMDeveloperModeFilter.doFilterWithErrorHandling(WCMDeveloperModeFilter.java:150)
    at com.day.cq.wcm.core.impl.WCMDeveloperModeFilter.doFilter(WCMDeveloperModeFilter.java:118)
   ...
    at org.eclipse.jetty.http.HttpParser.parseAvailable(HttpParser.java:235)
    at org.eclipse.jetty.server.AsyncHttpConnection.handle(AsyncHttpConnection.java:82)
    at org.eclipse.jetty.io.nio.SelectChannelEndPoint.handle(SelectChannelEndPoint.java:667)
    at org.eclipse.jetty.io.nio.SelectChannelEndPoint$1.run(SelectChannelEndPoint.java:52)
    at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:608)
    at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:543)
    at java.lang.Thread.run(Unknown Source)
Caused by: io.sightly.java.api.SightlyUseException: org.mozilla.javascript.EcmaError: ReferenceError: "$" is not defined. (/apps/project/components/content/feature/feature.html#11)
    at io.sightly.js.loop.EventLoop.run(EventLoop.java:71)
    at io.sightly.js.loop.EventLoop.schedule(EventLoop.java:46)
    at io.sightly.js.JsEnvironment.runScript(JsEnvironment.java:136)
    at io.sightly.js.JsEnvironment.runResource(JsEnvironment.java:99)
    at io.sightly.js.JsEnvironment.run(JsEnvironment.java:91)
    at io.sightly.js.JsEnvironment.run(JsEnvironment.java:118)
    at io.sightly.js.JsUseProvider.provide(JsUseProvider.java:92)
    at io.sightly.java.engine.extension.use.UseExtension$1.call(UseExtension.java:82)
    at io.sightly.java.runtime.common.SightlyRuntimeImpl.call(SightlyRuntimeImpl.java:51)
    at apps.marsh.components.content.eventfeaturearea.SightlyJava_eventfeaturearea.render(SightlyJava_eventfeaturearea.java:183)
    at io.sightly.java.api.BaseRenderUnit.render(BaseRenderUnit.java:39)
    at io.sightly.java.engine.SightlyScriptEngine.evaluateScript(SightlyScriptEngine.java:109)
    at io.sightly.java.engine.SightlyScriptEngine.eval(SightlyScriptEngine.java:93)
    at org.apache.sling.scripting.core.impl.DefaultSlingScript.call(DefaultSlingScript.java:361)
    at org.apache.sling.scripting.core.impl.DefaultSlingScript.eval(DefaultSlingScript.java:171)
    at org.apache.sling.scripting.core.impl.DefaultSlingScript.service(DefaultSlingScript.java:463)
    ... 199 common frames omitted
Caused by: org.mozilla.javascript.EcmaError: ReferenceError: "$" is not defined. (/apps/project/components/content/feature/feature.html#11)
    at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:3687)
    at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:3665)
    at org.mozilla.javascript.ScriptRuntime.notFoundError(ScriptRuntime.java:3750)
    at org.mozilla.javascript.ScriptRuntime.nameOrFunction(ScriptRuntime.java:1794)
    at org.mozilla.javascript.ScriptRuntime.name(ScriptRuntime.java:1733)
    at org.mozilla.javascript.Interpreter.interpretLoop(Interpreter.java:1552)
    at org.mozilla.javascript.Interpreter.interpret(Interpreter.java:815)
    at org.mozilla.javascript.InterpretedFunction.call(InterpretedFunction.java:109)
    at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:394)
    at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3091)
    at org.mozilla.javascript.InterpretedFunction.call(InterpretedFunction.java:107)
    at io.sightly.js.rhino.JsUtils.callFn(JsUtils.java:37)
    at io.sightly.js.use.UseFunction$2.run(UseFunction.java:98)
    at io.sightly.js.loop.Task.run(Task.java:36)
    at io.sightly.js.loop.EventLoop.run(EventLoop.java:61)
    ... 214 common frames omitted

[smacdonald2008]

ReferenceError: "$" is not defined. 

This suggests that you have not properly setup JQuery libs in a client libs folder.

[Mshaji · Accepted solution]

It seems that jquery is not included in your page, you can look view source and find whether jquery is included or use firebug or chrome dev tools.

Please make sure that you include dependency of jquery in your component. Here is the information you need for jquery integration

http://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html

Apart from this please check the following link from jquery about this type of error

http://jquery-howto.blogspot.com/2013/02/referenceerror-jquery-is-not-defined.html

[Har_Khandelwal]

Hi,

In the firebug console, the jquery.js file is being called. Also when I include the javascript code within the <script> tags of my html file, i am able to access it via $(document).ready, but the problem is that i cannot access the currentPage and other Use API's objects. Currently i have implemented my logic in a JS file and calling it from my html file via data-sly-use. How can I access both the $.ajax and my Use API's objecs.

[Feike_Visser1]

Please be aware the sightly javascript is executed server-side, not client-side.

[Har_Khandelwal]

So is there any way of integrating the two?