stand alone - load data

mmontoya

In the examples I see for standalone editor, the values seem to be hard coded in the html for the initial load. Isn't there a way that the values get populated from the editor field on load?

allan

There isn't a built in way of doing it, since the standalone Editor is designed to be just that - standalone. But you could use a regular $.ajax request to get and populate the data into the page and then use a standalone Editor with it.

Allan

mmontoya

Ok. So I got it to load a particular record on page load. But when I try and edit a value it adds a new record, it doesn't update the existing record.

<?php 
    require_once('lib/config.php'); 
    $uid = access_control();   

    $customerID = $_GET['id'];

    $sql = "SELECT * FROM Customers WHERE CustomerID = '$customerID'";
    $res = $mysqli->query($sql);
    $row = $res->fetch_assoc();        
    $customerName = $row["FirstName"].' '.$row["LastName"];


<?php
>

    dt, dd {    display: inline;}
    
    dt:first-child { margin-top: 0; }
    dd { width: 25% }
 
    *[data-editor-field] {
        border: 1px dashed #ccc;
        padding: 0.5em;
        margin: 0.5em;
    }
 
    *[data-editor-field]:hover {
        background: #f3f3f3;
        border: 1px dashed #333;
    }

?>


<script>
    var customerEditor;
    $(document).ready(function() {
      customerEditor = new $.fn.dataTable.Editor( {
              serverSide: true,
              ajax: "lib/getCustomers.php?id="+GetURLParameter("id"),
              //table: "#customerTable",
              fields: [              
                {
                  label: "First Name",
                  name: "FirstName"
                },
                {
                  label: "Last Name",
                  name: "LastName"
                },
                {
                  label: "Phone Number",
                  name: "ContactValue"
                },                
                {
                  label: "Address",
                  name: "Address"
                },
                {
                  label: "City",
                  name: "City"
                },
                {
                  label: "State",
                  name: "State"
                },
                {
                  label: "Zip",
                  name: "ZipCode"
                }
              ]
          } );


    $('[data-editor-field]').on( 'click', function (e) {
        customerEditor.bubble( this );
    } );
/*
    $('#myForm').on( 'click', 'dd', function (e) {
        customerEditor.inline( this, {
            submitOnBlur: true
        } );
    } );
*/
 
    });
</script>

        <dl id="myForm">
          <dt>First Name</dt>
            <dd data-editor-field="FirstName"><?php echo $row["FirstName"] ?></dd>
          <dt>Last Name</dt>
            <dd data-editor-field="LastName"><?php echo $row["LastName"] ?></dd>
          <dt>Phone Number</dt>
            <dd data-editor-field="ContactValue"><?php echo $row["ContactValue"] ?></dd>
          <br/><dt>Address</dt>
            <dd data-editor-field="Address"><?php echo $row["Address"] ?></dd>
          <dt>City</dt>
            <dd data-editor-field="City"><?php echo $row["City"] ?></dd>
          <dt>State</dt>
            <dd data-editor-field="State"><?php echo $row["State"] ?></dd>           
          <dt>Zip</dt>
            <dd data-editor-field="Zip"><?php echo $row["Zip"] ?></dd>            
        </dl>

```
<?php
/*
* Editor server script for DB table usertable
* Created by http://editor.datatables.net/generator
*/
$myPath = dirname(FILE);
$customerid=$_GET['id'];

// DataTables PHP library and database connection
include( "../../DataTables/Editor/php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Join,
DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'Customers', 'CustomerID' )
->fields(
Field::inst( 'FirstName' )
->validator( 'Validate::notEmpty' ),
Field::inst( 'LastName' )
->validator( 'Validate::notEmpty' ),
Field::inst( 'ContactValue'),
Field::inst( 'Address'),
Field::inst( 'City'),
Field::inst( 'State'),
Field::inst( 'ZipCode'),
Field::inst( 'CustomerID')
)
->where('CustomerID',$customerid,'=')
->process( $_POST )
->json();

<?php > ``` ?>

allan

I suspect the issue is this:

ajax: "lib/getCustomers.php?id="+GetURLParameter("id"),

It needs to be POSTed rather than sent as a GET parameter (since you are using process( $_POST ).

You need to use data-editor-id like in this example to have Editor use the ID.

Allan

mmontoya

The method I posted works on the 'regular' Editor, just not in standalone. Does that still sound like what you are suggesting is the culprit?

allan

I suspect so - however, to check, what are the parameters that Editor is sending to the server on edit of the standalone item in the POST request? I presume that there is no id value, or that it is undefined?

Allan

mmontoya

Ah. In the console I see the following:

<br />
<b>Notice</b>:  Undefined index: id in <b>/home/uniqueda/public_html/DataTables/Editor/php/Editor/Editor.php</b> on line <b>523</b><br />
{"row":null}

In looking at the headers section of the console I see:

Query String Parameters
id:57

Form Data
action:edit
data[FirstName]:John
data[LastName]:Doe
data[ContactValue]:555-555-5555
data[Address]:
data[City]:San Francisco
data[State]:ca
data[ZipCode]:

So how do I get data[CustomerID] without having the CustomerID in the grid?

allan

You need to use the data-editor-id attribute like I mentioned above. That will tell Editor what the "row" id is, and it will use that in the submission.

You don't really want to submit CustomerID in this case, but rather than Editor submit an id parameter (since CustomerID is your primary key - you won't want that being edited - at least not normally!).

Allan