I am following this Tutorial.
Here is my code (I've excluded my table 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. 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.
Secondly I'm getting an error $modal.modal is not a function when I am attempting to edit the rows and show the 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.
I'd appreciate any help.
