Function statement requires a name

Question

I have tried every way but I am missing something...

This is my code :

Mobile.Customer = (function (params) {

var viewModel = {

    };

    return {

        viewModel: viewModel
    }
   var gridDataSourceConfiguration = [{
            "InternalID": 1,
            "Code": 'TEST 1',
            "Name": 'Test 1 Test 1'
        }, 
        {
            "InternalID": 4,
            "Code": 'TEST 2',
            "Name": 'Test 2 Test 2'
        }, 
        {
            "InternalID": 5,
            "Code": 'TEST 3',
            "Name": 'Test 3 Test 3'

        }];

    var dataGrid = $("#gridContainer").dxDataGrid({
        dataSource: gridDataSourceConfiguration,
        filterRow: {
            visible: true,
            applyFilter: "auto"
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: 'Search...'
        },
        headerFilter: {
            visible: true
        },
        columns: [{
            dataField: "InternalID",
            width: 30,
            caption: "ID"
        }, {
            dataField: 'Name',
            alignment: 'right',
            //dataType: 'date'
        }, {
            dataField: "Code",
            alignment: 'right',
            // format: "currency"
        }
        ]
    }()).dxDataGrid('instance');

    var applyFilterTypes = [{
        key: "auto",
        name: "Immediately"
    }, {
        key: "onClick",
        name: "On Button Click"
    }]

    $("#useFilterApplyButton").dxSelectBox({
        items: applyFilterTypes,
        value: applyFilterTypes[0].key,
        valueExpr: "key",
        displayExpr: "name",
        onValueChanged: (function (data) {
            dataGrid.option("filterRow.applyFilter", data.value);
        }())
    }());

    $("#filterRow").dxCheckBox({
        text: "Filter Row",
        value: true,
        onValueChanged: (function (data) {
            dataGrid.clearFilter();
            dataGrid.option("filterRow.visible", data.value);
            $(".apply-filter-option").css("display", data.value ? "block" : "none");
        }())
    }());
})();

It complains at the very first line, so I do not know what to do. Somewhere I have an extra () in or something - I do not know. I am quite new to this code.

Can anyone help please?

EDIT

Thanks for all your responses. I appreciate and understand somewhat what your are saying. I have put the extra () because of searching on google and here and it was suggested more than once.

This is a Devextreme app. The above code is in my accompanying js file for my dxView file that looks like this :

   <pre>   <div data-options="dxView : { name: 'Customer', title: 'Customer' } " >
<div  data-options="dxContent : { targetPlaceholder: 'content' } " >

    <div class="autocomplete" data-bind="dxAutocomplete: {
            dataSource: gridDataSourceConfiguration,
            displayExpr: 'Description',
            placeholder: 'Enter Customer Name',
            itemTemplate: 'item'
            }">


        
       </div>

    <div class="apply-filter-option">Apply Filter <div id="useFilterApplyButton"></div></div>
<div id="gridContainer"></div>
<div class="options"><div id="filterRow"></div></div>

    </div>


    </div></pre>

This code is to set up a datagridview with information and filtering capabilities.

what about the () at the end of the script?is it required to have that? — brenners1302, Oct 01 '15 at 08:45
You have `()` at a lot of places where I don't understand why. Use them when you want to call a function. On some places you have them after an object is declared: `{ //Some stuff...}()`. That might be what is causing the error? Not sure, though. — Anders, Oct 01 '15 at 08:56
I would recommend you to use a [syntax validator](http://esprima.org/demo/validate.html), but it says your code is valid. — Anders, Oct 01 '15 at 08:57

Michael · Answer 1 · 2015-10-01T09:02:56.453

need more information from you, but here are some of your errors fixed..

1) you had loads of excess () (which immediately invokes your functions) where they shouldn't have been 2) you also hadn't declared Mobile so can't attach a property to it 3) it looks like you're doing something dodgy with the viewModel, but without knowing more I can't really be sure

