У меня есть приложение rails, которое является todo видом приложения. Так что у него есть проекты, проекты тогда имеют задачи, такие как 1-я задача, вторая задача и 3-я задача, тогда каждая из этих задач имеет подзадачи.ошибка в ajax-рендеринг выпадающего списка bootstrap в rails3
Теперь каждая из этих подзадач имеет связанный с ними связанный с ними ботстрап, а также выпадающий список с ними.
Теперь проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда я создаю подзадачу с использованием ajax-запроса, она создает новую подзадачу без обновления страницы, так что она отлично работает, она даже создает новый модаль, связанный с этим новым subask.So до здесь все хорошо, но новый выпадающий список для этой новой подзадачи не создается.
Я не понимаю, почему это happeing, если новый модальный может быть создан на ajax refresh, y - это новое выпадающее меню, которое не получается рендером, поскольку оба модальных и выпадающего кода находятся в одном и том же частичном.
Вот коды, которые я написал для
Вот задача частичной, в задачах/_task.html.erb
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 tasks" id='tasks_<%=task.id %>'>
<div class="addtaskdiv" id="addtaskdiv_<%=task.id %>">
<p><b>
<%=task.taskname %>
</b>
<span style="float:right;margin-right:10px;" data-toggle="modal" data-target="#myModal"><%=link_to '',edit_task_path(task),class:'fa fa-pencil-square-o' %></span>
</p>
<div class="addtaskmovable">
<% task.subtasks.each do |subtask| %>
<%=render :partial=>subtask%>
<%end%>
</div>//end of addtaskmovable
</div>//end of addtaskdiv
<div class="subtaskform" id="subtask_form_<%=task.id %>" style="width:218px;margin:0 2px 0px 3px;">
<%= form_for [task, task.subtasks.build],:remote => true,:html => {
:id => task.id, :class => 'elm_class'
} do |f| %>
<%= f.text_area :name,rows:'3',cols:'3',:class=>'myarea'%>
<%= f.submit "save",class:'btn btn-mini btn-success col-md-4' %>
<a data-id='<%=task.id %>' href="#"><i class="fa fa-times fa-lg" style="margin:10px auto;"></i></a>
<% end %>
</div>//end of subtaskform
<p class="addcard" id="addcard_<%=task.id%>"><a href="#" data-id='<%= task.id %>' id='add_card_<%= task.id %>'>Add a card...</a></p>
</div>//end of task div
Теперь здесь подзадачи парциальное в подзадач/_subtask.html. Еврорадио
<%=render 'layouts/modal',:subtask=>subtask %>
<div class="dropdown" id="dropdownmenu<%=subtask.id %>">
<a data-id='<%=subtask.id %>' data-target="#" style="float:right;" class="dropdown-toggle" id='dropdownMenu<%=subtask.id %>' data-toggle="dropdown"><i class="fa fa-pencil-square-o" style="margin-right:10px;margin-top:10px;"></i></a>
<p class="subtask" data-toggle="modal" data-target="#myModal_<%=subtask.id %>">
<%=subtask.name %>
</p>
<%=render 'subtasks/dropdown',:subtask=>subtask %>
</div>
И, наконец, вот выпадающий код, который не получает оказанными надлежащим образом
<ul class="dropdown-menu" id="dropdown<%=subtask.id %>" aria-labelledby="dropdownMenu<%=subtask.id %>">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
Примечание. Выпадающий список был правильно отображен на запрос ajax в bootstrap2, но когда я переключился на bootstrap3, он перестал работать.
И, наконец, вот Аякса код create.js.erb
$('#addtaskdiv_'+ <%[email protected] %>).append('<%=j render partial: "subtasks/subtask", object: @subtask %>');
$(":input:not(input[type=submit])").val("");
$('#subtask_form_'+<%[email protected] %>).hide(1000);
И, наконец, вот мой application.html.erb файл, который имеет все JS в нем
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%=yield(:title) %></title>
<link rel="icon" href="/pic2.ico" type="image/x-icon"/>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "jquery.custom-scrollbar", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "modernizr.custom.28468.js" %>
<%= javascript_include_tag "jquery.cslider.js" %>
<%= javascript_include_tag "jquery.custom-scrollbar" %>
<%= javascript_include_tag "jquery.custom-scrollbar.min" %>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag "style", :media => "all" %>
<%= stylesheet_link_tag "style1", :media => "all" %>
<%= stylesheet_link_tag "fontello", :media => "all" %>
<%= csrf_meta_tags %>
<script>
$(document).ready(function() {
$(".myultask").sortable();
$(".myultask").disableSelection();
$(".addtaskmovable").sortable();
$(".addtaskmovable").disableSelection();
$('.dropdown > a').click(function(e){
$('.dropdown-toggle').dropdown();
e.preventDefault();
});
$(".user").customScrollbar({
updateOnWindowResize: true
});
$("#subtask").click(function(){
$('#myModal').modal();
});
$('.nav li').click(function(event){
//remove all pre-existing active classes
$('.active').removeClass('active');
//add the active class to the link we clicked
$(this).addClass('active');
});
$('.addcard > a').click(function(e){
$('#subtask_form_' + $(this).data('id')).show(1000);
e.preventDefault();
});
$('.subtaskform a').click(function(e){
$('#subtask_form_' + $(this).data('id')).hide(1000);
e.preventDefault();
});
$('.addtask > a').click(function(e){
$('.addtaskform').show(1000);
e.preventDefault();
});
$('#close').click(function(e){
$('.addtaskform').hide(1000);
e.preventDefault();
});
$('.addproject > a').click(function(e){
$('.addprojectform').show(1000);
e.preventDefault();
});
$('#close').click(function(e){
$('.addprojectform').hide(1000);
e.preventDefault();
});
$('.mydes > a').click(function(e){
$('#subtaskdesform_' + $(this).data('id')).show(1000);
e.preventDefault();
});
$('.myclose').click(function(e){
$(":input:not(input[type=submit])").val("");
$('#subtaskdesform_'+ $(this).data('id')).hide(1000);
e.preventDefault();
});
$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});
});
</script>
</head>
<body>
<%=render 'layouts/header' %>
<%= yield %>
</body>
</html>
Их майнер добавляет к нему, я думаю, что это своего рода проблема с js, потому что когда я переместил js для выпадающего списка прямо на вершина js внутри тегов