Question

using datatables and jeditable plugins. Whenever I use this selector: .$(‘td[class!=”readonly”]’) I’m unable to do in-line edits. If I comment out the selector, then everything works great. I dont’ want to edit the checkbox column for obivous reasons.

any help?

thanks!!

here’s my init.

$(document).ready(function() {
    $('#example').dataTable({
        "sAjaxSource": "js/DataTables-1.9.0/scripts/server_processing.php",
                "aoColumns": [
                            {"bVisible": false },//id                                                                                               
                            {},//code
                            {},//project
                            {},//task
                            {},//type
                            {},//description
                            {"fnRender": function (oObj) {
                                return "<input type='checkbox' class='readonly' value='" + oObj.aData[0] + "' name='check'>";
                                },
                            "sClass": "readonly",
                            "bSearchable": false,
                            "bSortable": false
                            }//checkbox
                            ]

                })
                .$('td[class!="readonly"]')
                .makeEditable({
                    "sUpdateURL": "js/DataTables-1.9.0/scripts/server_editing.php"
            })
        } );

Here’s my table:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th width="2%">ID</th>                  
        <th width="10%">Code</th>
        <th width="10%">Project</th>
        <th width="10%">Task</th>
        <th width="10%">Type</th>
        <th width="50%">Description</th>
        <th width="2%">Delete</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="dataTables_empty">Loading data from server</td>
        <td class="dataTables_empty">Loading data from server</td>
        <td class="dataTables_empty">Loading data from server</td>
        <td class="dataTables_empty">Loading data from server</td>
        <td class="dataTables_empty">Loading data from server</td>
        <td class="dataTables_empty">Loading data from server</td>
        <td align="center" class="readonly">Loading data from server</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>ID</th>              
        <th>Code</th>
        <th>Project</th>
        <th>Task</th>
        <th>Type</th>
        <th>Description</th>
        <th>Delete</th>   
    </tr>
</tfoot>

edit

thanks for the syntax help everyone.

I changed it to this, but still no dice?? Again, removing the selector inline editing works.??

$(document).ready(function() {
    $('#example').dataTable({options});
    $('td').each(function(){
        var self = $(this);
        if(self.hasClass("readonly") != true){
            self.makeEditable({"sUpdateURL": "js/DataTables-1.9.0/scripts/server_editing.php"})
        }
    });
});

Answer 1

Try using $().hasClass();

You shouldn’t string those together, a jquery element is not a method or property of another… I’m surprised it works with the selector removed too… try this:

$(document).ready(function() {
    $('#example').dataTable({
       "sAjaxSource": "js/DataTables-1.9.0/scripts/server_processing.php",
       "aoColumns": [
          {"bVisible": false},//id     
          {},//code
          {},//project
          {},//task
          {},//type
          {},//description
         {"fnRender": function (oObj) {
               return "<input type='checkbox' class='readonly' value='" + oObj.aData[0] + "' name='check'>";
         },
        "sClass": "readonly",
        "bSearchable": false,
        "bSortable": false
        }//checkbox
     ]

    });
    $('td').each(function(){
        var self = $(this);
        if(self.hasClass("readonly") != true){
            self.makeEditable({"sUpdateURL": "js/DataTables-1.9.0/scripts/server_editing.php"})
         }
    });
});