I am getting following error...
Uncaught TypeError: $(...).dialog is not a function
at HTMLDocument.<anonymous> (PAll:402)
at o (jquery.min.js:2)
at Object.fireWith (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.B (jquery.min.js:2)
**_Layout.cshtml**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "PHome", "ProductsHome")</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
<label class="List_Element">Products</label>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="List_Element">
<a href="@Url.Action("AllProducts" , "ProductsHome")">
Show All
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
**ALLProducts page with _Layout as master-page**
@model IEnumerable<Popup_MVC.ViewModels.productsViewModel>
@{
ViewBag.Title = "AllProducts";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<style>
.addNewClass
{
font-size: medium;
}
.editClass
{
font-size: medium;
}
</style>
</head>
<body>
<br /><br />
<center>
<input type="button" id="addPrdBtn" class="btn btn-primary" value="Add Product" />
</center>
<br /><br />
<table class="table table-striped" id="prodTable">
<tr>
.........
</tr>
@foreach (var item in Model)
{
<tr>
.........
</tr>
}
</table>
<br /><br />
<div id="dialog" style="display:none;width:500px;">
</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">
$(function ()
{
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Add product",
width: "500px"
});
$("#addPrdBtn").click(function ()
{
$.ajax({
type: "POST",
url: "/ProductsHome/AddProduct",
data: '{}',
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>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 300,
height: 150
});
$("#btnShow").click(function ()
{
$('#MDdialogbox').dialog('open');
});
});
</script>
<input type="button" id="btnShow" value="Show Popup" />
<div id="MDdialogbox" style="display: none" align="center">
This is a jQuery Dialog.
</div>
<script type="text/javascript">
$(document).ready(function ()
{
$("#addPrdBtn").click(function ()
{
$("#MDdialogbox").dialog({
open: function () { $(".ui-dialog-titlebar-close").hide(); },
width: '410',
height: '320',
title: 'Ticket Details - On Hold',
modal: true,
show: {
effect: 'fade',
duration: 1500
},
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
});
});
</script>
<div id="MDdialogbox" style="display:none;">
</div>
</body>
</html>
and the scenario is , Modal dialog opens on PhomeNew.cshtml which is without masterpage but Modal dialog doesn't open on AllProducts.cshtml which is with master page
I tried different js/jquery codes in AllProducts.cshtml...
what can be the issue ?
thanks !
