Inserting unique id into Foundation button id

Question

I am using a toggle drop down pane in Foundation. Here is my code...

<td><button class="button" type="button" data-toggle="<%= request.id %>">View</button>
        <div class="dropdown-pane" id="<%= request.id %>" data-dropdown>
        <%= request.agenda %><br/>
        <%= link_to request.event, request.event, :target => "_blank" %></div></td>

The button doesn't do anything and I get the error...

foundation.util.triggers.self-d40e6f5….js?b…:16 Uncaught TypeError: el.data(...).split is not a function.

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

The "id" needs to be a valid html ID, which should include characters and not just numbers. (see What are valid values for the id attribute in HTML?). A typical id coming from rails is simply a number... prefixing your id with a descriptive string should resolve this. E.g.

<td><button class="button" type="button" data-toggle="request-<%= request.id %>">View</button>
    <div class="dropdown-pane" id="request-<%= request.id %>" data-dropdown>
    <%= request.agenda %><br/>
    <%= link_to request.event, request.event, :target => "_blank" %></div></td>

edited May 23 '17 at 11:52

Community

1
1

answered Nov 29 '16 at 23:42

kball

979
4
7

Thanks for clarifying. I didn't know an ID couldn't just be a number. – Mark Locklear Nov 30 '16 at 14:17

score 0 · Answer 2 · answered Nov 29 '16 at 20:02

Not sure why, but this is what worked for me:

<td><button class="button" type="button" data-toggle=<%="dropdown-pane#{request.id}"%>>View</button>
            <div class="dropdown-pane" id=<%="dropdown-pane#{request.id}"%> data-dropdown>
            <%= request.agenda %><br/>
            <%= link_to request.event, request.event, :target => "_blank" %></div></td>

Seemed to want the #{} ruby syntax for the data-toggle and id attributes.

Inserting unique id into Foundation button id

2 Answers2