Tuesday, 7 May 2019

Set and use localStorage to retain checkbox selections during form edit

I have a form that uses jqGrid for a section of the form. This section displays user info that can be selected via the checkbox. On the review page there is an option to edit the form and I'm trying to retain the checkbox selections during this process. I'm trying to use Window.localStorage for this however I'm not sure how to setItem properly. I'm calling getItem in the loadComplete and my coding may not be quite correct here either. What I have now, when a user goes to edit, selects the first item in the jqGrid instead of the actual saved item. I'm guessing because I haven't properly setItem. Can anyone offer guidance?

$.jgrid.gridUnload("#list");

myGrid = $("#list").jqGrid({
        url: baseURL + '/scripts/get_user_list.php' + urlString,
        datatype: "json",
    mtype: 'POST',
    width: 660,
    height: '100%',
    pager: '#pager',
    rowNum: 10,
    rowList: [20, 30, 40, 50, 60],
    sortname: 'id',
    sortorder: "asc",
    viewrecords: true,
    multiselect: true,
    repeatitems: false,
    imgpath: '/scripts/jquery-ui/images',

    colNames: ['id', 'Building', 'Company ID', 'Description', 'Individual Name', 'SECCode'],
    colModel: [
        {name: 'id', index: 'id', jsonmap: 'id', hidden: true, width: 20},
        {name: 'Building', index: 'Building', jsonmap: 'Building', hidden: true, width: 20},
        {name: 'CompanyId', index: 'CompanyId', jsonmap: 'CompanyId', width: 110},
        {name: 'Description', index: 'Description', jsonmap: 'Description', sortable: true, width: 300},
        {name: 'IndName', index: 'IndName', jsonmap: 'IndName', width: 200},
        {name: 'UsrNum', hidden: true, index: 'UsrNum', jsonmap: 'UsrNum'}
    ],
    jsonReader:
            {
                repeatitems: false,
                root: 'rows',
                id: '0',
                cell: '',
                subgrid:
                        {
                                        root: 'rows',
                                        id: '0',
                                        cell: '',
                                        repeatitems: false
                                    }
            },

    // subgrid support
    subGrid: true,
    subGridUrl: baseURL + '/scripts/get_user_list.php' + urlString,
    subGridModel: [{
            name: ['Date', 'ID'],
            params: ['CompanyId'],
            align: ['center', 'right'],
            width: [150, 80]}
    ],

    ondblClickRow: function (id)
    {
        $('#recId').val(id);
    },


    beforeRequest: function ()
    {
        blnGridLoading = true;
        // console.log("beforeRequest(); setting blnGridLoading=true");
        fnValidateAccount(); // Check that user has data available
                },
    loadComplete: function ()
    {

$(':checkbox').each(function () {
            var status = localStorage.getItem(this.id) === "false" ? false : true;
            $(this).prop("checked", status);
                });

       blnGridLoading = false;
        // console.log("loadcomplete(); setting 
       blnGridLoading=false");

        for (swap in arySwap)
        {
            if (typeof arySwap[swap]['CompanyId'] != 'undefined')
                        {

      $("#list").jqGrid('setSelection', arySwap[swap]['CompanyId']); // select companyId
            }
        }
        fnValidateAccount(); // Check that user has data available

    },

Here's the localStorage.getItem in loadComplate, isolated from the rest of the code:

$(':checkbox').each(function () {
        var status = localStorage.getItem(this.id) === "false" ? false : true;
        $(this).prop("checked", status);
            });

Here's what I tried for setItem and where I'm not sure where to place this or if this is the correct way to go.

$(':checkbox').on('change', function () {
//set the check value of checkbox
localStorage.setItem(this.id, this.checked);
});



from Set and use localStorage to retain checkbox selections during form edit

No comments:

Post a Comment