1

I am having quite a bit of problem with jQuery as of Summer 16 updates. We have a developer edition and a normal dev sandbox and both behave very differently with the same browser with the same code.

Selecting an object with jQuery and logging it in the console on the dev sandbox gives this :

Dev sandbox jquery output

The exact same output on the Developer Edition goes like this :

Developer edition output

So the first one seems to behave normally, and the code work as expected. I mostly use jQuery for DOM traversal as finding the closest TR, and then searching through classes of children and their siblings is much easier for me in jQuery than any mountain of vanilla JS code would do.

Thing is, the same functions on the Developer edition does nothing. The object I am getting seems to be a JavaScript standard object of some sort with a bunch of accessors that are all undefined. Weirdly enough, there's no error and some function still work. The parent function work fine, and the find function is also fine. But any next, nextUntil or prev function are all broken.

Does anyone know why that is and also if there's any work around? Currently any kind of logic out of native lightning implementation seems to work weirdly (A colleague is even having weird behaviour with simple native JavaScript at this point but not as bad any the integration with jQuery).

1

The objects you're seeing are due to Lightning Locker. Apparently the best compatibility of Locker is with the latest jQuery 2.2.4 so try updating to that.

You're dealing now with a secured DOM. Your components cannot traverse the DOM of components in another namespace. When you query for such components you will simply find nothing at all. When you query for DOM nodes that you do have access to, you do not get "real" DOM nodes but imitations that have most of their properties and methods.

Some JS methods on these DOM nodes are broken right now so you'll have to be more specific in order to make bug reports. In general though, the direction Lightning is going in is that you want to step back and ask "Is there any way I can accomplish this using Lightning native data binding instead of accessing the DOM directly?". (That being said there are some fixes to data binding that need to roll out next week...)

  • Hmm that makes sense. Although in my case there are no data binding going on. Basically the problem comes from a jQuery event Handler which collapse or un-collapse subsequent rows when a chevron icon is clicked. I am only toggling the slds-hide class to hide or show those rows, but the operations such as next and nextUntil return nothing. The same is true while trying to use native JavaScript to achieve the same operations. – P. Lapointe Jun 16 '16 at 19:57
  • Right, that makes sense... for me after having worked in Angular I'm coming around to the sort of data-binding approach where the list is represented by an array of data objects and then things like whether a row should be shown or not, whether the chevron points up or down, etc are handled by binding to properties of those objects. – Charles T Jun 16 '16 at 20:21
1

Proxying of plain old javascript objects is a bit broken currently - the fix for the underlying issue is already ready to go out in the next patch (Summer'16.10) that is scheduled to deploy Tuesday/Wednesday on our normal patch cadence. The issue that is causing a fair amount of weird behavior was the combination of a latent issue with the way these proxies were being constructed (properties were not being handles correctly) combined with work to cache and reuse the same proxy for a given backing object. This exposed the root cause of not having getters and setters generated that would update the actual object. The end result manifested as data binding issues, CSS not being applied if you used syntax like component.find("myDiv").getElement().style.color = "blue", etc. All of these have been fixed by the single change to dynamic proxy creation.

  • Thanks Doug, the fix might solve our issue then, as we have the same problem when we use vanilla JavaScript and it pretty much seems like the accessors for the objects are not working. The only thing that I am wondering is that, in my case, there are no data-binding involved. Its just dom traversal on a jQuery event handler that go find related siblings and toggle classes on them. Could this be affected by the problem you were exposing? – P. Lapointe Jun 16 '16 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.