no calendar tool or calendar icon

ashiers

I'm upgrading my project to the latest version of DataTables, Editor, and TableTools. One particular example I'm having difficulty with is on the home page which involves a Date field. I've created a test folder on my server so you can see exactly what's going on:

http://jed-datatables.ca/jed/test/index.jsp

When you click on the New or Edit button, the dialog opens just fine, but where I'm specifying a calendar.png image file, it doesn't appear even though the path to it is correct. In addition, if you click on the date field, a calendar tool is supposed to pop up to select a date. It doesn't. I don't understand why that is.

My includes are simple enough. I'm importing:
"media/css/jquery.dataTables.css";,
"media/css/dataTables.tableTools.css";,
"media/css/dataTables.editor.css";,
"media/css/site.css";

and referencing the following scripts:

      
    <script type="text/javascript" language="javascript" src="media/js/jquery.js"></script> 
    <script type="text/javascript" charset="utf-8" src="media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf-8" src="media/js/dataTables.tableTools.js"></script>
    <script type="text/javascript" charset="utf-8" src="media/js/dataTables.editor.js"></script>

This is my javascript:

              <script type="text/javascript">
            $(document).ready( function () {
                var editor = new $.fn.dataTable.Editor( {
                    "ajaxUrl": "jsp/basic.jsp",
                    "domTable": "#example",
                    "fields": [ {
                            "label": "First name:",
                            "name": "first_name"
                        }, {
                            "label": "Last name:",
                            "name": "last_name"
                        }, {
                            "label": "City:",
                            "name": "city"
                        }, {
                            "label": "Date:",
                            "name": "registered_date",
                            "type": "date",
                            "dateFormat": 'D, d M y',
                            "dateImage": "media/images/calendar.png"
                            
                        }
                    ]
                } );
             
                $('#example').dataTable( {
                    "sDom": "Tfrtip<'clear'>",
                    "sAjaxSource": "jsp/basic.jsp",
                    "aoColumns": [
                        { "mDataProp": "first_name" },
                        { "mDataProp": "last_name" },
                        { "mDataProp": "city" },
                        { "mDataProp": "registered_date" }
                    ],
                    "oTableTools": {
                        "sRowSelect": "single",
                        "aButtons": [
                            { "sExtends": "editor_create", "editor": editor },
                            { "sExtends": "editor_edit",   "editor": editor },
                            { "sExtends": "editor_remove", "editor": editor }
                        ]
                    }
                } );
                       });
           </script>

Could someone please explain what's wrong with the setup for this particular table? Thanks.

Alan

ashiers

I just found the problem. I was missing a reference to <script type="text/javascript" language="javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

It's now working as expected.