Jquery Modal Popup not displayed as popup second time
Hi,
Hello to everyone,
This is my first post and i would like help in sorting out my issue. I tried searching for my issue in google but did not found the solution.
My issue is that i am creating an application in MVC for which i am using JQuery to display popup and after closing the popup i am refreshing the webgrid using ajax which iw working fine( since i didn't wanted to fully load the page so i used ajax and used @Html.Partial() to load view) but when i click the create new department for second time the view is not display in popup but in full page
Index.cshtml contains the grid and jquery function to open the dialog
below is my Index.cshtml
@model IEnumerable<ERP.Models.tbl_Department_Master>
@{
ViewBag.Title = "Department Master";
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
@*<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />*@
<div id="divPV">
</div>
<p>
@Html.ActionLink("Create New Department", "Create", null, new { id = "lnkCreate", @class = "imageAction" })
</p>
<div id="wgrid">
<p>
@Html.ActionLink("Create New Department", "Create", null, new { id = "lnkCreate", @class = "imageAction" })
</p>
@{
WebGrid grid = new WebGrid(rowsPerPage: 5, ajaxUpdateContainerId: "wgrid");
grid.Bind(Model, rowCount: ViewBag.TotalRows, autoSortAndPage: false);
@grid.GetHtml(
tableStyle: "grid",
fillEmptyRows: false,
headerStyle: "gvHeading",
alternatingRowStyle: "gvAlternateRow",
rowStyle: "gvRow",
footerStyle: "gvFooter",
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column("Dept_Id",header: "Dept_Id"),
grid.Column("Dept_Code",header: "Department Code"),
grid.Column("Dept_Name",header: "Department Name"),
grid.Column("tbl_Company_Master.CM_NAME",header: "Company Name"),
grid.Column("tbl_Branch_Master.Branch_Name",header: "Branch Name"),
grid.Column("", header: "Action ", canSort:false,
format: @<text>
@Html.ActionLink("Edit", "Edit", null, new { Id= item.Dept_Id}, new {id = "lnkEdit", @class="editbutton" })
@Html.ActionLink("Delete", "Delete", null, new { Id= item.Dept_Id}, new {id = "lnkDelete", @class="deletebutton" })
</text>
)
});
}
</div>
<script>
$(document).ready(function () {
//pageRefresh();
var url = "";
$("#dialog-edit").dialog({
title: 'Create Product',
autoOpen: false,
resizable: false,
top: 100,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").show();
$("#dialog-edit").load(url);
},
close: function (dialog) {
//dialogBox.empty().dialog('destroy');
$("#dialog-edit").empty().dialog('destroy');
pageRefresh();
//window.location.reload();
//pageRefresh();
// updateWithNewData();
// $(this).dialog("close");
//window.location.reload();
}
});
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
window.location.href = url;
},
"Cancel": function () {
//$(this).dialog("close");
window.location.reload();
}
}
});
$("#lnkCreate").click(function () {
//$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$(".ui-dialog-title").html("Create New Department");
$("#dialog-edit").dialog('open');
return false;
});
//$("#lnkCreate").live("click", function (e) {
// //e.preventDefault(); //use this or return false
// url = $(this).attr('href');
// $(".ui-dialog-title").html("Create New Department");
// $("#dialog-edit").dialog('open');
// return false;
//});
$("#lnkEdit").live("click", function (e) {
e.preventDefault(); //use this or return false
url = $(this).attr('href');
$(".ui-dialog-title").html("Update Department");
$("#dialog-edit").dialog('open');
return false;
});
$("#lnkDelete").live("click", function (e) {
// e.preventDefault(); use this or return false
url = $(this).attr('href');
$(".ui-dialog-title").html("Delete Department");
$("#dialog-confirm").dialog('open');
return false;
});
$("#btncancel").live("click", function (e) {
//event.preventDefault();
$("#dialog-edit").dialog("close");
//return false;
});
});
var updateWithNewData = function () {
$.ajax({
url: '@Url.Action("_departmentPartial", "Department")',
success: function (data) {
$("#divPV").append($("<div></div>").html(data));
}
});
}
</script>
<script type="text/javascript">
function pageRefresh() {
$.ajax({
url: 'Department/_departmentPartial',
contentType: 'application/html; charset=utf-8',
type: 'GET',
async: true,
success: function (result) {
$('#divPV').html(result);
}
});
}
</script>
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure to delete?
</p>
</div>
<div id="dialog-edit" style="display: none">
</div>
and my _MasterLayout.cshtml is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/Site.css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/bootstrap/css", "~/Content/css")
@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval", "~/bundles/modernizr", "~/bundles/bootstrap")
<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")"
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/DatePickerReady.js")"
type="text/javascript"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>Software</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Product", "Index", "Products")</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)
<div id="footer">
</div>
</div>
</div>
</body>
</html>
And my Create.cshtml is
@model AccountingERP.Models.tbl_Department_Master
@{
ViewBag.Title = "Create";
Layout = "";
}
When i click on Create new Department, the create.cshtml is loaded in popup, but when i close the popup
and click again on Create new department the create.cshtml is not display in modal popup.
Please help.
Frank
Hello to everyone,
This is my first post and i would like help in sorting out my issue. I tried searching for my issue in google but did not found the solution.
My issue is that i am creating an application in MVC for which i am using JQuery to display popup and after closing the popup i am refreshing the webgrid using ajax which iw working fine( since i didn't wanted to fully load the page so i used ajax and used @Html.Partial() to load view) but when i click the create new department for second time the view is not display in popup but in full page
Index.cshtml contains the grid and jquery function to open the dialog
below is my Index.cshtml
@model IEnumerable<ERP.Models.tbl_Department_Master>
@{
ViewBag.Title = "Department Master";
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
@*<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />*@
<div id="divPV">
</div>
<p>
@Html.ActionLink("Create New Department", "Create", null, new { id = "lnkCreate", @class = "imageAction" })
</p>
<div id="wgrid">
<p>
@Html.ActionLink("Create New Department", "Create", null, new { id = "lnkCreate", @class = "imageAction" })
</p>
@{
WebGrid grid = new WebGrid(rowsPerPage: 5, ajaxUpdateContainerId: "wgrid");
grid.Bind(Model, rowCount: ViewBag.TotalRows, autoSortAndPage: false);
@grid.GetHtml(
tableStyle: "grid",
fillEmptyRows: false,
headerStyle: "gvHeading",
alternatingRowStyle: "gvAlternateRow",
rowStyle: "gvRow",
footerStyle: "gvFooter",
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column("Dept_Id",header: "Dept_Id"),
grid.Column("Dept_Code",header: "Department Code"),
grid.Column("Dept_Name",header: "Department Name"),
grid.Column("tbl_Company_Master.CM_NAME",header: "Company Name"),
grid.Column("tbl_Branch_Master.Branch_Name",header: "Branch Name"),
grid.Column("", header: "Action ", canSort:false,
format: @<text>
@Html.ActionLink("Edit", "Edit", null, new { Id= item.Dept_Id}, new {id = "lnkEdit", @class="editbutton" })
@Html.ActionLink("Delete", "Delete", null, new { Id= item.Dept_Id}, new {id = "lnkDelete", @class="deletebutton" })
</text>
)
});
}
</div>
<script>
$(document).ready(function () {
//pageRefresh();
var url = "";
$("#dialog-edit").dialog({
title: 'Create Product',
autoOpen: false,
resizable: false,
top: 100,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").show();
$("#dialog-edit").load(url);
},
close: function (dialog) {
//dialogBox.empty().dialog('destroy');
$("#dialog-edit").empty().dialog('destroy');
pageRefresh();
//window.location.reload();
//pageRefresh();
// updateWithNewData();
// $(this).dialog("close");
//window.location.reload();
}
});
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
window.location.href = url;
},
"Cancel": function () {
//$(this).dialog("close");
window.location.reload();
}
}
});
$("#lnkCreate").click(function () {
//$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$(".ui-dialog-title").html("Create New Department");
$("#dialog-edit").dialog('open');
return false;
});
//$("#lnkCreate").live("click", function (e) {
// //e.preventDefault(); //use this or return false
// url = $(this).attr('href');
// $(".ui-dialog-title").html("Create New Department");
// $("#dialog-edit").dialog('open');
// return false;
//});
$("#lnkEdit").live("click", function (e) {
e.preventDefault(); //use this or return false
url = $(this).attr('href');
$(".ui-dialog-title").html("Update Department");
$("#dialog-edit").dialog('open');
return false;
});
$("#lnkDelete").live("click", function (e) {
// e.preventDefault(); use this or return false
url = $(this).attr('href');
$(".ui-dialog-title").html("Delete Department");
$("#dialog-confirm").dialog('open');
return false;
});
$("#btncancel").live("click", function (e) {
//event.preventDefault();
$("#dialog-edit").dialog("close");
//return false;
});
});
var updateWithNewData = function () {
$.ajax({
url: '@Url.Action("_departmentPartial", "Department")',
success: function (data) {
$("#divPV").append($("<div></div>").html(data));
}
});
}
</script>
<script type="text/javascript">
function pageRefresh() {
$.ajax({
url: 'Department/_departmentPartial',
contentType: 'application/html; charset=utf-8',
type: 'GET',
async: true,
success: function (result) {
$('#divPV').html(result);
}
});
}
</script>
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure to delete?
</p>
</div>
<div id="dialog-edit" style="display: none">
</div>
and my _MasterLayout.cshtml is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/Site.css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/bootstrap/css", "~/Content/css")
@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval", "~/bundles/modernizr", "~/bundles/bootstrap")
<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")"
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/DatePickerReady.js")"
type="text/javascript"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>Software</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Product", "Index", "Products")</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)
<div id="footer">
</div>
</div>
</div>
</body>
</html>
And my Create.cshtml is
@model AccountingERP.Models.tbl_Department_Master
@{
ViewBag.Title = "Create";
Layout = "";
}
When i click on Create new Department, the create.cshtml is loaded in popup, but when i close the popup
and click again on Create new department the create.cshtml is not display in modal popup.
Please help.
Frank
Topic Participants
contactfrankrego
jakecigar