Error 'object doesn't support this property or method' while using jquery modal popup

Question

I'm using a Jquery modal pop-up for multiple screens(say screen 1 - 6), and it isn't working for just screen 3, but working for the rest of the screens I've got 3 Layout pages: Layout1,Layout2, and Layout3. Every .cshtml page has the Layout as Layout3.Layout3 has the layout page as Layout2, and Layout2 in turn uses Layout1.

Every time a button(present in all 6 screens individually) is clicked, 'DeleteListByID()' is called and the popup is shown

The code for the modal-pop-up, as well as the JavaScript and CSS files are in Layout3

<script src="../../Scripts/ModalPopUp/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/ModalPopUp/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />

    function DeleteListByID(controller, action, id) { 
           $("#DeleteRecord").dialog({ autoOpen: false, modal: true, closeText: "", resizable: false });
          //some code
}

<div id="DeleteRecord" class="DN">
    <p>
        '@Constants.Global.LayoutForWorkflow.DELETE_RECORD_MESSAGE'
    </p>
</div>

But on one screen(screen 3) it gives me an error saying "Object doesn't support this property or method". Basically, it can't find the method 'dialog'. Can someone please tell me why this is happening??

There are no files included in the individual screens.Everything is in Layout3.

Answer 1

My problem, on MVC 4, was that the jQuery UI file was not included. Adding

@Scripts.Render("~/bundles/jqueryui")

into my (_Layout.cshtml) file fixed it.

Edit: also needed jQuery CSS

@Styles.Render("~/Content/themes/base/css")

Answer 2

Have you tried making sure the function only runs on document ready? It may be that .NET's AJAX weirdness means the element isn't loaded when the JavaScript tries to run.

$(document).ready(function() {

    function DeleteListByID(controller, action, id) { 
               $("#DeleteRecord").dialog({ autoOpen: false, modal: true, closeText: "", resizable: false });
              //some code
    }

})

Answer 3

You didn't mention your event handling, but if your click event function is

$(".button").click(function(){
    // stuff to do
});

try

$(".button").live("click", function() {      
    // stuff to do
});

Answer 4

I was having this exact same problem. View Source and search for any reference to 'jQuery'. I found a reference at the bottom of my page. I had also included the script reference myself.

Apparently, either due to a Nuget package or the project setup itself there was the following:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

This renders a second script reference to jQuery. The second reference to JQuery was causing the error.

Remove those two lines and you should be good to go.