Present div selected on page refresh?

Question

I am writing an attendance web app using dev-Extrem dx-list (In UI weight). In this attendance we will display all users names in dxlist. and for attendance we just have to select the user. that will enter his name in db. My requirement is if we refresh the page, present should be selected.

My code example is here! ( I am using dev-extreme. )

var listWidget = "";
function getUsers(){
    var date = $('#date').val();
    var dt = date.split("/");
    var dat = dt[2]+"-"+dt[0]+"-"+dt[1];
    //alert(dat);
    var data = { 'action': 'getUsers', 'date': dat};
    $.post("php/users.php", data).success(function (resp) {
        //alert(resp);
        var users = $.parseJSON(resp);
        var selectedItems = [];

        var dataSource = new DevExpress.data.DataSource({
            store: users,
            searchOperation: "contains",
            searchExpr: "name",
        });
        listWidget = $("#simpleList").dxList({
            dataSource: dataSource,
            editEnabled: true,
            height: 400,
            allowItemDeleting: false,
            itemDeleteMode: "toggle",
            showSelectionControls: true,
            selectionMode: "multiple",
            itemTemplate: function(data, index) {
                var result = $("<div>").addClass("product");

                $("<img>").attr("src", "images/"+data.id+".jpg").appendTo(result);
                var content = $("<div class='content'>").appendTo(result);
                $("<div class='findAtt' style='display:none;'>").text(data.attendaceId).appendTo(result);
                $("<div class='findId'>").text(data.id).appendTo(content);
                $("<div class='findName'>").text(data.name).appendTo(content);
                $("<div class='findDep'>").text(data.department).appendTo(content);
                $("<div class='findCode'>").text(data.userCode).appendTo(content);
                /*var edit = $("<div class='findEdit'>").appendTo(result);
                $("<a class='edit' onclick='edit()'>").text("Edit").appendTo(edit);*/
                var salary = $("<div class='salary'>").appendTo(result);
                $("<div class='findSalary'>").text("Rs."+data.userSalary).appendTo(salary);
                return result;
            },
            onItemSwipe: function(data){
                var userId = data.itemData.id;
                var userSalary = data.itemData.userSalary;
                $('#simpleList').dxList('instance').repaint();
                edit(userId, userSalary);
            }           
        }).dxList("instance");

        $("#textbox").dxTextBox({
            valueChangeEvent: "keyup",
            placeholder: "Search",
            onValueChanged: function(args) {
                dataSource.searchValue(args.value);
                dataSource.load();
            },
            mode: "search"            
        });

        $('.dx-item').click(function(){
            var att = $(this).find('.findId').text();
            var dep = $(this).find('.findDep').text();
            //console.log(this);
            attendance(this, att, dep);
            $(this).toggleClass('background');
            //$(this).find('.dx-checkbox-checked').toggleClass('dx-checkbox-checked');


        });
    });
}
getUsers();

function attendance(bg, att, dep){
    if($(bg).hasClass('background')){
        var usersId = att;

        var data = { 'action': 'absent',
                     'userId': usersId
                   };
        $.post("php/users.php", data).success(function (resp) {
        });
    }else{
        var userId = att;
        var data = { 'action': 'attendance',
                     'userId': userId,
                     'dep': dep
                   };
        $.post("php/users.php", data).success(function (resp) {
            //alert(resp);
        });
    }
}

function edit(userId, userSalary){
    $('#eSalary').val(userSalary);
    $('#eId').val(userId);
    $('#editModal').modal();
}

$('#saveSalary').click(function(){
    var userId = $('#eId').val();
    var salary = $('#eSalary').val();
    var data = { 'action': 'changeSalary', 'userId': userId, 'salary': salary};
    $.post("php/users.php", data).success(function (resp) {
        $('#editModal').modal('hide');
        alert(resp);
        //location.reload();
        $('#simpleList').dxList('instance').reload();
    });
});

$('#depList').change(function(){
    var depId = $('#depList option:selected').val();
    var data = { 'action': 'getUserDep', 'depId': depId};
    $.post("php/users.php", data).success(function (resp) {
        //alert(resp);
        var users = $.parseJSON(resp);
        var selectedItems = [];

        var dataSource = new DevExpress.data.DataSource({
            store: users,
            searchOperation: "contains",
            searchExpr: "name"
        });
        var listWidget = $("#simpleList").dxList({
            dataSource: dataSource,
            editEnabled: true,
            height: 400,
            allowItemDeleting: false,
            itemDeleteMode: "toggle",
            showSelectionControls: true,
            selectionMode: "multiple",
            itemTemplate: function(data, index) {
                var result = $("<div>").addClass("product");

                $("<img>").attr("src", "images/"+data.id+".jpg").appendTo(result);
                var content = $("<div class='content'>").appendTo(result);
                $("<div class='findId'>").text(data.id).appendTo(content);
                $("<div class='findName'>").text(data.name).appendTo(content);
                $("<div class='findDep'>").text(data.department).appendTo(content);
                $("<div class='findCode'>").text(data.userCode).appendTo(content);
                var salary = $("<div class='salary'>").appendTo(result);
                $("<div class='findSalary'>").text("Rs."+data.userSalary).appendTo(salary);
                return result;
            }               
        }).dxList("instance");

        $("#textbox").dxTextBox({
            valueChangeEvent: "keyup",
            placeholder: "Search",
            onValueChanged: function(args) {
                dataSource.searchValue(args.value);
                dataSource.load();
            },
            mode: "search"            
        });

        $('.dx-item').click(function(){
            var att = $(this).find('.findId').text();
            var dep = $(this).find('.findDep').text();
            //alert(att);
            attendance(this, att, dep);
            $(this).toggleClass('background');
        });
    });
});

Answer 1

As far as I understand, you want to save a selection of dxList items on page reload.

If so, I suggest you use the next approach:

Add the selected field for an each item(I mean DB schema). It should be like:

{ id: 1, text: "Bob", selected: true }

Get selected items before list rendering:

var selectedItems = load_from_your_server();

Init a list with the selectedItems option:

$("#list").dxList({
     //...
     selectedItems: selectedItems
});

Next, add the onSelectionChanged event handler:

$("#list").dxList({
     //...
     selectedItems: selectedItems,
     onSelectionChanged: function(e) {
        var listInst = e.component;
        e.addedItems.forEach(function(item) {
            // update item that was selected
            update_your_item_in_db(item.id, {selected: true});
        });
        e.removedItems.forEach(function(item) {
            // update item that was unselected
            update_your_item_in_db(item.id, {selected: false});
        });
    }
});

I've create the small sample http://jsfiddle.net/vvh70no2/5/ that illustrates my idea. I've used an Array, not a real db.