Topic: Modal displays for a second then disappearsl
I am using modals in MVC and have set up an fa icon to call them. They seem to call just fine, however the modal displays for a second, then disappears. I am using a layout page that renders another page. AS suggested in the forums, I've moved the modal html into the layout page, just below the body tag, but the behavior is exactly the same. I can see in the dev tools that the modal is just below the body tag and I can see the modal, but just for a second.
Thanks for your assistance.
cshtml file is:
@model LegalHoldViewModels.LegalHoldHomeModel
@{
ViewBag.Title = "Legal Hold Dashboard";
}
<script src="~/jsgrid/jsgrid.min.js"></script>
<link href="~/jsgrid/jsgrid.min.css" rel="stylesheet" />
<link href="~/jsgrid/jsgrid-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<br />
<br />
<div class="container-fluid">
<div class="row" id="home">
<div class="col-md-12">
<!-- -----Card 1 ----- -->
<div class="card Wow fadeInRight" style="align-content:center">
<div class="card-header accent-3 white-text level2">
Legal Hold - Home
</div>
<div class="card-block">
<table>
<tr class="row">
<td>
<div class="colspan=2">
@Html.LabelFor(model => model.selectedMatterType, "Select Matter Number Type ")
</div>
</td>
<td colspan="2">
<div>
@Html.DropDownListFor(model => model.selectedMatterType, new SelectList(Model.MatterNumTypes), new { @class = "customtext", @style = "float:left" })
</div>
</td>
<td colspan="2">
<div>
<input type="button" id="getMattersButton" name="getMattersButton" class="btn btn-success" value="Find New Matters" />
</div>
</td>
</tr>
@using (Html.BeginForm("GetHoldDetails", "Home", FormMethod.Get))
{
<tr class="row">
<td>
<div class="colspan=2">
@Html.LabelFor(model => model.HoldID, "View or Update Hold")
</div>
</td>
<td colspan="2">
<div>
@Html.DropDownListFor(model => model.HoldID, new SelectList(Model.HoldList, "HoldID", "HoldName"), new { @class = "customtext", @style = "float:left" })
</div>
</td>
<td colspan="2">
<div>
<input type="submit" name="ViewUpdateHoldButton" class="btn btn-success" value="View/Update Hold" />
</div>
</td>
</tr>
}
@using (Html.BeginForm("RemoveHold", "Home", FormMethod.Post))
{
<tr class="row">
<td>
<div class="colspan=2">
@Html.LabelFor(model => model.HoldID, "Remove Hold")
</div>
</td>
<td colspan="2">
<div>
@Html.DropDownListFor(model => model.HoldID, new SelectList(Model.HoldList, "HoldID", "HoldName"), new { @class = "customtext", @style = "float:left" })
</div>
</td>
<td colspan="2">
<div>
<input type="submit" name="RemoveHoldButton" class="btn btn-success" value="Remove Hold" />
</div>
</td>
</tr>
}
@using (Html.BeginForm("ViewCustodian", "Home", FormMethod.Get))
{
<tr class="row">
<td>
<div class="colspan=2">
@Html.LabelFor(model => model.CustodianID, "View Custodian")
</div>
</td>
<td colspan="2">
<div>
@Html.DropDownListFor(model => model.CustodianID, new SelectList(Model.CustodianList, "CustodianID", "CustodianEmpNo"), new { @class = "customtext", @style = "float:left" })
</div>
</td>
<td colspan="2">
<div>
<input type="submit" name="ViewCustodian" class="btn btn-success" value="View Custodian" />
</div>
</td>
</tr>
}
@using (Html.BeginForm("RunReport", "Home", FormMethod.Get))
{
<tr class="row">
<td>
<div class="colspan=2">
@Html.LabelFor(model => model.selectedMatterType, "Select Report")
</div>
</td>
<td colspan="2">
<div>
@Html.DropDownListFor(model => model.selectedReport, new SelectList(Model.ReportNames), new { @class = "customtext", @style = "float:left" })
</div>
</td>
<td colspan="2">
<div>
<input type="button" name="RunReportButton" class="btn btn-success" value="Run Report" />
</div>
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
<br/>
@using (Html.BeginForm("SaveHold", "Home", FormMethod.Post))
{
<div id="addHold" style="display: none">
<br />
</div>
<div id="newMattersFound">
<br />
</div>
}
<script>
$(document).ready(function () {
$("#getMattersButton").on("click", function () {
$("#newMattersFound").show();
$.ajax({
type: "Get",
url: "/Home/GetNewMatters/",
data: {
selectedMatterType: $("#selectedMatterType").val()
},
success: function (data) {
//alert('ok');
var newMatters = data.result;
LoadNewMattersGrid(newMatters);
},
error: function (data) {
alert("error");
}
});
function LoadNewMattersGrid(newMatters) {
// set custom datefield for datepicker
// Borrowed from PatReview by Jigyasa Singh
var MyDateField = function (config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
css: "date-field", // redefine general property 'css'
align: "center", // redefine general property 'align'
myCustomProperty: "foo", // custom property
itemTemplate: function (value) {
var dt;
if (value == null || value == "undefined") {
return "";
//dt = new Date(value);//.toDateString(); Commented this out becuase it's after the return statment
}
else {
value = new Date(parseInt(value.substr(6)));
dt = new Date(value);//.toDateString();
}
var yr = dt.getFullYear();
//getMonth starts with Jan as month '0' - adding 1 to month for correct display
var month = dt.getMonth() + 1;
month = month < 10 ? "0" + month : month;
//var month = dt.getMonth() < 10 ? '0' + dt.getMonth() : dt.getMonth();
var day = dt.getDate() < 10 ? "0" + dt.getDate() : dt.getDate();
newDate = month + "/" + day + "/" + yr;
//return dt;
return newDate;
}
});
jsGrid.fields.date = MyDateField;
//load the grid with the matters found
$("#newMattersFound").jsGrid({
width: "90%",
headercss: "dashboardHeader",
sorting: true,
filtering: true,
editing: true,
visible: true,
paging: true,
pageIndex: 1,
pageSize: 10,
data: newMatters,
rowClick: function (args) {
// saves the selected row in externalvariable
//then the values from the model for that row will be used
//in the ajax call
selectedItem = args.item;
},
fields: [
{ name: "HoldMatterNum", title: "Matter Number", type: "text", width: 55, editing: false },
{ name: "HoldName", title: "Hold Name", type: "text", width: 120, editing: false },
{ name: "Notes", title: "Notes", type: "text", width: 190, editing: false },
{ name: "DateHoldPlaced", title: "Date Hold Placed", type: "date", width: 45, visible: true },
{
name: "AddHold", title: "Add Hold", align: "center",
itemTemplate: function (value, item) {
// return $("<button id='addHold' class='btn btn-success btn-sm'>").text("Add Hold")
return $("<input type='submit' name='addHold' class='btn btn-success btn-sm' value='Add Hold' />")
.on("click", function () {
//alert("button clicked");
//pull this out into a separate function
var selectedMatterNum = selectedItem.HoldMatterNum;
var HoldClientNum = selectedItem.HoldClientNum;
var HoldName = selectedItem.HoldName;
var HoldMatterNum = selectedItem.HoldMatterNum;
var DateHoldPlacedEpoch = selectedItem.DateHoldPlaced;
var Notes = selectedItem.Notes;
//massage date from epoch to ISO format
if (DateHoldPlacedEpoch !== null) {
var DateHoldPlacedParsed = new Date(parseInt(DateHoldPlacedEpoch.substr(6)));
var DateHoldPlaced = DateHoldPlacedParsed.toLocaleString();
}
$.ajax({
type: "Post",
url: "/Home/SaveHold/",
data: {
selectedMatterNumber: selectedMatterNum,
HoldClientNum: HoldClientNum,
HoldName: HoldName,
HoldMatterNum: HoldMatterNum,
DateHoldPlaced: DateHoldPlaced,
Notes: Notes
}, //the data should be the model information for the selectedMatterNum from the jsGrid
success: function (data) {
//alert("Saved hold ok");
window.location.href = "/HoldCustodians/Index";
},
error: function (data) {
alert("error on save");
}
});
return false;
});
}
}
],
controller: {
data: newMatters
} // end of controller
}); // end of jsgrid
} //end of LoadNewMatters?
});
});
</script>
AND layout page cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Legal Hold Dashboard</title>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<!--<script src="~/jsgrid/jsgrid.min.js"></script>-->
<script type = 'text/javascript' >
var appInsights=window.appInsights||function(config)
{
function r(config){ t[config] = function(){ var i = arguments; t.queue.push(function(){ t[config].apply(t, i)})} }
var t = { config:config},u=document,e=window,o='script',s=u.createElement(o),i,f;for(s.src=config.url||'//az416426.vo.msecnd.net/scripts/a/ai.0.js',u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=['Event','Exception','Metric','PageView','Trace','Ajax'];i.length;)r('track'+i.pop());return r('setAuthenticatedUserContext'),r('clearAuthenticatedUserContext'),config.disableExceptionTracking||(i='onerror',r('_'+i),f=e[i],e[i]=function(config, r, u, e, o) { var s = f && f(config, r, u, e, o); return s !== !0 && t['_' + i](config, r, u, e, o),s}),t
}({
instrumentationKey:'509762d2-6b16-4e9c-8431-7b897976ca9f'
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
</head>
<body>
<!-- Modal for More Information on Revisions-->
<div class="modal fade cart-modal" id="revisionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Modal Content-->
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3> More Revision Information for this Hold</h3>
</div> <!--end of modal header-->
<!--Modal Body-->
<div class="modal-body">
<p>We like to receive a messages.</p>
<br>
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form22" class="form-control">
<label for="form42">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form32" class="form-control">
<label for="form34">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-tag prefix"></i>
<input type="text" id="form32" class="form-control">
<label for="form34">Subject</label>
</div>
</div> <!--end of modal body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> <!-- end of modal footer-->
</div> <!-- end of modal content-->
</div> <!-- end of modal dialog-->
</div><!--end of modal-->
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<table>
<tr>
<td>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Legal Hold Dashboard", "Index", "Home", new { area = "" }, new { @class = "navbar-brand dashboard" })
</td>
<td>
![Perkins Coie Logo]()
</td>
<td class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@*@Html.Partial("_LoginPartial")*@
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<div class="nav navbar-inverse navbar-fixed-bottom">
<h4 class="text-center">© @DateTime.Now.Year - LLC - Legal Holds</h4>
</div>
</footer>
</div>
</body>
</html>
Add comment
We don't support MVC in MDB
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags
Related topics