Selecting element with a space separeted words

Question

I am adding elements in my view dynamically, like this:

@foreach ($categoryViews as $key => $value)
    <div class="large-2 columns text-center">
        <div id='{{ $key }}' style="height: 101px; width: 102px; margin: 0 auto"></div>
    </div>
@endforeach

But one of my keys is a string that is space separated, it looks like this Product test

I know ids must not be separated, but I am trying to find a way to select somehow those elements, beacause I will be getting them from my DB, so instead of going through changes of making slugs for them, I was wondering how would I achieve that with jQuery, and I thought it was possible to do it since there was already a topic about it on stack overflow. In my script I am trying to initiate charts for each element, by going through an the same array. I am using $('[id=' + key + ']') as a selector for space separated words by following this example, like this:

for (var key in icoop.viewsByCategory) {
    $('[id=' + key + ']').highcharts({
        // my code...
    }

In my console I get an error:

jquery.js:1468Uncaught Error: Syntax error, unrecognized expression: [id=Product test]

This isn't valid ID attribute. You would have better to use instead `data-id` — A. Wolff, May 13 '16 at 09:27
`id` attributes cannot have spaces in them. You need to remove the space from the `key` before you set it as the `id` — Rory McCrossan, May 13 '16 at 09:28
Agree with above comments, However if you still want to go with use `$('[id="' + key + '"]')` — Satpal, May 13 '16 at 09:45

score 1 · Accepted Answer · answered May 13 '16 at 09:46

1

Identifier can't contain space, However still you need to use it then, the Attribute Equals Selector [name=”value”] can be used.

$('[id="' + key + '"]').highcharts()

answered May 13 '16 at 09:46

Satpal

132,252
13
159
168

Ali Mamedov · Answer 2 · 2016-05-13T09:43:29.837

0

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

You cannot use ID with space, but you can store your data with spaces as attribute and find It with jQuery.

Possible solution:

@foreach ($categoryViews as $key => $value)
    <div class="large-2 columns text-center">
        <div data-name='{{ $key }}' style="height: 101px; width: 102px; margin: 0 auto"></div>
    </div>
@endforeach

JavaScript code:

for (var key in icoop.viewsByCategory) {

    $('div[data-name=' + key + ']')[0].highcharts({

        // your code code...
    }
}

Resume:

<div data-name='some text'></div>

$("div[data-name='some text']")[0];

edited May 13 '16 at 09:43

answered May 13 '16 at 09:28

Ali Mamedov

5,116
3
33
47

I know ids must not be separated, but I am trying to find a way to select somehow thoes elements, beacause I will be getting them from my DB, so instead of going through changes of making slugs for them, I was wondering how would I achieve that with jQuery, and I thought it was possible to do it since there was already a topic about it on stack overflow – Ludwig May 13 '16 at 09:33
You cannot name your element with incorrect ID. It is impossible. You can use another alternative ways. I will update my answer with possible solution. – Ali Mamedov May 13 '16 at 09:35

score 0 · Answer 3 · answered May 13 '16 at 09:30

0

Ids cannot contain spaces or other blank characters (\t, \r, \n...). They just cannot. Doing this :

<span id='my id'></span>

Will assign two different Ids to span.

answered May 13 '16 at 09:30

Rosh Donniet

418
2
10

Selecting element with a space separeted words

3 Answers3