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
Related
<h3 class="Sans-17px-black-85%-semibold">Director of Entrepreneurship Programs</h3>
This is the Linkedin html code and I'm trying to select, using ...
<i>let x = document.querySelectorAll (".Sans-17px-black-85%-semibold")</i>,
but I always get an error like
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': >'.Sans-17px-black-85%-semibold' is not a valid selector.
However, I am able to select other elements on the page, but not the CV part.
Can someone explain me why this happens and how to make it work?
Thanks in advance.
Identifiers may not contain unescaped per cent characters. You need to escape it.
document.querySelectorAll(".Sans-17px-black-85\\%-semibold")
Note that the per cent sign needs escaping for the selector syntax and then the escape character needs escaping for the JS string literal syntax.
Alternatively, you could avoid using selector syntax:
document.getElementsByClassName("Sans-17px-black-85%-semibold")
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>
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.
im trying to get the id of an element that will be partially dynamic every time, separated by a colon. here is an example of what i mean:
<input type="text" id="j_id235:keyValue" />
the part after the colon is always the same, i need to somehow search by that only.
i've tried this:
console.log(document.querySelector('[id^=:keyValue]').id)
but am getting this error:
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document':
'[id^=:keyValue]' is not a valid selector.
: is a special character in selectors. If you want to match an attribute value that contains special characters, you have to quote the value.
Also note that ^= is the prefix selector. You probably want the suffix selector:
[id$=":keyValue"]
If you know the element type, it would probably make sense to use that as well:
input[id$=":keyValue"]
More information can be found in the CSS3 specification.
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).