sneha susan sneha susan - 7 days ago 7
jQuery Question

$(...).dialog is not a function error in mvc5

window based on drop down selection. In that i am getting this error $(...).dialog is not a function I tried many ways by using jquery plugins. Still issue is not cleared

My view code

@model ThreeTierArchitectureMVC.Models.VisitorsFormModel
@{
ViewBag.Title = "SaveVisitorsForm";
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

@using(Html.BeginForm())
{

<form>
<fieldset>

<div class="col-sm-3">
<div class="form-group">
<span style="color: #f00">*</span>
@Html.Label("Purpose of Visit", new { @class = "control-label", styles = "font-family: Arial;" })
@Html.DropDownList("POVisitID", null, "Select", new { @class = "form-control required" })

<div id="dialog-modal" title="Trial Form" style="display:none"></div>
</div>
</div>


<script src="~/javascript/jquery-1.10.4-ui.min.js"></script>
<script src="~/javascript/bootstrap.js"></script>
<script src="~/javascript/bootstrap.min.js"></script>
<script src="~/javascript/jquery-1.9.1.js"></script>
<script src="~/javascript/jquery-ui-1.8.24.js"></script>
<script src="~/javascript/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
$('#POVisitID').change(function () {
if ($('#POVisitID option:selected').text == "Trial") {
$("#dialog-modal").dialog("open");
}
})
})

$(function () {
debugger;
$("#dialog-modal").dialog({
resizable: false,
width: 500,
maxHeight: 800,
draggable: true,
dialogClass: 'main-dialog-class',
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
open: function () {
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
},
close: function () {
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.html('');
},
});
});
</script>


The error is mention in the below image

$ is not define error
Error

I tried my level best to explain my issue. Any one help me to resolve this issue. Itried many ways still issue i snot cleared.

Thanks.

Answer

The correct answer is

 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
 <script src="~/javascript/bootstrap.min.js"></script>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>


<script>
$(document).ready(function () {
    debugger;
    $("#POVisitID").change(function () {
        if ($("#POVisitID option:selected").text() == "Trial") {
            $("#dialog-modal").dialog("open");
        }

    })
})

 $(function () {
    debugger;
    $("#dialog-modal").dialog({
        resizable: false,
        width: 500,
        maxHeight: 800,
        draggable: true,
        dialogClass: 'main-dialog-class',
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
          effect: "explode",
           duration: 1000
       },
        open: function () {
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
        },
        close: function () {
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.html('');
        },
    });
});
</script>
Comments