All chekbox becomes unchecked after the row udated on Editor edit form

Fatou_va

I have a datatables with many checkbox columns
here the columns render (7 columns in some)

if (column.fieldType === "checkbox") {
                        column.render = function (data, type, row) {
                            if (type === 'display') {
                                return '<input name="' + column.data + '" type="checkbox" ' + (data === true ? 'checked' : '') + ' onclick="return false" >';
                            }
                            return data;
                        };
                        column.className = "dt-body-center"
                    }

when I edit a row, and submit the form after a modification or not, the row is updated in the database but in datatable all chekbox becomes unchecked.
So that my datatable is updated I am forced to reload it

anybody have an idea to how to resolve this problem?

Thanks for your help!

kthorngren

Are you using rowCallback to update the display of the checkboxes?

For example:

        rowCallback: function ( row, data ) {
            $('input.editor-active', row).prop( 'checked', <column name> == 1 );

Kevin

Fatou_va

Hi Kthorngren,

no, I don't use the rowCallback because in my another dataTable (who don't have the checkbox field) the row is updated after it's modification in Editor edit form without the datatable rowCallback, so I thought that that must be similar for the row with the checkbox field.

allan

It sounds like the data being returned from the server doesn't contain data === true. Perhaps it contains 'true' as a string, or 1 or t?

If you can post a link to the page I can take a look?

Allan

Fatou_va

Hi Allan,

the data returned from the server is a json object and it's contain data === 'true'

I send you a email with the link to the page. On this page I have 4 tab, my problem is in the 2nd ant the 3th tabs

allan

Thank you. Yes, the issue is that you have a strict check for boolean true, but your server is returning strings rather than booleans.

My suggestion would be that you change gererOngletJourVenteArticle.rest to return boolean values for true and false rather than strings.

The other option is to modify your Javascript logic check to either make it a weak check or to get for both boolean and string values.

Allan

Fatou_va

Thank your for your answer Allan,

I have try your first suggestion but it not resolve my issue

here my Editor fields (type checkbox ) definition ( I have a function for create Editor fields)

{
       label: column.title,
       name: column.data,
       type: column.fieldType,
       separator: "|",
       options: [  {label: '', value: true}  ],
       unselectedValue: false
  }

and here my ajax function for edit submit

ajax: function(method, url, data, successCallback, errorCallback ) {
                        method  = 'PUT'; 
                        url = '/parametre/Cafeteria/gererOngletJourVenteArticle.rest';
                        
                        var myDataModele = [];                        
                        $.each( data.data, function (key, value) { 
                            var article = value; //JSON.parse(JSON.stringify(value)); 
                            article.articleid = key;
                            myDataModele.push(article);
                        });                         
                                                
                        //submit 
                        rest.restCall({
                            data: myDataModele,
                            resourceUrl: url,
                            method: method,
                            async: false,
                            onSuccess: successCallback,
                            onError: errorCallback
                        });
                    },
                    table: '#gridJourVente',
                    idSrc: 'articleid', 
                    template: '#customFormJourVente',
                    fields: champs,
                    i18n: {
                        edit: {
                            button: "Modifier",
                            title:  "Modification des jours de vente d'un article",
                            submit: "Modifier",
                            close: "Annuler"  //not add the close button on editor form
                        }
                    }
                };

and in a server, my gererOngletJourVenteArticle function

@RequestMapping(value = "/parametre/Cafeteria/gererOngletJourVenteArticle", method = {RequestMethod.PUT}, produces = "application/json;charset=UTF-8") 
    public @ResponseBody JSONObject updateArticleJourVente(HttpServletRequest request, @RequestBody Object receivedData) throws JsonProcessingException{  
        Variables variables = (Variables) request.getAttribute(Constants.ATTRIBUTE_VARIABLES);
        CftArticleDAO articleDAO = new CftArticleDAO(sessionFactory.getCurrentSession(), variables);     
        List data = (ArrayList)receivedData; //in receivedData, the values of checkbox fields is the string type
        JSONObject dataJSON = new JSONObject((LinkedHashMap)data.get(0));    
        String retour = ""; 
 
//update in DBD
        articleDAO.updateArticleParametreCafeteria("jourVente", dataJSON); 
        
        dataJSON.put("lundi", dataJSON.getBoolean("lundi"));
        dataJSON.put("mardi", dataJSON.getBoolean("mardi"));
        dataJSON.put("mercredi", dataJSON.getBoolean("mercredi"));
        dataJSON.put("jeudi", dataJSON.getBoolean("jeudi"));
        dataJSON.put("vendredi", dataJSON.getBoolean("vendredi"));
        dataJSON.put("samedi", dataJSON.getBoolean("samedi"));
        dataJSON.put("dimanche", dataJSON.getBoolean("dimanche"));
        
        JSONObject articleUpdated =  new JSONObject();
        JSONArray articleObj = new JSONArray(); 
        articleObj.put(dataJSON);
        articleUpdated.put("data", dataJSON); // articleUpdated.put("data", articleObj);
       
        
        return articleUpdated;
    }

and I have this function on postEdit event

majJourVentePostEdit: function(e, row, data){
           $.each(data.data, function (key, value) {  
               $.each(value, function (k, val) { // val is always the string type
                    $('input:checkbox', row).prop('checked', val == 'true' || val == true);
                });
            }); 
        }

but the row in datatable is not updated.

what I do wrong?

Sorry for my english!

allan

You don't want to use a postEdit event for this - it won't help. You need to update the rowCallback where you are currently doing a strict check for true.

Allan