Wierdness with MVC 5 and Bootstrap Modals

Question

I am working my way through a MVC 5 application, using Bootstrap modals. I have come across a bit of an inconsistency when trying to access a particular Partial page with modals from different web pages. One of the modals works fine, the other does not work at all.

(I have referenced Modals in MVC 5 when learning how to do this - so it's possible i'm making a boneheaded mistake somewhere, but I do not think so).

I'll start with the relevant code, then at the bottom I will go over what I have tried.

modalform.js (this was pretty much copy/pasted from the above reference object)

$(function () {

$.ajaxSetup({ cache: false });

$("a[data-modal]").on("click", function (e) {

    // hide dropdown if any
    $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

    $('#myModalContent').load(this.href, function () {

        $('#myModal').modal({
            backdrop: 'static',
            keyboard: true
        }, 'show');

        bindForm(this);
    });

    return false;
    });
});

Modal Partial Page (Create)

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Add New Site</h4>
</div>
@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="modal-body">
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.OrganisationSelected, htmlAttributes: new { @class = "control-label col-lg-3" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => Model.OrganisationSelected, Model.Organisations, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.OrganisationSelected, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.SiteName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SiteName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SiteAbbr, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SiteAbbr, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SiteAbbr, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SiteNotes, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SiteNotes, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SiteNotes, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" type="submit" value="Save" />
        </div>
    </div>

</div>
}

AllSites.cshtml (This one works fine - and yes, I know about the for loop not being best practice.)

@model IEnumerable<DRPlanner.ViewModels.OrganisationSiteViewModel>
@using DRPlanner.Helpers
@{
    ViewBag.Title = "All Sites";
}

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>
@for (int i = 0; i < Model.Count(); i++)
{
    if ((i == 0) || (Model.ElementAt(i).OrgId != Model.ElementAt(i - 1).OrgId))
    {
        <strong>                
            @Html.RouteLink(Model.ElementAt(i).OrganisationName.ToString() + " (" + Model.ElementAt(i).OrganisationAbbr.ToString() + ")", "OrgShort", new { org = Model.ElementAt(i).OrgId }) 
        </strong>
        @:<ul class="list-unstyled">                
    }

    if (Model.ElementAt(i).SiteName != "")
    {
        <li>
            @Html.RouteLink(Model.ElementAt(i).SiteName.ToString(), "SiteShort", new { org = Model.ElementAt(i).OrgId, site = Model.ElementAt(i).SiteId })
        </li>
    }
    if ((i == Model.Count() - 1) || (!Model.ElementAt(i).OrganisationAbbr.Equals(Model.ElementAt(i + 1).OrganisationAbbr)))
    {
            @:</ul>
        }
    }
<br />
    @Html.RouteLink("New Organisation", "NewOrg", new { controller = "Organisation", action = "Create" })
    @Html.RouteLink("New Site", "NewSite", new { controller = "Site", action = "Create" }, new { data_modal = "", id = "btnCreate", @class = "btn btn-small btn-primary" })

Sites.cshtml (This one doesn't work)

@model IEnumerable<DRPlanner.ViewModels.OrganisationSiteViewModel>
@{ViewBag.Title = "Sites";}
Sites For @ViewBag.OrganisationName

<ul class="list-unstyled">

    @foreach (var item in Model)
{
    <li>@Html.RouteLink(item.SiteName.ToString(), "SiteShort", new { site = item.SiteId })</li>    
}
</ul>
@Html.ActionLink("Add Site", "Create", "Site", null, new { data_modal = "", id = "btnCreate", @class = "btn btn-small btn-primary" })

<script src="~/Scripts/modalform.js"></script>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
    <div class="modal-content">
        <div id='myModalContent'></div>
    </div>
</div>
</div>

What I have done: I have debugged the running of the modalform.js in the VS2013 debugger, and found that when it is run from the AllSites.cshtml, the $('#myModal').modal is referring to a function (I have no clue how or where this function is pulled from, sorry), but when it is run on the Site.cshtml, $('#myModal').modal is undefined. So I know that is where the error is: i'm just clueless as to how to resolve the issue (or perhaps just clueless in general). One other piece of information: Sites.cshtml and AllSites.cshtml are both actions of DIFFERENT controllers to where the Create action exists. Basically, I am trying to get the modal to be accessible from multiple locations within the site. Any help is greatly appreciated (I don't have 15 rep yet, so upvotes will need to be pro-rata'ed for later).

The Error: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'

Answer 1

Ok, I found the problem.

The _Create.cshtml class had some unnecessary javascript and css files being referenced/loaded up. It seems that one (or more) of these was causing a conflict, which (naturally) disappeared once I commented/removed these unnecessary references.

Thanks all for your time and efforts. Issue is now resolved!