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).
Related
I have html div with one attribute.
div exp_attribute="{"prop_val_name":1}">mydiv</div>
I tried to trigger click on it via jQuery like
$('div[exp_attribute={"prop_val_name":1}]').click(); // not working
$('div[exp_attribute=\\{"prop_val_name":1\\}]').click(); // not working with escaping special chars
$('div[exp_attribute=\\{\\"prop_val_name\\":1\\}]').click(); // not working with escaping more special chars
but keep getting error
Error: Syntax error, unrecognized expression: div[exp_attribute=\{\"prop_val_name\":1\}]
so any idea how to handle the issue?
Better to escape everything
$('div[exp_attribute=\\{\\"prop_val_name\\"\\:1\\}]').click();
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 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
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.
I found a bug in a program I had written, but the behavior of the error is inexplicable to me:
If I have:
<input type="text" name="cust_id" value="666" />
<input type="text" name="phone[]" value="666" />
And then use this selector:
var test = $("input[name=phone[]]:eq(0)");
test.css("color", "red");
I see this:
What I'm surprised by is the fact that the eq(0) selects the first input even though I explicitly tell it to find only ones with name=phone[]
Here is a fiddle: https://jsfiddle.net/1xdnv1t8/
Is this expected behavior? Does the eq selector ignore attribute selectors?
You need to quote name attribute:
var test = $("input[name='phone[]']:eq(0)");
because phone[] is not valid name without quotes. So jQuery parser (or DOM) simply ignores everything invalid and treats selector as if it was simply input[name='phone']:eq(0). Also worth noting, that looks like this behaviour is fixed in more up to date versions of jQuery. You use pretty old 1.6.4 in your demo, but if you check it with 1.8.x and above it will work properly throwing error.
For example, if you try
try {
document.querySelector("input[name=phone[]]")
}
catch(e) {
alert(e.message)
}
it will even throw an error
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'input[name=phone[]]' is not a valid selector.
But jQuery is more forgiving and it just selects whatever it can.
Use
var test = $("input[name='phone[]']:eq(0)");
JSFiddle
In the selector especification states
jQuery( "[attribute='value']" )
attribute: An attribute name.
value: An attribute value. Can be either an unquoted single word or a quoted string.
You are missing quotes around the attribute value. Try this -
var test = $('input[name="phone[]"]:eq(0)');
The square brackets in your selector confuse the attribute selection part as it is not quoted. Notice if you change the name of the second input to phone then it works as expected:
$("input[name=phone]:eq(0)")
Alternatively, wrap the attribute selector in quotes:
$("input[name='phone']:eq(0)")
While quoting the name attribute's value isn't strictly required (jQuery for the most part will work fine without them), as you noticed you can run into unusual situations when there are non-alphanumeric characters involved and jQuery interprets them as CSS notation.
The solution is to always properly escape any of these characters (:, ., [, ], etc.) as jQuery recommends, with two backslashes:
In order to tell jQuery to treat these characters literally rather
than as CSS notation, they must be "escaped" by placing two
backslashes in front of them.
So according to the jQuery documentation, you should be using var test = $("input[name='phone\\[\\]']:eq(0)"); as the selector (although simply properly quoting the string in your case will also work fine).
jsFiddle example
Ref: How do I select an element by an ID that has characters used in CSS notation?