Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

javascript

jsf

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?

like image 417
user2294016 Avatar asked Apr 18 '13 07:04

user2294016


2 Answers

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'});
like image 178
Sirko Avatar answered Nov 01 '22 23:11

Sirko


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'
    });
});
like image 35
Daniel Avatar answered Nov 02 '22 00:11

Daniel