Предоставления частичной

Из Using Ajax and jQuery in Rails 5 Apps учебника (проект можно найти на bparanj/ckl) и учитывая следующий вид и частичный:Предоставления частичной

приложения/просмотры/задачи/index.html.erb:

<h1>Task Dog</h1> 

<%= link_to "New Task", new_task_path, id: "new_link" %> 

<h2>Incomplete Tasks</h2> 
<div class="tasks" id="incomplete_tasks"> 
    <%= render @incomplete_tasks %> 
</div> 

<h2>Complete Tasks</h2> 
<div class="tasks" id="complete_tasks"> 
    <%= render @complete_tasks %> 
</div>

приложение/просмотров/задачи/_task.html.erb:

<%= form_for task do |f| %> 
    <%= f.check_box :complete %> 
    <%= f.submit "Update" %> 
    <%= f.label :complete, task.name %> 
    <%= link_to "(remove)", task, method: :delete, data: {confirm: "Are you sure?"} %> 
<% end %>

проблема щелчку на любом элементе выбирает только первый элемент (как показано ниже), который заставляет меня думать, что парциальное это время rendere d неправильно.

Просматривая путеводитель по рельсам о rendering collection Мне не удалось найти ответ.

Почему не работает линия <%= f.label :complete, task.name %>?

О нажать на baz:

Нажатие на baz ожидающей baz, чтобы провериться, но вместо этого foo получает проверяется (примечание: фактическая Флажок работает, но не текст рядом с флажком):

Edit:

Примечание Я на коммит перед автором добавляет Аякса:

git checkout 1bb43bd

После пакетирования и запуска сервера:

curl http://localhost:3000/tasks | pbcopy

дает следующий HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Ckl</title> 
    <meta name="csrf-param" content="authenticity_token" /> 
<meta name="csrf-token" content="xlNcxfUn9NoUFZGrmeRGaK9uNhz01F43vs0ATt9qb+XIk414hTj37YZxDo1mAm3VOT7otj/qMgB+FLVaNsn8Aw==" /> 

    <link rel="stylesheet" media="all" href="/assets/layout.self-cc3852a9caa9db7dd4f2a4f654027564a1cb5bd14f24754194e6fd3129377e24.css?body=1" data-turbolinks-track="reload" /> 
<link rel="stylesheet" media="all" href="/assets/tasks.self-d679d83f2b24213289ec1a5948d0d54ec9798f954c5a996908ed19a7a108c6bf.css?body=1" data-turbolinks-track="reload" /> 
<link rel="stylesheet" media="all" href="/assets/application.self-af04b226fd7202dfc532ce7aedb95a0128277937e90d3b3a3d35e1cce9e16886.css?body=1" data-turbolinks-track="reload" /> 
    <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/action_cable.self-1641ec3e8ea24ed63601e86efcca7f9266e09f390e82199d56aa7e4bd50e1aa9.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/tasks.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/application.self-b89234cf2659d7fedea75bca0b8d231ad7dfc2f3f57fcbaf5f44ed9dc384137b.js?body=1" data-turbolinks-track="reload"></script> 
    </head> 

    <body> 
    <div id="container"> 
     <h1>Task Dog</h1> 

<a id="new_link" href="/tasks/new">New Task</a> 

<h2>Incomplete Tasks</h2> 
<div class="tasks" id="incomplete_tasks"> 
    <form class="edit_task" id="edit_task_4" action="/tasks/4" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="+1mGLeoE51+7p+uDVQmI2QCxwvbmuNRw4lnMEJbB25vekwOBavFs/Efo4X3AD5FMTE2EwJym4o462aUQjzda2w==" /> 
    <input name="task[complete]" type="hidden" value="0" /><input type="checkbox" value="1" name="task[complete]" id="task_complete" /> 
    <input type="submit" name="commit" value="Update" data-disable-with="Update" /> 
    <label for="task_complete">foo</label> 
    <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/tasks/4">(remove)</a> 
</form> 
<form class="edit_task" id="edit_task_5" action="/tasks/5" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="dnc364MuSvkRuVLLRBnEG6cfoABSeoui7Iq729wmWQRgAxizDoT2oetX5WDSoITSQIs6Bi4GoGrkEqJicU6lhg==" /> 
    <input name="task[complete]" type="hidden" value="0" /><input type="checkbox" value="1" name="task[complete]" id="task_complete" /> 
    <input type="submit" name="commit" value="Update" data-disable-with="Update" /> 
    <label for="task_complete">bar</label> 
    <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/tasks/5">(remove)</a> 
</form> 
<form class="edit_task" id="edit_task_6" action="/tasks/6" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="HW9YKsH9ETOugVJT0IkttgUwdjlUNL/MpXSjWagYJLG5fmjjZZWqInSEuQE2yhNmAOZkIFPeyd2leT3nia0g8g==" /> 
    <input name="task[complete]" type="hidden" value="0" /><input type="checkbox" value="1" name="task[complete]" id="task_complete" /> 
    <input type="submit" name="commit" value="Update" data-disable-with="Update" /> 
    <label for="task_complete">baz</label> 
    <a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/tasks/6">(remove)</a> 
</form> 

</div> 

<h2>Comlpete Tasks</h2> 
<div class="tasks" id="complete_tasks"> 

</div> 

    </div> 
    </body> 
</html>

источник

2017-02-13 mbigras

У вас есть код на GitHub или аналогичной платформе? Я хотел бы проверить это. –

[bparanj/ckl] (https://github.com/bparanj/ckl) – mbigras

Можете ли вы рассказать о сыром html, который создается этим набором задач? Это поможет нам рассказать, что происходит. –

Ok, поэтому, глядя на raw html, я замечаю, что каждый флажок имеет тот же самый html-идентификатор:

id="task_complete"

Вот где проблема связана с ...

Я не знаю, почему ваш браузер реагирует на что, проверяя только первый флажок с этим идентификатором, но данное требование в HTML, что id должен быть уникальным на всей странице html (и это поведение не гарантируется, если вы этого не сделаете).

Итак ... теперь мы знаем, в чем проблема ... теперь вам просто нужно выяснить, как это исправить. ;)

Вы можете проверить эту теорию вручную передавая уникальный идентификатор для каждого чекбокса например, что-то вроде (обратите внимание, не ошибка проверенная):

<%= f.check_box :complete, :id => "task_complete_#{task.id}" %>

источник

2017-02-13 02:33:52

Итак, вы говорите, что поведение нажатия было всего лишь непреднамеренным побочным эффектом, и метка задачи никогда не предназначалась для клики? – mbigras

Task-label может быть правдоподобным для кликабельности ... но если это так, он испытывает такую же проблему ... когда вы нажмете его ... браузер предположит, что существует элемент один-один-единственный с id 'task_complete 'и будет просматривать страницу для первого экземпляра этого идентификатора ..., который является первым в списке, и это тот, который получит' checked'. Поэтому, чтобы заставить ваш код работать, вам нужно убедиться, что идентификаторы уникальны, а метки соответствуют идентификаторам –

ответ

Смежные вопросы