$ modal.modal不是FooTable中的函数

Question

I am following this Tutorial . 我正在关注本教程。

Here is my code (I've excluded my table HTML): 这是我的代码（我已经排除了表格HTML）：

@model IEnumerable<JMWebApp.Models.Job>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Job Manager";
}

<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
    <style scoped> 
        .form-group.required .control-label:after {
            content:"*";
            color:red;
            margin-left: 4px;
        }
    </style>
    <div class="modal-dialog" role="document">
        <form class="modal-content form-horizontal" id="editor">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
                <h4 class="modal-title" id="editor-title">Add Row</h4>
            </div>
            <div class="modal-body">
                <input type="number" id="id" name="id" class="hidden"/>
            </div>
            <div class="form-group required">
                <label for="reference" class="col-sm-3 control-label">Reference</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save Changes</button>
                <button type="button" class="btn btn-default">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    jQuery(function($) {
        var $modal = $('#editor-modal'),
            $editor = $('#editor'),
            $editorTitle = $('#editor-title'),
            ft = FooTable.init('#editing-example',
                {
                    editing: {
                        editRow: function(row) {
                            var values = row.val();
                            $editor.find('#id').val(values.id);
                            $editor.find('#reference').val(values.reference);
                            $modal.data('row', row);
                            $modal.modal('show');
                            $editorTitle.text('Edit row #' + values.id);
                        }
                    }
                });
    });
</script>

In my Layout file I define my scripts as so: 在布局文件中，我的脚本定义如下：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/footable.min.js"></script>
    <link href="~/Content/site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/footable.bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/footable.fontawesome.css" rel="stylesheet" type="text/css" /> 
</head>

I am having two issues with this. 我对此有两个问题。 First of all the icons on the 'FooTable' are not displaying correctly, they just look like jumbled characters. 首先，“ FooTable”上的图标未正确显示，它们看起来像是混乱的字符。 I did read an answer before that there are a number of font files I needed to include. 在我需要包含许多字体文件之前，我确实读过答案。

I tried that but it didn't work, also I couldn't find any guidance on the FooTable website to include these icons. 我尝试了一下，但是没有用，也无法在FooTable网站上找到包含这些图标的任何指南。

Secondly I'm getting an error $modal.modal is not a function when I am attempting to edit the rows and show the modal. 其次，当我尝试编辑行并显示模式时，出现错误$ modal.modal不是一个函数。 I also read a few answers to this in that my jQuery must be resolved before bootstrap, but as far as I can see in my Layout the scripts are loaded correctly. 我还阅读了一些答案，因为我的jQuery必须在引导程序之前解决，但是据我所知，在Layout中，脚本已正确加载。

I'd appreciate any help. 我将不胜感激。

Answer 1

bootstrap.min.js will be helpful for you, kindly read the below bootstrap.min.js将对您有所帮助，请阅读以下内容

Modal is defined in bootstrap.js not jQuery. 模态是在bootstrap.js中而不是jQuery中定义的。 It's also important to note that bootstrap actually needs jQuery to define the modal function, so it's vital that you include jQuery before including bootstrap's javascript. 还需要注意的是，引导程序实际上需要jQuery来定义模态函数，因此在包含引导程序的javascript之前包含jQuery非常重要。 To avoid the error just be sure to include jQuery then bootstrap's javascript before you call the modal function. 为了避免该错误，请确保在调用模态函数之前先包含jQuery，然后包含引导程序的javascript。

Source: https://stackoverflow.com/a/28173513/3397630 资料来源： https : //stackoverflow.com/a/28173513/3397630

Hope it was helpful 希望对您有所帮助

Thanks 谢谢

Karthik 卡尔提克

$ modal.modal不是FooTable中的函数

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-06-05 15:35:25

$ modal.modal不是FooTable中的函数

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-06-05 15:35:25

解决方案1
2 已采纳 2017-06-05 15:35:25