Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo:

Question

i have an txtBox and its id is : beginDateTxt

but jsf makes it j_idt8:beginDateTxt

in jquery i try to reach it like that

  <script type="text/javascript">
            $(document).ready(function() {
                $(function() {
                    $("#j_idt8:beginDateTxt").mobiscroll().date({
                       theme: 'android-ics light', mode:'scroller', display: 'bottom'
                    });
                });

            });
   </script>

but i get below error:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: beginDateTxt

why?

score 65 · Accepted Answer · edited Feb 19 '15 at 14:00

65

You could try

$(document.getElementById('j_idt8:beginDateTxt')).mobiscroll().date({theme: 'android-ics light', mode:'scroller', display: 'bottom'});

In general jQuery uses something like CSS selectors in its $() function. In a CSS selector the : denotes a pseudo-class. However, in your case the : is just a part of the id.

If you use the generic getElementById(), the argument is not decomposed, but seen as an ID altogether. So by using getElementById() and wrapping the result with $() you can circumvent this "misunderstanding".

In general, however, I think it would be better to change the namespacing scheme in your JSF.

EDIT

The jQuery documentation on selectors states that you should escape special characters by the use of \\:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

This will lead to the answer already given by Daniel, which in my opinion is superior to the answer given above. The explanation, however, remains valid.

$("#j_idt8\\:beginDateTxt").mobiscroll().date({theme: 'android-ics light', mode:'scroller', display: 'bottom'});

edited Feb 19 '15 at 14:00

Mark Ormesher

2,289
3
27
35

answered Apr 18 '13 at 07:50

Sirko

72,589
19
149
183

1

I thought we are using jQuery selector so we don't use getElementById – AaA Oct 09 '13 at 10:21
2

@BobSort The problem here was, that the id included a `:`, which made jQuery think a pseudo class is used and in the result fail. To circumvent I used `getElementById()`, which interprets its argument just as a string. – Sirko Oct 09 '13 at 12:31
it works. however, I think one of the benefits of using jquery is that we don't have to use getelementbyid. instead of building a jquery node out of the return of d.getelem...() , a real solution would be escaping correctly the string that goes in the jquery selector. – Eduard Gamonal Oct 11 '13 at 13:47
I had completely forgotten about escaping the colon (:). I was using the id verbatim from the code and slowly going mad. thanks for the reminder! – Jim Jan 22 '20 at 20:28

Daniel · Answer 2 · 2015-11-24T08:10:36.217

33

If you want to use jQuery id selector you need to escape the : with \ and then to escape the \ (double escape)

Here:

$(function() {
    $("#j_idt8\\:beginDateTxt").mobiscroll().date({
        theme: 'android-ics light',
        mode:'scroller', display: 'bottom'
    });
});

edited Nov 24 '15 at 08:10

answered Apr 18 '13 at 08:18

Daniel

36,833
10
119
200

1

I like this one better. Just answers the question lol. – Andrew Feb 26 '19 at 17:19

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo:

2 Answers2

Linked