JQuery DataTables and Jeditable - fields contains html but should not. Why?

Question

I am using DataTables and Jeditbale. Everything seems to work well, however, for some reason when I double-click any field within the table, it contains HTML. I have inserted the visual herein. I have not tried anything to fix this problem as I cannot even understand how this would occur. I have googled the problem but most people who report a similar problem just report extra blank spaces; not full html in fields. How can I fix this? If additional code required, can add in due course.

Here is my table code:

<!-- start table listing -->
            <table id="myTable" class="stripe hover cell-border row-border">
                <thead>
                    <tr>
                        <th id="country_id">Country ID</th> 
                        <th id="country">Country Name</th>  
                        <th id="country_import">Import Commnents</th>
                        <th id="country_export">Export Comments</th>
                        <th id="country_date_created">Created</th>
                        <th id="country_date_updated">Updated</th>
                        <th id="">Updated by</th>
                        <th id="country_enabled">Enabled?</th>
                        <th id="">Actions</th>
                    </tr>
                </thead>

                <tbody>
                <?php
                    foreach ($query as $row ) {
                ?>
                    <tr <?php echo 'id="'.$row->country_id.'"'; ?> > 


                        <td>    
                            <?php echo $row->country_id; ?>
                        </td>


                        <td>    
                            <a class='table-action-deletelink' href='/admin/country_view/<?php echo ''.$row->country_id.''; ?> '><?php echo $row->country; ?></a>
                        </td>



                        <td>    
                            <?php echo $row->country_import_comments; ?>
                        </td>
                        <td>    
                            <?php echo $row->country_export_comments; ?>
                        </td>

                        <td>    
                            <?php echo $row->country_date_created; ?>
                        </td>

                        <td>    
                            <?php echo $row->country_date_last_updated; ?>
                        </td>

                        <td>    
                            <?php echo $row->country_updated_by; ?>
                        </td>






                        <td>    <?php 
                                if ($row->country_enabled == 1) {
                                    echo '<span class="glyphicon glyphicon-ok" aria-hidden="true" ></span>';
                                } else {
                                    echo '<span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>';
                                } ?>
                        </td>




                        <td>


                        <!-- main container -->
                        <div class="dropdown">
                          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                            Dropdown
                            <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="/admin/country_view/<?php echo ''.$row->country_id.''; ?>">View</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Edit</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Deactivate</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="/admin/country_delete/<?php echo ''.$row->country_id.''; ?> ">Delete</a></li>
                          </ul>
                        </div>


                        </td>

            </form>


                    </tr>
                    <?php } ?>
                </tbody>            
            </table>    
        </div>
    </div>
</div>

Here is my javascript that implements the table:

$(document).ready(function() {
    //sDeleteURL: "/Home/DeleteData.php"
    $('#myTable').dataTable().makeEditable( {
        // some basic config
        'bProcessing':      true, 
        'bServerSide':      true, 
         'sAjaxSource':     "admin/json_get_countries",

        stateSave:          true,
        "scrollCollapse":   true,
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
            }
    } );
} );  // end of on doc load

Answer 1

You're using jQuery DataTables Editable plugin which internally uses jQuery Jeditable plugin.

According to Jeditable documentation (see Usage with Textile, Markdown, ReST, WiKi), if field contains content other than plain text (HTML, Markdown, etc), you need to use loadurl parameter to load content in and sUpdateURL to save modified value.

See Editable DataTable example - custom editors on how Engine version field is being edited and saved by using URLs specified in loadurl and sUpdateURL parameters.

You can make certain columns read-only and not-editable by defining aoColumns option and specifying null for corresponding column. aoColumns is an array holding options for all columns in sequential order, length of this array must be equal to the number of columns in the original HTML table.

Example:

$(document).ready( function () {
   $('#example').dataTable().makeEditable({
      sUpdateURL: "UpdateData.php",
      "aoColumns": [
            null,
            {
            },
            {
               indicator: 'Saving platforms...',
               tooltip: 'Click to edit platforms',
               type: 'textarea',
               submit:'Save changes',
               fnOnCellUpdated: function(sStatus, sValue, settings){
                  alert("(Cell Callback): Cell is updated with value " + sValue);
               }
            },
            {
               //indicator: 'Saving Engine Version...',
               tooltip: 'Click to select engine version',
               loadtext: 'loading...',
               type: 'select',
               onblur: 'cancel',
               submit: 'Ok',
               loadurl: 'EngineVersionList.php',
               loadtype: 'GET',
               sUpdateURL: "CustomUpdateEngineVersion.php"
            },
            {
               indicator: 'Saving CSS Grade...',
               tooltip: 'Click to select CSS Grade',
               loadtext: 'loading...',
               type: 'select',
               onblur: 'submit',
               data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
               sUpdateURL: function(value, settings){
                  alert("Custom function for posting results");
                  return value;

               }
            }
      ]                          
   });
})

See answer to similar problem with Jeditable. However this answer targets Jeditable only and not jQuery DataTables Editable plugin, so the code shown there doesn't apply, just the explanation.