i want to be to display child records when i click a button . The data is displayed as a table.
I have created a partial view that will display the records.
I have created a controller action method to return the partial view.
I have also added javascript code on the main page/view to call and load the dialog .
Here is the code for the main page/view
@model IEnumerable<LearningApp.ViewModel.Requistion>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@{
ViewBag.Title = "Index";
}
</head>
<body>
<h4>Requistion List</h4>
<hr />
<table class ="table table-bordered"cellpadding="0" cellspacing="0" id="RequestGrid">
<tr>
<th>Request #</th>
<th>Date Made</th>
<th>Employee Name</th>
<th>Purpose</th>
<th>Directorate</th>
<th>Station</th>
<th></th>
</tr>
@foreach (var r in Model)
{
<tr>
<td>@r.RequestID</td>
<td>@r.RequestDate</td>
<td>@r.EmployeeName</td>
<td>@r.Purpose</td>
<td>@r.Directorate</td>
<td>@r.Station</td>
<td> <button type="button"class="ids" value="View Details" data-id="@r.RequestID"> View Details</button></td>
</tr>
}
</table>
<div id="dialog" title="View Requistion Details" style="overflow: hidden;">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
$('.ids').click(function () {
var requestid = $(this).data('id');
//alert("You clicked me...again" + requestid)
//var productId = $(this).data('id');
//alert(requestid)
$.ajax({
type: "POST",
url: "/tblRequistions/GetRequistionDetail",
data: '{RequestID: "' + requestid + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
Here is the controller method to return partial view.
[HttpPost]
public ActionResult GetRequistionDetail(int RequestID)
{
List<RequistionDetails> listofdetails = new List<RequistionDetails>();
listofdetails = r.getAllRequistionsDetails(RequestID);
return PartialView("_details",listofdetails);
}
If remove the portion of code below from the main view, and i run the page and i click on the button (view details) the ajax call to the controller is made and the correct parameter is passed.
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
If i leave it, nothing happens(ajax call not made).
I have tried to change autoOpen: True to see whether the dialog can open when the view loads, it does not load.
So i suspect the problem to be with the dialog.
Any reason why the dialog code is not working.?
Ronald
Take a look at this code:
$(function() {
function getDataById(u, n, tObj) {
if (n == undefined || isNaN(n)) {
return false;
}
var results = false;
console.log("AJAX, making request:", u, "ID:", n);
$.ajax({
type: "POST",
url: u,
data: {
RequestID: n
},
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(r) {
results = r;
},
error: function(x, s, e) {
console.log("AJAX", s, e, x);
}
});
if (tObj != undefined) {
tObj.html(results);
}
return results;
}
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
$('.ids').click(function() {
var rHtml = getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'));
if (rHtml) {
$("#dialog").html(rHtml).dialog("open");
} else {
// Proof of Concept / Example Data
$("#dialog").html("**SAMPLE**<br />ID: 1, Date: 12/12/12, Name: Homer Simpson, Request: Donut, Director: Mr. Burns, Location: Plant").dialog("open");
}
});
});<h4>Requistion List</h4>
<hr />
<table class="table table-bordered" cellpadding="0" cellspacing="0" id="RequestGrid">
<tr>
<th>Request #</th>
<th>Date Made</th>
<th>Employee Name</th>
<th>Purpose</th>
<th>Directorate</th>
<th>Station</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td>12/12/12</td>
<td>Homer Simpson</td>
<td>Donut</td>
<td>Mr. Burns</td>
<td>Plant</td>
<td> <button type="button" class="ids" value="View Details" data-id="1"> View Details</button></td>
</tr>
</table>
<div id="dialog" title="View Requistion Details" style="overflow: hidden;">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />I cannot test with AJAX. So I included Sample Data for the dialog as a proof of concept, yet the script does try to connect to AJAX and shows the error to console.
It's written to be used in a few ways. You can also do this:
getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'), $("#dialog"));
$("#dialog").dialog("open");
I don't advise this method. If the AJAX call is slow or details don't return, the dialog could open with no data.