I have a modal which opens on top of another screen. The base screen has a filter method that uses AJAX to filter the results on that page.
After, I filter the results on the screen, I can open the modal and perform an action on the form in the modal. However, I don't want to perform a redirect/refresh.
How do I do this while still performing the submission?
My modal link is like:
<%= link_to this_path(user_id: user.id), class:"modal-link", data: {"modal-url" => this_path(user_id: user.id)} do %><span><i class="fa fa-plus"></i><% end %>
The modal is standard enough:
<div class="modal form-modal">
<div class="modal-container">
<div class="modal-dialog modal-dialog-wide">
<button class="close">×</button>
<div class="modal-content">
<div class="modal-header">
<h2 class="hdg-b">Edit This</h2>
</div>
<div class="modal-body">
<div id="error_explanation"></div>
<%= render 'form', form_path: action_path, form_method: :put, create: false %>
</div>
</div>
</div>
</div>
</div>
The AJAX is too:
MyProject.onPageLoad(function() {
var form = $('.edit_site_scope'),
onSubmit = function(event) { //callback handler for form submit
event.preventDefault();
var form = $(this),
url = form.attr("action"), //get form action:
type = form.attr("method"),
data = form.serialize();
var location = window.location.href;
var posting = $.ajax({
type: type,
url: url,
data: data,
dayaType: "json",
success:function(data, textStatus, jqXHR)
{
$('.modal').remove();
window.location = location;
$('#contact-tab-submit').show();
},
error: function(jqXHR, textStatus, errorThrown)
{
$('#error_explanation').html('');
errors = jqXHR.responseJSON;
$.each( errors, function( key, value ) {
$('#error_explanation').append('<div class="alert alert-dismissable" id="alert-message"><i class="fa fa-exclamation-triangle"></i>' + value + '<div class="alert-close">Close</div></div>');
});
$('#contact-tab-submit').show();
}
});
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
retu false; // prevent default when submit button clicked
};
if (form.size() !== 0) {
form.submit(onSubmit);
}
});
And here is my controller action on the form submit:
def action_to_be_performed
@this_thing = ThisThing.where(id: params[:id]).first
@this_thing.update(this_things_params)
flash[:success] = "Successfully performed the action."
render json: @this_thing
rescue => error
Rails.logger.error "Exception caught updating user study site scope.nCause: #{error}n" + error.backtrace.join("n")
render json: @this_thing.errors.full_messages, status: :bad_request
end
I really struggle with modals still and I guess with AJAX. How do I perform my action, close the modal and keep the current page open?
