Add record CSS not rendering Jtable

Question

I am just having some problems with the edit and create new record dialogs. It seems as though the CSS is not being rendered but I don't have any idea where to look; I've followed this tutorial http://www.codeproject.com/Articles/277576/AJAX-based-CRUD-tables-using-ASP-NET-MVC-and-jTa through every step.

It's probably a stupid mistake. Here's my code:

@section scripts
{
<link href="~/Scripts/jtable/themes/lightcolor/blue/jtable.min.css" rel="stylesheet" />
<link href="~/Scripts/jtable/themes/jqueryui/jtable_jqueryui.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>

<script src="~/Scripts/jtable/jquery.jtable.min.js"></script>

<script type="text/javascript">

$(document).ready(function ()
{

    //Prepare jtable plugin
    $('#JobTable').jtable({
        title: 'Job List',
        paging: true,
        //sorting: true,
        selecting: true,
        //multiselect: true,
        selectingCheckboxes: true,
        //defaultSorting: 'Name ASC',
        actions: {
            listAction: '/Job/JobList',
            deleteAction: '/Job/DeleteJob',
            updateAction: '/Job/UpdateJob',
            createAction: '/Job/CreateJob'
        },
        fields: {
            Id: {
                key: true,
                list: false,
                create: false,
                edit: false,
            },
            EmployeeNumber: {
                title: 'Employee Number',
                width: '15%',
                create: false,
                edit: false,
            },
            RecipientName: {
                title: 'Recipient Name',
                width: '15%'
            },
            Address: {
                title: 'Address',
            },
            StartDate: {
                title: 'Start Date',
                type: 'date',
                displayFormat: 'yy-mm-dd',
                create: true,
                edit: true, 
            },
            CompletionDate: {
                title: 'Completion Date',
                width: '15%',
                type: 'date',
                displayFormat: 'yy-mm-dd',
                create: false,
                edit: false,
            },
            Notes: {
                title: 'Notes',
                width: '12%',
                create: true,
                edit: true,
            },
           PriorityValue: {
                title: 'Priority',
                width: '7%',
                create: true,
                edit: true,
            },
            TrackingStatusValue: {
                title: 'Status',
                width: '12%',
                create: false,
                edit: false,
            },

            Phones: {
            title: '',
            width: '3%',
            sorting: false,
            edit: false,
            create: false,
            display: function ()
                {

                    var $img = $('<img src="~/Content/google-map.png" />');
                        return $img;
                }
          }

        }
    });
    //Load person list from server
    $('#JobTable').jtable('load');
});


</script> 
}

Am I missing any references for the css or scripts?

Answer 1

I think you may have missed referencing the jquery-ui.css file. The Edit/Create jtable modals use this css.

Mine resides here:

You may have to change the relative url in this css for icons.

Hope it helps.