Highlighted

JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

Bronze Contributor
Bronze Contributor

I've been using the following JQuery selector to target internal links in a JQuery onHandler extension (1.7 or higher) with success on sites that are running either version 1.10.2 or 1.11.0 of JQuery:

 

[href*="' + ut.domain + '"],a:not([href^="#"],[href^="http"],[href^="tel:"])

 

However, on another site that is running 1.12.4 I get an error:

Uncaught Error: Syntax error, unrecognized expression for that selector.

 

The issue definitely seems to be isolated to the first part of the selector: [href*="' + ut.domain + '"]

Has anyone else experienced issues with this newer version of JQuery and these type of selectors that compare against an object?  Any advice on how to solve?  

6 REPLIES 6
Highlighted

JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

Bronze Contributor
Bronze Contributor
A little further details, I noticed this in the console as well:
'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
This was in reference to something in: utui.tagcompanion.js
Highlighted

JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

Employee Emeritus

Hi @Terry_Howard. Let me see if I can find you some help. Sit tight.

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.
Highlighted

JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

Tealium Expert
Tealium Expert

hi @Terry_Howard, I'm not sure at all about how Tealium's onHandler extension handles the selectors. But since jQuery 2.2.0/1.12.0 jQuery does some extra checks for unquoted variables. Please refer to the following Jquery Migrate Issue:

https://github.com/jquery/jquery-migrate/issues/140

 

I know your selector uses quotes properly ( not sure if the jQuery handler on tealium does some parsing messing up things ). 

Another thing I would try is using window.utag_data["ut.domain"] instead of just ut.domain, just to be sure data is passed propertly from the main variable.

 

Highlighted

JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

Tealium Expert
Tealium Expert

@Terry_Howard I'm been investigating how the extensions works.

 

This is selector you're using:

 

[href*="' + ut.domain + '"],a:not([href^="#"],[href^="http"],[href^="tel:"])

 

Which Tealium transforms to the following piece of code:

 

if (1) {
if (typeof utag.runonce[37] == 'undefined') {
utag.runonce[37] = 1;
jQuery(document.body).on('click', '[href*="" + ut.domain + ""],a:not([href^="#"],[href^="http"],[href^="tel:"])', function(e) {
utag.link({
"event_action": 'click link'
})
})
}

 

As you can see single quotes are converted to double quotes, therefore you can't use variables within your selector. Where you running the same selector previously or using the ut.domain is a new addition?.

 

If you were previusly using single queotes it looks like something was updated on Tealium Side since the last time you used it in other places.

Highlighted

JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

Bronze Contributor
Bronze Contributor

Hi @thyngster. I think you are correct, it is the change in how quotes are being handled in the newer versions of JQuery. My solution was to create a version of my extension for each affected domain that has the domain literally in the selector instead of the variable. Not a particularly scaleable way forward, but it works. I think the Tealium system would have to be updated to recognize the usage of a variable in a selector and appropriately handle the quotes all the way through to the page.

Highlighted

JQuery Selector Referencing an Object Stops Working Under JQuery 1.12.4

Employee Emeritus

@Terry_Howard wrote:

Hi @thyngster. I think you are correct, it is the change in how quotes are being handled in the newer versions of JQuery. My solution was to create a version of my extension for each affected domain that has the domain literally in the selector instead of the variable. Not a particularly scaleable way forward, but it works. I think the Tealium system would have to be updated to recognize the usage of a variable in a selector and appropriately handle the quotes all the way through to the page.


Hi @Terry_Howard. Great point about the scalability. Let me check and see if we already have something in for variable in a selector usage. Hold on. 

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.