I have a rails4 app. Since I'm not good at js yet I TURNED OFF TURBOLINKS. I have read a bunch of articles, still I couldn't figure it out how to organize my javascript files. At the moment I have a problem with firing js code after AJAX append.
I have a list of tasks (index page). If I load the page then I can click on any of the tasks (to update them) and the bootstrap modal shows up + the following code is working, so the time is formatted and datetimepicker is available.
If I create a new task with AJAX (will be appended by create.js.erb) and then click on that certain task the modal shows up but the following code doesn't get fired. (If I click on the rest of the tasks, those are working as they are there since page load.)
How can I make this working? I want to have the code to be available on page load and page change as well. Since this is a user triggered event hopefully doesn't get fired twice. Can sby recommend me a clear good explanation/article how I should organize my js files? As I mentioned above I read a bunch of them but I just got even more confused.
js file
var ready = function() {
$('.updatetask').on('shown.bs.modal', function (e) {
alert('haha');
var modalId = $(this).attr('id');
var deadlineField = $("#" + modalId).find($('.edit-task-deadline'));
var deadlineValue = $(deadlineField).attr('value');
var momentDeadline = moment(deadlineValue).format('MM/DD/YYYY hh:mm A');
$(deadlineField).val(momentDeadline);
});
$(function () {
$('.new-task-deadline').datetimepicker({
sideBySide: true,
format: 'MM/DD/YYYY hh:mm A',
stepping: 15,
widgetPositioning: { vertical: 'bottom' }
});
});
};
$(document).ready(ready);
$(document).on("page:load", ready);
_task.html.erb partial
........
<%= link_to edit_user_task_path(id: task.id), remote: true, type: "button" do %>
<i class="fa fa-pencil" data-toggle="modal" data-target="#updatetask_<%= task.id %>"></i>
<% end %>
<!--Modal for updating task -->
<%= form_for([@user, task], method: :patch, remote: true) do |f| %>
<div class="modal fade updatetask" id="updatetask_<%= task.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="text-align:left">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Task</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" style="display:none">
<ul class="errors" style="display:none">
<%= render 'layouts/error_messages', object: f.object %>
</ul>
</div>
<div class="field form-group">
<% if current_user.id == task.assigner.id %>
<p><strong>Executor: <%= task.executor.profile.first_name %> <%= task.executor.profile.last_name %>, <%= task.executor.profile.company %></strong></p>
<% else %>
<p><strong>Assigner: <%= task.assigner.profile.first_name %> <%= task.assigner.profile.last_name %>, <%= task.assigner.profile.company %></strong></p>
<% end %>
</div>
<div class="field form-group">
<%= f.label :content %>
<%= f.text_area :content, class: "form-control edit-content" %>
</div>
<div class="field form-group">
<%= f.label :deadline %>
<%= f.text_field :deadline, class: "form-control edit-task-deadline" %>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="updatetaskclose">Close</button>
<%= f.submit "Update Task", class: 'btn btn-primary edit-task-submit', "data-sid" => current_user.id, "data-rip" => :executor_id %>
</div>
</div>
</div>
</div>
<% end %>
<!--Modal end for update task -->
</td>
create.js.erb
$("ul.errors").html("");
<% if @task.errors.any? %>
//modal error messages get inserted via AJAX
$('.alert-danger').show();
$('ul.errors').show();
<% @task.errors.full_messages.each do |message| %>
$("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
<% end %>
<% else %>
//hiding modal on creation and setting values to zero for optional new modal
$('ul.errors').hide();
$('.alert-danger').hide();
$("#newtask").modal('hide');
$(".task_name_company").val('');
$(".contentarea").val('');
$(".new-task-deadline").val('');
//different div class for different partials + table rows get inserted into view via AJAX
$(".newtaskinsert").prepend('<%= j render @task %>');
$(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
$("#task_<%= @task.id %>").hide().fadeIn(1000);
<% end %>
EXTRA CODE:
Here is the sample code I'm using for new task (it's easier since there is just one modal with no ID.)
I'd like to have it for updates as well both on document ready and AJAX added code. Submit must be called on the modal id not the form id.
working code for new task:
$('.new-task-submit').on('click', function (e){
e.preventDefault();
var localMoment = moment($('.new-task-deadline').val());
$('.new-task-deadline').val(localMoment.toISOString());
$('#newtask').submit();
});
my attempt for update task:
edit_task_submit($(document.body));
.....
......
function edit_task_submit($container) {
$container.find('.edit-task-submit').on('click', function (e){
e.preventDefault();
var deadlineField = $(this).find($('.edit-task-deadline'));
var localMoment = moment((deadlineField).val());
deadlineField.val(localMoment.toISOString());
alert(deadlineField.val());
$(this).submit();
});
}
update.js.erb
<% else %>
$('ul.errors').hide();
$('.alert-danger').hide();
$('#updatetask_<%= @task.id %>').modal('hide');
$task = $('<%= j render @task %>');
edit_task_submit($task);
$('#task_<%= @task.id %>').fadeOut(400, function(){
$(this).remove();
//$(".newtaskinsert").prepend('<%= j render @task %>');
$(".newtaskinsert").prepend('$task');
$(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
});
<% end %>
