We Keep Coding

Uncaught Error: Syntax error, unrecognized expression: with double equal in selector ==

I have office 365 id on message divs. such as
<div id="AQMkADAwATM0MDAAMS0wYWIxLTU1ADI4LTAwAi0wMAoALgAAA1IXzflHRQlLlY3LIdjzH3MBADg_s4AQY3NEqDFmBjvfdZIAAAIBDwAAAA==">Message Subject</div>
But when I call it in functions. It gives jquery-2.1.1.js:2 Uncaught Error: Syntax error, unrecognized expression:
This works on devtools console.
$('#AQMkADFGFGDFGDFGwYWIxLTU1ADI4LTAwAi0wMAoALgAAA1IXzflHRQlLlY3LIdjzH3MBADg_s4AQY3NEqDFmBjvfdZIAAAIBDwAAAA')
This does not work on devtools console. I want to fix this because office 365 messages ids usually have double equal in the end ==.
$('#AQMkADFGFGDFGDFGwYWIxLTU1ADI4LTAwAi0wMAoALgAAA1IXzflHRQlLlY3LIdjzH3MBADg_s4AQY3NEqDFmBjvfdZIAAAIBDwAAAA==')

If the structure is not known to change, save yourself a headache and select by structure instead of ID.
If you must select by ID, either use an attribute selector:
$('[id="AQMkADFGFGDFGDFGwYWIxLTU1ADI4LTAwAi0wMAoALgAAA1IXzflHRQlLlY3LIdjzH3MBADg_s4AQY3NEqDFmBjvfdZIAAAIBDwAAAA=="]')
or escape the equals signs:
$('#AQMkADFGFGDFGDFGwYWIxLTU1ADI4LTAwAi0wMAoALgAAA1IXzflHRQlLlY3LIdjzH3MBADg_s4AQY3NEqDFmBjvfdZIAAAIBDwAAAA\\=\\=')

The root cause is jQuery uses CSS syntax for selecting elements.
You can use one regex expression to escape with double backslashes for an ID that has characters used in CSS notation.
console.log($("#"+"AQMkADAwATM0MDAAMS0wYWIxLTU1ADI4LTAwAi0wMAoALgAAA1IXzflHRQlLlY3LIdjzH3MBADg_s4AQY3NEqDFmBjvfdZIAAAIBDwAAAA==".replace( /(:|\.|\[|\]|,|=|#)/g, "\\$1" )).text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AQMkADAwATM0MDAAMS0wYWIxLTU1ADI4LTAwAi0wMAoALgAAA1IXzflHRQlLlY3LIdjzH3MBADg_s4AQY3NEqDFmBjvfdZIAAAIBDwAAAA==">Message Subject</div>

Unrecognised expression with error for ids starting with an integer

I'm trying to grab an element from a page which has an id starting with an integer.
$('#3|assets_main|ast_module|start-iso-date')
I get the following error
Uncaught Error: Syntax error, unrecognized expression: |assets_main|ast_module|start-iso-date
I am using jQuery 1.7.1, I understand that the id in general is poorly named but is there any reason why jQuery will has issues with ids that start with integers?

In HTML5 the id can start with a numerical value, so your id is valid.
The issue is the pipe (|) characters in the selector; you need to escape them using \\:
$('#3\\|assets_main\\|ast_module\\|start-iso-date')
Working example

JQuery Unrecognized expression contains selector

I'm copying some code over from a project that used jQuery v1.11.2 to a new project which uses v3.1.0 and the following line of code doesn't work. I get an unrecognized expression error in the console:
$('#createEditTabs a[data-target=#tabEditConfig]').tab('show');
This line worked fine in the old project but fails to work in the new updated one. Not sure exactly why or if v3.1.0 has some differences when using contains selectors.

Wrap attribute value with quotes to avoid the issue with # in the beginning.
$('#createEditTabs a[data-target="#tabEditConfig"]').tab('show');
// -^-- --^-
The attribute value should be a valid identifier or quoted string. In your code, it's not a valid identifier(contains #) so use quoted string.

Jquery Syntax error, unrecognized expression on id selector

Im using angular and jquery to scroll to an element base on his location hash string.
In my situation i need to include in the string the '?' char, but its seems like jquery has problem with this.
This is the link:
when Are Lottery Results Updated OnThe Site
This is the jquery code:
var elem = '#' + $location.hash();
console.log($(elem));
The error:
Error: Syntax error, unrecognized expression: #whenAreLotteryResultsUpdatedOnTheSite?
Any solution?

Yes, jQuery will refuse to select elements with special characters in CSS selector. You just need to escape them with \\:
var elem = $location.hash().replace(/\?/, '\\\\?');
This will properly escape ? character.
Also note that location.hash will already include leading # so you don't need to prepend one more.

Uncaught Error: Syntax error, unrecognized expression. Escaping characters?

I'm trying to show a div element with the id "online-payments" if a specific radio box is selected during the checkout process.
So far I have the following:
<div id="online-payments" style="display: none;">
Test
</div>
And for the javascript:
jQuery(document).ready(function(){
jQuery("radio[#name='payment\[method\]']").click(function(){
if (jQuery("radio[#name='payment\[method\]']:checked").val() == 'checkmo')
jQuery("#online-payments").show();
});
});
This is a Magento store so im using the no-conflict mode because of the prototype libraries.
The problem comes down to the radio's name. It's payment[method] by default on Magento (I've tried to change it, but it looks like it would give me more work than I had anticipated).
So it really comes down to escaping those brackets [ ], which I thought I did, but even then it's throwing me this error:
Uncaught Error: Syntax error, unrecognized expression: radio[#name='payment[method]']
What's wrong here?

Several problems there:
You're using an attribute selector, but with an invalid name (#name). Attribute names cannot start with #.
There's also no need for the backslashes as long as you use quotes (which you are, single quotes are fine). (And the ones you have aren't ending up as part of the selector, to put a backslash in a selector when the selector is in a JavaScript string, you have to escape the backslash as \\.)
radio isn't a tag name.
Perhaps you wanted:
jQuery("input[type=radio][name='payment[method]']")
jQuery offers an extension which is :radio, but using it isn't recommended, for the reasons discussed on its API page (basically, jQuery can't hand it off to the browser's native querySelector / querySelectorAll).