Develop Reference

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?

After show Modal Window jQuery validation plugin doesn't work

I have a problem with jQuery Validation Plugin.
I used ASP.NET MVC with Entity Framework. The project has a lot of libraries and it's hard to understand the problem and find answer.
I have a form on which the section with fields. I used validation plugin for validate client-side fields.
The section is collapsible and can to be open and closed. Inside section I have button for open modal window. Inside window I can to search data used Ajax. User can to add information manually, can add information used Ajax and fields can be empty.
The first task is to add validation for hidden fields.
I added setDefault for validator inside $(document).ready:
jQuery.validator.defaults.ignore = "";
When I added setting ignore for validator, everything work fine with hidden fields and open fields but after showing modal window validator plugin doesn't work. In FireBug I take error: TypeError: validator is undefined (twice).
I open and close the modal window (without Ajax search) and I take this error and validator doesn't work.
This is modal window code:
#using (modal.BeginBody()){
<div class="row">
<div class="col-lg-offset-3 col-lg-6" id="search-entry-form">
#using (var form = Html.Bootstrap().Begin(new Form().HtmlAttributes(new { onsubmit = "return false" })))
{
#form.FormGroup().TextBoxFor(model => model.EANCode).Label();
#form.FormGroup().TextBoxFor(model => model.Name).Label();
#form.FormGroup().TextBoxFor(model => model.InternationalName).Label();
#Html.Bootstrap().Div(Html.Bootstrap().SubmitButton().Text("Wyszukaj").Id("search-specific").Style(ButtonStyle.Success).
ButtonBlock().PrependIcon("glyphicon glyphicon-search")).Class("col-lg-5 col-lg-offset-7");
}
</div>
</div>
<div class="col-lg-12 top30" id="result-table"></div>}#using (modal.BeginFooter()){#Html.Bootstrap().Button().Text("Zamknij").Data(new { dismiss = "modal" }).Style(ButtonStyle.Primary)}
I this file I added Bundels with Ajax code:
#Scripts.Render("~/bundles/specificNutSearch")
This is Ajax code:
$(document).ready(function () {
function pagination() {
$('#result-table').each(Utils.Pagination);
}
function getData(id) {
$.ajax({
url: "GetSpecific",
dataType: "json",
method: "POST",
cache: false,
data: {
id: id
},
}).success(function (result) {
if (result === null) return;
for (var propName in result) {
$(".panel [Name$='." + propName + "']").val(result[propName]);
}
clear();
});
}
function clear() {
$("#result-table").html("");
$(".modal input").val("");
$(".pager").remove();
}
function search() {
var form = $("#search-entry-form :input").serialize();
$.ajax({
url: $('#search-entry-form form').attr('action'),
dataType: "html",
method: "POST",
cache: false,
data: form
}).success(function (result) {
$("#result-table").html(result);
$(".select-specific").on("click", function () { getData($(this).data("specific")) });
pagination();
});
}
$("#search-specific").on("click", search);});
This is the field code which need validate:
Html.Bootstrap().Div(
Html.Bootstrap().Label("").LabelText("4.").Class("pull-left"),
Html.Bootstrap().FormGroup().TextBoxFor(model => model.EAN).Label()).Class("col-lg-6")
In the chhtml view I added modal window on the bottom file:
<div class="modal fade" id="specificNutritionalPurposeSearch" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
It is ViewModel field:
[Display(Name = "Kod EAN")]
[RegularExpression("[0-9]{13}",ErrorMessage = "Kod EAN powinien zawierać 13 znaków")]
public string EAN { get; set; }
Also found a very strange thing:
When I Comment out the all specificNutSearch (#Scripts.Render("~/bundles/specificNutSearch")) code, the plugin does not work.But when I comment out #Scripts.Render("~/bundles/specificNutSearch" line, plugin works.
What could be the problem? Maybe that's a problem of incompatibility of versions jQuery and Validator Plugin?
EDIT:
This is button code for open model window:
#Html.Bootstrap().Button().Text("Wyszukaj środek spożywczy").TriggerModal("specificNutritionalPurposeSearch").HtmlAttributes(new { href = Url.Action("SearchSpecificNutritionalPurpose") }).Style(ButtonStyle.Success).ButtonBlock().PrependIcon("glyphicon glyphicon-search")
This is ActionResult in Controller:
[HttpGet]
public ActionResult SearchSpecificNutritionalPurpose()
{
var model = new SpecificNutritionalPurposeSearchViewModel();
return PartialView("Modals/_SpecificNutritionalPurposeDictionarySearch", model);
}
In action model empty because modal window has button for searching data.
This is ActionResult for search button in modal window for searching data:
[HttpPost]
public virtual ActionResult SearchSpecificNutritionalPurpose(SpecificNutritionalPurposeSearchViewModel searchParameters)
{
var searchResult = _dictionaryRepository.FindSpecificNutritionalPurpose(searchParameters.EANCode, searchParameters.Name, searchParameters.InternationalName).Take(100).ToList();
return PartialView("Modals/_SpecificNutritionalPurposeSearchResult", searchResult);
}
Method FindSpecificNutritionalPurpose take data from dataBase (EF)

I think that when the specyficNutSearch script alters the DOM the validation handlers are getting removed.
My solution is to change clear method so it will refresh validation handlers:
function clear() {
$("#result-table").html("");
$(".modal input").val("");
$(".pager").remove();
//add this
var $form = $("#search-entry-form form");
$form.removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($form);
}

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();

How to show Ajax response as modal popup

I have a link on clicking it is sending ajax request and getting response successfully which is html file and I am appending to a div, but I need to show that div as modal popup and I tried something below.
in html file
<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>
<div id="login_for_review" data-toggle="modal" data-target="#reviewLoginModal"></div>
in js file
$(document).on('click', '.review_ratings_login', function () {
var $data = $('#review_product_id span').text();
var url = '/mycompany/login/'+$data;
$.ajax({
type: 'GET',
url: url,
success: function (output) {
$('#login_for_review').html(output).modal('show');// I tried to show this response as modal popup
},
error: function(output){
alert("fail");
}
});
});
output file
<div class="centerForm modal fade" role="dialog" style="margin-left: 35%;" id="reviewLoginModal">
<div class="modal-dialog modal-sm" >
<div class="modal-content">
// here I have login form
</div>
</div>
but I am not getting this html output as modal pup instead I am getting black screen can anyone help me how to do this?

In Bootsrap modal popup, You can use plain way to show modal which don't need pre-defined modal div container . see at modal
For E.g
$.ajax({
url: "url",
type: 'POST',
dataType: "html",
data:{id:params},
success: function(data, status, xhr) {
if(data==""){
window.location.href="/";
}
else{
BootstrapDialog.show({
title: "Modal Tital",
message: function(dialogRef){
$mydata = $($.parseHTML(data));
return $mydata;
},
onshow: function(dialog){
// and css change if need, eg.
dialog.$modalHeader.css("float","none");
},
onshown:function(dialog)
{
// event after shown
},
onhide:function(dailog)
{
// event on hide
}
});
}
},
statusCode: {
401: function () {
alert("Your session has been expired");
}
}
});

I solved this problem by creating modal and by removing data-toggle and data-target and just appending response to that modal div
Code For modal div
<div id="login_for_review" class="modal hide" role="dialog">
</div>
Code For hyperlink
<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>
Code For ajax call
$(document).on('click', '.review_ratings_login', function () {
var $data = $('#review_product_id span').text();
var url = '/mycompany/login/'+$data;
$.ajax({
type: 'GET',
url: url,
success: function (output) {
$('#login_for_review').html(output).modal('show');//now its working
},
error: function(output){
alert("fail");
}
});
});