Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: [duplicate]

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?

Mark Ormesher · Accepted Answer · 2015-02-19 14:00:55Z

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, 2015 at 14:00

Mark Ormesher

2,4473 gold badges30 silver badges36 bronze badges

answered Apr 18, 2013 at 7:50

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AaA Over a year ago

I thought we are using jQuery selector so we don't use getElementById

Sirko Over a year ago

@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.

Eduard Gamonal Over a year ago

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.

Jim Over a year ago

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!

Daniel · Accepted Answer · 2015-11-24 08:10:36Z

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, 2015 at 8:10

answered Apr 18, 2013 at 8:18

Daniel

37.2k10 gold badges123 silver badges208 bronze badges

1 Comment

Andrew Over a year ago

I like this one better. Just answers the question lol.

Collectives™ on Stack Overflow

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: [duplicate]

2 Answers 2

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Linked

Related