Develop Reference

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.

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");
}
});
});

Using Jquery ajax to call ActionResult method in Controller and return data

I'm trying to understand how the Jquery Ajax methods works. Right now, I have some problems calling the ActionResult method in the controller that will return a PartialView.
Have created an button which I will use to get new data in from the server (Ajax call should run)
Code: (ActionResult in Home controller)
public ActionResult All()
{
List<Student> model = db.Students.ToList();
return PartialView("_Student", model);
}
This method is the one I'm trying to call when I press the button in the main Index view.
Code: (Index view)
<div class="row">
<div class="small-12 column sbw-travel">
<h2>Travel</h2>
<div class="row">
<div class="small-12 columns">
<button id="button1" class="sbw-travel-button">Search</button>
</div>
</div>
<div class="small-12 sbw-travel-box" id="rooms">
</div>
</div>
</div>
When the user hit the button, an Ajax call should run, and the list will appear in the section with id=rooms.
Script: (Ajax code)
$(document).ready(function () {
$('#button1').click(function () {
$.ajax({
type: 'GET',
url: #Url.Action("All", "Home"),
datatype: "html",
success: function () {
$('#rooms').html(???);
}
});
return false;
});
});
Can any of you see if I have forgot something to make this run like I have described?

The result is on the succes event. Try:
$(document).ready(function () {
$('#button1').click(function () {
$.ajax({
type: 'GET',
url: #Url.Action("All", "Home"),
datatype: "html",
success: function (data) {
$('#rooms').html(data);
}
});
return false;
}); });

I would suggest loading firebug when you click the button (enable the console), make sure the requested URI is responding with valid HTML data on the click event.
I also generally find using something like:
$('#button1').on('click', function () { ...
usually yields better results, see here: Difference between .on('click') vs .click()

Div content load using Ajax and MVC 4

I have several buttons which should change content of region on the page. I've read numerous tutorials how can lazy load can be implemented using ajax, but unfortunately with no success. Here is my html:
<div>
<div>
<button id="btn_goals">Goals</button>
<button id="btn_achievements">Achievements</button>
</div>
<div id="region_content"></div>
</div>
and here is my js:
$(document).ready(function () {
$('#btn_goals').on('click', function () {
$.ajax({
url: '#Url.Action("Index", "Goals")',
success: function (data) {
$('#region_content').html(data);
}
});
});
$("#btn_achievements").on("click", function () {
......
});
});
what is the problem?
********** EDIT ************
Well, I changed url in ajax parameters from url: '#Url.Action("Index", "Goals")' to url: '/Goals/Index' and it starts work fine. What is the reason?

Try following the following steps:
Use console.log("Inside Success function"+ data); to test whether the required data is being returned from the controller method.
Use Ctrl+Shift+I in your browser to view the console. If Successful:
Use:
var div = document.getElementById("region_content");
div.innerHTML = div.innerHTML + data;
Make sure your type conversions are done right.
Also specify type: POST in your ajax function.
If you do not see 'Inside Success function' on your console, there might be something wrong with your controller function.