Develop Reference

How to popup form after file upload

File upload button on one file and popup form in another file("/uploadFile").
I want to popup form after upload file submit/on "ok" click.
This is my first file index.html where I have list that have upload file button:
<li><a href="/uploadFile"><input type="file" id="hiddenUploadField" style="display: none;" accept=".dxf, .dwg"
class="upload" data-toggle="modal" data-target="#importData">
<label for="hiddenUploadField"><i class="fas fa-folder-open"></i> <span>Import</span></label></a>
</li>
At the end of file I use this code for popup modal:
<div class="modal fade text-center" id="importData" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
The code to trigger the popup is:
$('#hiddenUploadField').change(function (e) {
var node = $('#appBuckets').jstree(true).get_selected(true)[0];
var _this = this;
if (_this.files.length == 0) return;
var file = _this.files[0];
switch (node.type) {
case 'bucket':
var formData = new FormData();
formData.append('fileToUpload', file);
formData.append('bucketKey', node.id);
$.ajax({
url: '/api/forge/oss/objects',
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
$('#appBuckets').jstree(true).refresh_node(node);
_this.value = '';
}
});
break;
}
$('#importData').modal('show').find('.modal-content').load($(this).attr('href'));
});
}
The problem is when I click "ok" on the file window, it does not show up the modal popup box. It just fades the background and does nothing.

Your code to show the modal is need to inside the change function, like this
$('#hiddenUploadField').change(function (e) {
// your code goes here for the modal.
$('#importData').modal('show').find('.modal-content').load($(this).attr('href')); }
});

Modal Popup not loading in partial view when calling from parent view

I am trying to call a modal on a partial view from a view but am not getting ajax success call, but dont know how to do it:
Here is what i have, javascript ajax code on my page:
var TeamDetailPostBackURL = '/BMApproval/GetMeetingApprovalData';
$(function () {
$(document).on('click','.LeadCode', function () {
//$(".LeadCode").click(function () {
debugger;
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
alert("load");
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
contentType: "application/json; charset=utf-8",
data: { "dataValue": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
And parameters I am passing in ajax call
<td>#LPOPoint.LeadCode</td>
Also calling modal popup in the same javascript page which will popup on the partial view.
<div id='myModal' class='modal' style="overflow-y:hidden;">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 20px; margin-bottom:20px;">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div></div>
I searched a lot in various forums but couldn't get any solution.
When am clicking on html link the popup doesn't load in the partial view.
And ("Dynamic content load failed."); is displayed as it doesn't get to success.
Basically I want to view data in modal popup in partial view based on the parameters from parent view. Any help would be appreciated.

At the first sight looks like you need TeamDetailPostBackURL variable to contain a proper URL including scheme, host (and port if needed) like 'http://example.com/BMApproval/GetMeetingApprovalData'
You can specify error parameter in the error callback to see what exactly is wrong
error: function (error) {
console.error(error)
alert("Dynamic content load failed.");
}

How to refresh content of iframe from controller in ASP.NET MVC?

I have a question about combination of asp.net mvc and iframe.
I'm trying to edit retrieved data from db on iframe.
The problem is that when the page firstly loads the parent contents, iframe contents is also loaded and can't be edited later.
public ActionResult StudentDetail(string id)
{
Student student_data = null;
if (id != null)
{
student_data = getId(id);
}
else
{
return null;
}
return PartialView("StudentDetail",student_data);
}
As you can see above code,if any ID is selected by hyperlink of view,
it returns partial view for iframe.When it comes to this page at the first time,
becuase any Id isn't selected,it returns null.
Below code is snippet of the parent view.This calls controller and content is set by null when it comes to loading this page at the first time.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="myFlame" class="embed-responsive-item" src="/Home/StudentDetail" frameborder="0" allowtransparency="false" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
After loading the parent page and iframe page, user push the hyperlink to pop up the iframe to edit data.The snippet of code is below,it calls javascript to send id to controller
<td>#student.id</td>
Code of javascript is below.
<script>
var TeamDetailPostBackURL = '/Home/StudentDetail';
$(function () {
$(".anchorDetail").click(function () {
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myFlame').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
//$("#closebtn").on('click',function(){
// $('#myModal').modal('hide');
$("#closbtn").click(function () {
debugger;
$('#myModal').modal('hide');
});
});
</script>
After pushing a hyperlink,javascript send the data to controller and retrieve data from db and return partialView of StudentDetail.cshtml.but it still shows empty iframe.
How can I refresh the content of iframe?

Call link to modal on successful Ajax call

If I wanted to pop up a particular modal currently I'd add this HTML and click the link...
<a data-deploy-menu="notification-modal-3" href="#">Demo</a>
However I want to remove link and call the modal on a successful ajax call. Somethinkg like the below, but unsure how to do it. Please can you help?
jQuery.ajax({
url: "http://localhost/timesheets/mobile/add-timesheet.php",
type: "POST",
data: form.serialize(),
crossDomain: true,
datatype: "json",
cache: false,
success: function (data) {
var jsArray = JSON.parse(data);
console.log(jsArray);
if ($.trim(jsArray.success) === 'yes') {
$('#notification-modal-3').load;
}
},
error: function (xhr, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
});
The modal html is as follows...
<div id="notification-modal-3" data-menu-size="345" class="menu-wrapper menu-light menu-modal">
<h1 class="center-text">Test</h1>
</div>
Edit : I sort of got this working..
So I added the a href link back in. For example...
<a id="notification-modal-4" data-deploy-menu="notification-modal-3" href="#"></a>
so the link doesnt actually show on the page then in the ajax call I used
$('#notification-modal-4').click();
but would appreciate if there is a better way to do this...

Basically you can do this in you ajax success code:
(hopyfully I did not missunderstand)
success: function (data) {
var jsArray = JSON.parse(data);
console.log(jsArray);
if ($.trim(jsArray.success) === 'yes') {
// fill up the modal with some content if it is dynamicaly
$('#notification-modal-3').html('thank you');
$('#notification-modal-3').show();
// do some cleanup if needed like hide it if needed
setTimeout(function() {
$('#notification-modal-3').html('');
$('#notification-modal-3').hide();
}, 1000);
}
},
With the controlling of the modal within the ajax call, you do not need any (auto-)link-clicking.

Rails: don't refresh page after modal action/submit

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);
return 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 this.\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?

I figured out a simple solution on the drive home. The following line in my Javascript:
window.location = location;
can be changed to:
window.location.reload();