Jquery error - Uncaught Error: Syntax error, unrecognized expression

Question

I'm creating a website in Wordpress, and in a Custom Post Type with a little different input interface I thought this logical:

List categories (taxonomies);
List posts (channels) from this categories;
If you click on a post, this post is added to a text field, if click again, it's removed;

The code works fine some time, but magically stops:

load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3 Uncaught Error: Syntax error, unrecognized expression: div# div.channel at Function.fa.error (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at fa.tokenize (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at fa.select (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at Function.fa (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at Function.a.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) at n.fn.init.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at n.fn.init.a.fn.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) at a.fn.init.n.fn.init (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at new a.fn.init (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) at n (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3)

My code:

        <script>
        // Carrega as categorias de canais
        jQuery.get(
            'http://meusite.com/wordpress/wp-json/wp/v2/canais-categorias?per_page=100&orderby=name&order=asc',
            function(data){
                for(var i=0; i < data.length; i++){
                    jQuery('div#channels').append(
                        '<div class="row">'                                                                                     +
                            '<div class="col-12">'                                                                          +
                                '<h3>' + data[i].name + '</h3>'                                                     +
                            '</div>'                                                                                                        +
                        '</div>'                                                                                                            +
                        '<div class="row channel-grid" id="' +  data[i].slug + '">'     +
                        '</div>'
                    );
                }
            }, 'json'
        );

        // Carrega os canais
        jQuery.get(
            'http://meusite.com/wordpress/wp-json/wp/v2/canais?per_page=100&orderby=title&order=asc',
            function(data){
                for(var i=0; i<data.length; i++){
                    jQuery('div#' + data[i].categoria[0]).append(
                        '<div class="col-3" id="' + data[i].slug + '">'         +
                            '<div class="channel">'                                                     +
                                '<img src="' + data[i].channel_image + '">'         +
                                '<p>' + data[i].title.rendered + '</p>'                 +
                            '</div>'                                                                                    +
                        '</div>'
                    );
                }

                // Seleciona os caais ativos
                var channel_grid = jQuery('input#plan_channels_grid').val();
                var channel_grid = channel_grid.substring(0, channel_grid.length-1);
                var channel_grid = channel_grid.split(',');

                for(var i=0; i<channel_grid.length; i++){
                    jQuery('div#' + channel_grid[i] + ' div.channel').addClass('active');
                }

                // Adiciona e remove um canal com um clique
                jQuery('div.channel').click(function(){
                    var id = jQuery(this).parent().attr('id');

                    if(jQuery('div#' + id + ' div.channel').hasClass('active')){
                        jQuery('div#' + id + ' div.channel').removeClass('active');

                        var ch = jQuery('input#plan_channels_grid').val();
                        jQuery('input#plan_channels_grid').val(ch.replace((id + ','), ''));
                    }else{
                        jQuery('div#' + id + ' div.channel').addClass('active');

                        var ch = jQuery('input#plan_channels_grid').val();
                        jQuery('input#plan_channels_grid').val(ch + id + ',');
                    }
                });
            }, 'json'
        );
    </script>

Any idea?

Patrick Evans · Accepted Answer · 2018-09-14 02:21:50Z

2

div# div.channel is an invalid css selector. There is a space after the # which would make an invalid ID selector. So one of your string concatenations is either concatenating a string with a leading space, or you are concatenating a variable that is empty.

For instance with:

jQuery('div#' + id + ' div.channel')

if id is an empty string you will get the string the error mentions. Same with:

jQuery('div#' + channel_grid[i] + ' div.channel')

If channel_grid[i] is empty it will make an invalid css selector. Go back through your code and make sure your code is setup correctly to generate those variables and aren't generating empty strings. Or use error checking before attempting to use them.

answered Sep 14, 2018 at 2:21

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

1 Comment

Vitor Luis Over a year ago

Patrick, your answer give me the solution! My code don't work in new posts, because I don't have a value in the field to make a split and get the "channel_grid". With a simple "if(channel_grid > 0){" I solved the problem! Thank you!

Collectives™ on Stack Overflow

Jquery error - Uncaught Error: Syntax error, unrecognized expression

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related