What is first? 'Document ready' or guideBridge.connect() ?

[#1]

Hi 

I've implemented a custom AEM forms component. The implementation uses guideBridge and jQuery. I've built an own clientlib for jQuery that is loaded by the page (not the component) template. Now I wonder, when during page load in the browser both frameworks are ready to be used?

When I use the idiom:

window.addEventListener("bridgeInitializeStart", function(evnt) { var gb = evnt.detail.guideBridge; gb.connect(function (){ // intialization of my custom component starts here }) })

is it safe to use jQuery (or any other clientlib) within the gb.connect's callback function? Is the jQuery clientlib loaded and the document ready at the time the callback function is called?

Thank you.

Regards,
Urs

[#2]

Hi Varun 

thanks a lot for your hint. What I am basically doing is (simplified for the example): 

... extract of the widget.jsp of my custom component .... <%@include file="/libs/fd/af/components/guidesglobal.jsp" %> <%-- todo: In case of repeatable panels, please change this logic at view layer --%> <div class="<%= GuideConstants.GUIDE_FIELD_WIDGET%> ${guideField.multiLine ? " multiline" : ""}" style="${guide:encodeForHtmlAttr(guideField.styles,xssAPI)}"> <input type="text" id="${guideid}${'_widget'}" name="${guide:encodeForHtmlAttr(guideField.name,xssAPI)}" value="${guide:encodeForHtmlAttr(guideField.value,xssAPI)}" style="${guide:encodeForHtmlAttr(guideField.widgetInlineStyles,xssAPI)}" placeholder="${guide:encodeForHtmlAttr(guideField.placeholderText,xssAPI)}"/> <c:choose> <c:when test="${!isEditMode}"> <script type="text/javascript"> guideBridge.connect(function (){ var guideFieldName = '${properties["name"]}'; jQuery.ajax({ type: 'GET', url: ... }).done(function (data) { var somExpr = guidelib.runtime[guideFieldName].somExpression; guideBridge.setProperty([somExpr], "value", [data]); }); }) </script> </c:when> </c:choose> </div>

Regards,
Urs

[#3]

Hi Urs,

> do an ajax call during initialization of the component (using jquery) ?
You can initialize your component using a custom widget/appearance as mentioned in [1].

> use the result of the ajax call to do DOM manipulations (using jquery) and update the value of guide fields
You can achieve that by prepopulating the form fields by passing a dataRef parameter[2]

Manipulating component DOM in connect can lead to some errors later on,  because the Adaptive Form might have attached some listeners on the DOM elements and if you remove them, the runtime may cry.

[1] https://helpx.adobe.com/content/help/en/aem-forms/6-1/custom-appearance-widget-adaptive-form.html
[2] https://helpx.adobe.com/content/help/en/aem-forms/6-1/prepopulate-adaptive-form-fields.html

Regards
Varun Dua

[#4]

my use case is:

1) do an ajax call during initialization of the component (using jquery)

2) use the result of the ajax call to do DOM manipulations (using jquery) and update the value of guide fields or call validate (using guideBridge)

Regards,
Urs

[#5]

Hi,

It is always recommended to use guideBridge API's once guideBridge is initialized(inside connect function). What is your use-case of using jQuery inside guideBridge.connect ?

Ideally, DOM operations through jQuery should be done inside document ready irrespective of guideBridge being connected or not.

Thanks,

Rishi

[#6]

document.ready is first.

Yes you can use the loaded clientlibraries in guideBridge.connect callback function.