Can I use standalone editor on multiple tables in the same page?

wannberg

I have seen it asked a least one other time in the forums, but what I am doing is a little more complex and it doesn't work.

Effectively I am dynamically generating contact cards using PHP. I use data tables to gather all the contacts and their data and send it back as an object in PHP. I loop through that object and create a card for each contact. I also give each card its own ID.

When I initialize the editor, I run 1 script with all the fields identified. This sort of works as as a standalone editor, but it only shows the data for the first card in the editor, not the one I am actually editing.

Is it possible to edit each card in the standalone editor? FYI I may have some html divs out of place in this example as I have only pasted snippets,

HTML generated

<div class='contact_info' id="<?php echo $row->DT_RowId ?>">
   <!-- Contact Information -->
   <div class='row'>
       <label class='control-label col-xs-4' data-editor-label="firstName">Name:</label>
           <div class='col-xs-6'
              data-editor-field="firstName"><?php echo $row->firstName ?></div>
           </div>
   <div class='row'>
        <label class='control-label col-xs-4'>Tel:</label>
        <div class='col-xs-8'
         data-editor-field="telephone"><?php echo $row->telephone ?></div>
         </div>
</div>
</div>

Example of my js file initializing the editor"

(function($){

    editor = new $.fn.dataTable.Editor( {
        "ajax": "xxx.php",
        "fields": [
            {
                "label": "First Name",
                "name": "firstName",
                "default": "Not Entered",
                "type": "text"
            },
            {
                "label": "Last Name",
                "name": "lastName",
                "default": "Not Entered",
                "type": "text"
            }
]});

Script on the page

    var editor;

    function edit_contact(tableId, id){

        editor
            .title( 'Edit Contact' )
            .buttons( { "label": "Update", "fn": function () { this.submit() } } )
            .edit(id);
    }

allan

Hi,

Might you be able to give me a link to the page you are working on? The "Generated HTML" above, is that repeated multiple times on the page? If so, I suspect that is what is tripping Editor up here - it assumes that the data-editor-field attributes are unique on the page, rather than having a list or array of them. Or does an edit action populate that HTML which is static and unique on the page?

Thanks,
Allan

wannberg

Thanks Allan,
Can you send me an email address? I will send you the link and give you access to the site.

wannberg

The Generated HTML is repeated over and over for the entries when the page is created. I was trying to attach the editor to each card using an id, but as you say the editor only uses the data in that first card.

allan

Yes - if you could e-mail me at allan @ this domain .net (I've added code tags to try and avoid spam bots...).

Allan