var Mobile = {};
Mobile.Customer = (function () {
    var viewModel = {};

    return {
        viewModel: viewModel
    };

    var gridDataSourceConfiguration = [{
        "InternalID": 1,
        "Code": 'TEST 1',
        "Name": 'Test 1 Test 1'
    },
    {
        "InternalID": 4,
        "Code": 'TEST 2',
        "Name": 'Test 2 Test 2'
    },
    {
        "InternalID": 5,
        "Code": 'TEST 3',
        "Name": 'Test 3 Test 3'

    }];

    var dataGrid = $("#gridContainer").dxDataGrid({
        dataSource: gridDataSourceConfiguration,
        filterRow: {
            visible: true,
            applyFilter: "auto"
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: 'Search...'
        },
        headerFilter: {
            visible: true
        },
        columns: [{
            dataField: "InternalID",
            width: 30,
            caption: "ID"
        }, {
            dataField: 'Name',
            alignment: 'right',
            //dataType: 'date'
        }, {
            dataField: "Code",
            alignment: 'right',
            // format: "currency"
        }]
    }).dxDataGrid('instance');

    var applyFilterTypes = [{
        key: "auto",
        name: "Immediately"
    }, {
        key: "onClick",
        name: "On Button Click"
    }];

    $("#useFilterApplyButton").dxSelectBox({
        items: applyFilterTypes,
        value: applyFilterTypes[0].key,
        valueExpr: "key",
        displayExpr: "name",
        onValueChanged: function (data) {
            dataGrid.option("filterRow.applyFilter", data.value);
        }
    });

    $("#filterRow").dxCheckBox({
        text: "Filter Row",
        value: true,
        onValueChanged: function (data) {
            dataGrid.clearFilter();
            dataGrid.option("filterRow.visible", data.value);
            $(".apply-filter-option").css("display", data.value ? "block" : "none");
        }
    });
})();

Thank you for your advice everyone. I have edi9ted my original question to include more information — H_duPreez, Oct 01 '15 at 09:46
with the edited code from my answer, what error are you getting? — Michael, Oct 01 '15 at 10:35
could you set up a https://jsfiddle.net/ for us to help (strip it down to the bare minimum it takes to reproduce it) - not sure how much help I can be without being able to debug it — Michael, Oct 01 '15 at 12:53

score 0 · Accepted Answer · answered Oct 01 '15 at 16:24

Your code doen't work because you mixed up two different ways: MVVM and jQuery-way.

The default DevExtreme application is based on the MVVM approach(via knockoutjs). So, I suggest you move all your widget options to the view model.

The view model should be like below:

Mobile.Customer = function(params) {

    var gridDataSourceConfiguration = [{
        "InternalID": 1,
        "Code": 'TEST 1',
        "Name": 'Test 1 Test 1'
    },
    {
        "InternalID": 4,
        "Code": 'TEST 2',
        "Name": 'Test 2 Test 2'
    },
    {
        "InternalID": 5,
        "Code": 'TEST 3',
        "Name": 'Test 3 Test 3'

    }];

    var applyFilterTypes = [{
        key: "auto",
        name: "Immediately"
    }, {
        key: "onClick",
        name: "On Button Click"
    }];

    var dataGridOptions = {
        dataSource: gridDataSourceConfiguration,
        filterRow: {
            visible: ko.observable(true),
            applyFilter: ko.observable("auto")
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: 'Search...'
        },
        headerFilter: {
            visible: true
        },
        columns: [{
            dataField: "InternalID",
            width: 30,
            caption: "ID"
        }, {
            dataField: 'Name',
            alignment: 'right'
        }, {
            dataField: "Code",
            alignment: 'right'
        }
        ]
    };

    var selectBoxOptions = {
        items: applyFilterTypes,
        value: ko.observable(applyFilterTypes[0].key),
        valueExpr: "key",
        displayExpr: "name"
    };

    var checkBoxOptions = {
        text: "Filter Row",
        value: ko.observable(true)
    };

    var applyFilterVisible = ko.observable(true);

    selectBoxOptions.value.subscribe(function(value) {
        dataGridOptions.filterRow.applyFilter(value);
    });

    checkBoxOptions.value.subscribe(function(value) {
        $("#gridContainer").dxDataGrid("instance").clearFilter();
        dataGridOptions.filterRow.visible(value);
        applyFilterVisible(value);
    });

    var viewModel = {
        gridDataSourceConfiguration: gridDataSourceConfiguration,
        selectBoxOptions: selectBoxOptions,
        checkBoxOptions: checkBoxOptions,
        dataGridOptions: dataGridOptions,
        applyFilterVisible: applyFilterVisible
    };

    return viewModel;
};

To check when some widget value was changed I've used the ko.observable and the ko.subscribe functions.

Now, we can update the view:

<div data-options="dxView : { name: 'Customer', title: 'Customer' } " >
    <div  data-options="dxContent : { targetPlaceholder: 'content' } " >
       <div class="autocomplete" data-bind="dxAutocomplete: {
            dataSource: gridDataSourceConfiguration,
            displayExpr: 'Description',
            placeholder: 'Enter Customer Name',
            itemTemplate: 'item'
            }">
        </div>
        <div class="apply-filter-option" data-bind="visible: applyFilterVisible">
            Apply Filter
            <div id="useFilterApplyButton" data-bind="dxSelectBox: selectBoxOptions"></div>
        </div>
        <div id="gridContainer" data-bind="dxDataGrid: dataGridOptions">
        </div>
        <div class="options"><div id="filterRow" data-bind="dxCheckBox: checkBoxOptions"></div></div>
    </div>
</div>

Function statement requires a name

2 Answers2