Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 1
Level 2
urs_h_
Level 2

Likes

5 likes

Total Posts

42 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 1
Level 2
urs_h_
Level 2

Likes

5 likes

Total Posts

42 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile
urs_h_
Level 2

13-04-2016

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

Accepted Solutions (0)

Answers (5)

Answers (5)

Avatar

Avatar
Validate 1
Level 2
urs_h_
Level 2

Likes

5 likes

Total Posts

42 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 1
Level 2
urs_h_
Level 2

Likes

5 likes

Total Posts

42 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile
urs_h_
Level 2

14-04-2016

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

Avatar

Avatar
Boost 3
Level 2
varundua
Level 2

Likes

4 likes

Total Posts

32 posts

Correct Reply

10 solutions
Top badges earned
Boost 3
Boost 1
Affirm 5
Affirm 3
Affirm 10
View profile

Avatar
Boost 3
Level 2
varundua
Level 2

Likes

4 likes

Total Posts

32 posts

Correct Reply

10 solutions
Top badges earned
Boost 3
Boost 1
Affirm 5
Affirm 3
Affirm 10
View profile
varundua
Level 2

14-04-2016

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

Avatar

Avatar
Validate 1
Level 2
urs_h_
Level 2

Likes

5 likes

Total Posts

42 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 1
Level 2
urs_h_
Level 2

Likes

5 likes

Total Posts

42 posts

Correct Reply

6 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile
urs_h_
Level 2

13-04-2016

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

Avatar

Avatar
Boost 1
Level 2
rishim22446870
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

12 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 10
Affirm 1
View profile

Avatar
Boost 1
Level 2
rishim22446870
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

12 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 10
Affirm 1
View profile
rishim22446870
Level 2

13-04-2016

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

Avatar

Avatar
Boost 1
Level 2
Sakshi1
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 1
View profile

Avatar
Boost 1
Level 2
Sakshi1
Level 2

Likes

2 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 1
View profile
Sakshi1
Level 2

13-04-2016

document.ready is first.

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