Bootstrap modal not working from hyperlink in datatable row

keyd

Hi

I'm having problems getting a bootstrap modal form to open from a hyperlink within a datatables row.

Firstly the form does not open in a modal (but in a new tab, plus an error occurs due to my knockout, jquery and own custom js files are not being loaded.

I came across this similar issue (http://datatables.net/forums/discussion/1814/help-datatables-and-jquery-ui-modal-example) but as it was a few years old I thought I'd ask afresh.

I'm using datatables 1.10.2 and jquery 2.1.1.

My datatable:

 $('#homeTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "Home/AjaxDataTableRefresh",
            "bProcessing": true,
            "aoColumns": [
                            { "sName": "ClientName" },
                            { "sName": "SiteRef" },
                            { "sName": "SiteName" },
                            { "sName": "Town" },
                            { "sName": "PostCode" },
                            { "sName": "Area" },
                            { "sName": "Region" },
                            { "sName": "PRSRef" },
                            { "sName": "PPLRef" },
                            {
                                "sName": "SiteID",
                                "bSearchable": false,
                                "bSortable": false,
                                "mRender": function (item) {
                                    return '<a data-modal = \"\" href=\"Site/Edit?siteID=' + item + '\"><i class=\"glyphicon glyphicon-edit\"></i><span class=\"sr-only\">Edit</span></a>';
                                }
                            }
                        ]
        });

Here are my script references (in case the order is important):

<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.2/media/js/jquery.js"></script>
<script src="~/Scripts/jquery-2.1.1.js"> </script>
<script src="~/Scripts/knockout-3.2.0.debug.js"> </script>
<script src="~/Scripts/AddressLookupVm.js"> </script>
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.2/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.2/examples/resources/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="~/Scripts/modalform.js"> </script>
<script src="~/Scripts/bootbox.min.js"></script>
<script src="~/Scripts/pnotify.custom.min.js"></script>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/bootstrap")

Many thanks