Phoenix link tag generated twice

WFransen

Dear Elixir forum,

I truly hope that I’m not missing something very obvious here, for this would waste some people their time.. But I’m facing the following situation:

Simply trying to generate an arrow up, arrow down, that can be click to order an item higher or lower in a list. This is the following code that I’m trying to achieve this: (using following icons)

<td>
              <%= link(tag(:i, class: "fa fa-angle-up"), to: "/link/moveup", method: :post) %>
              <%= link(tag(:i, class: "fa fa-angle-down"), to: "/link/movedown", method: :post) %>
              <%= link "Delete",
              to: Routes.link_path(@conn, :delete, link),
              method: "delete" %></td>

Which results in the following html code and how it looks like:

When I change the lines of code so that it’s first the Delete link, then an arrow, it doesn’t get generated twice. Am I doing something wrong or could this be a potential bug?

Thank you in advance,

14 comments

/phoenix #phoenix_html #bug

0 1450 14

2019-06-03 15:43:43 UTC

First 10 of 14 Posts

al2o3cr

Can you post the raw HTML that this generates? The DOM inspector can sometimes display odd things as it tries to “fix” broken markup.

Post #1

WFransen

Thank you for your quick answer.

<td>
<a data-csrf="fw0wEg4GNXkbHj9HAFpAKywgABRjJgAAHTjSLWy3ugZvfnscFQgG1w==" data-method="post" data-to="/link/moveup" href="/link/moveup" rel="nofollow"><i class="fa fa-angle-up"></i></a><i class="fa fa-angle-up">              
<a data-csrf="fw0wEg4GNXkbHj9HAFpAKywgABRjJgAAHTjSLWy3ugZvfnscFQgG1w==" data-method="post" data-to="/link/movedown" href="/link/movedown" rel="nofollow"><i class="fa fa-angle-down"></i></a><i class="fa fa-angle-down">
             
<a data-csrf="fw0wEg4GNXkbHj9HAFpAKywgABRjJgAAHTjSLWy3ugZvfnscFQgG1w==" data-method="delete" data-to="/link/1" href="/link/1" rel="nofollow">Delete</a></i></i>
</td>

This should be the relevant part (quickly dumped it all in a td element).

Thanks again in advance!

Post #2

chrismccord

Creator of Phoenix

The link function accepts the string contents as the first arg. I actually wouldn’t have expected the above to work, but I need to check the source. Try this:

<%= link to: "/link/moveup", method: :post do %> 
  <%= tag(:i, class: "fa fa-angle-up") %>
<% end %>

Post #3

WFransen

Thank you for responding.
I’ve tried the following code: (as per your suggestion)

              <%= link to: "/link/moveup", method: :post do %> 
                <%= tag(:i, class: "fa fa-angle-up") %>
              <% end %>
              <%= link to: "/link/movedown", method: :post do %> 
                <%= tag(:i, class: "fa fa-angle-down") %>
              <% end %>

Which resulted in:

With the following raw html:

<td>
<a data-csrf="Qx0cETNnJwsLLCZUB1FnP10YM2cmEAAAtDFPq6kAeUCeaeTw7iT4tA==" data-method="post" data-to="/link/moveup" href="/link/moveup" rel="nofollow">                <i class="fa fa-angle-up">
</i></a><i class="fa fa-angle-up">              
<a data-csrf="Qx0cETNnJwsLLCZUB1FnP10YM2cmEAAAtDFPq6kAeUCeaeTw7iT4tA==" data-method="post" data-to="/link/movedown" href="/link/movedown" rel="nofollow"> 
<i class="fa fa-angle-down">              </i></a><i class="fa fa-angle-down">
              
<a data-csrf="Qx0cETNnJwsLLCZUB1FnP10YM2cmEAAAtDFPq6kAeUCeaeTw7iT4tA==" data-method="delete" data-to="/link/22" href="/link/22" rel="nofollow">Delete</a></i></i></td>

The problem remains I’m afraid. (right now solved it with images, that works. Not sure if patch is the correct action for this though…)

<%= img_tag("images/icons8-sort-down-24.png") |> link(to: Routes.link_path(@conn, :movedown, link), method: :patch)%>

Post #4

NobbZ

How did you check the generated HTML? Did you use curl or a similar tool or did you use some view of your browser, the later might still be subject of DOM manipulation via scripts.

Post #5

WFransen

Checked it with firefox, I’ll check it with curl as well. Editing this post soon!

<td>
<a data-csrf="KBhHPXYcNQc7DhhZbi8caUoQJXkhNgAAJ/uIOIP7Qf+0Azu/rjnATg==" data-method="post" data-to="/link/moveup" href="/link/moveup" rel="nofollow">                <i class="fa fa-angle-up"></a>              
<a data-csrf="KBhHPXYcNQc7DhhZbi8caUoQJXkhNgAAJ/uIOIP7Qf+0Azu/rjnATg==" data-method="post" data-to="/link/movedown" href="/link/movedown" rel="nofollow"> <i class="fa fa-angle-down"></a>
              
<a data-csrf="KBhHPXYcNQc7DhhZbi8caUoQJXkhNgAAJ/uIOIP7Qf+0Azu/rjnATg==" data-method="delete" data-to="/link/28" href="/link/28" rel="nofollow">Delete</a></td>

It is as you suggested @NobbZ! Though do you have any idea as to how this can help with finding a solution?

Post #6

NobbZ

Check the output without having loaded any scripts, then add java script module by module, then you’ll see which one breaks your site, then debug that module.

Post #7

WFransen

Just using a default generated Phoenix project. The only js files that are getting compiled from webpack are socket.js (default) and app.js (default) which imports phoenix_html, does this mean that the “bug” is most likely in the phoenix_html package?

Post #8