I have been trying to use Editor. I have valid JSON but it wont load the data.

wjm69 · February 2017

Thank you in advance.
I thought I could do this after using DataTables but Editor has me stumped.

Here is a link: http://www.murray5.com/preditor/prshow.php

Here is the main file:

<!doctype html>

<html>

<head>  
<title>View Current Prayer Requests</title>  
<script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="../DataTables/datatables.min.js"></script>
<script type="text/javascript" src="../DataTables/Editor-2017-02-26-1.6.1/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>


<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../DataTables/datatables.min.css" rel="stylesheet" type="text/css">
<link href="../DataTables/Editor-2017-02-26-1.6.1/css/editor.dataTables.min.css" rel="stylesheet" type="text/css">

</head>  

<body>  
</body>
</html>

<script>
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "prq.php",
        table: "#mytable",
        idSrc: "rnu",
        fields: [ {
                label: "date:",
                name: "date",
                type: "datetime"
            }, {
                label: "name:",
                name: "name"
            }, {
                label: "cell:",
                name: "cell"
            }, {
                label: "email:",
                name: "email"
            }, {
                label: "prayer:",
                name: "prayer"
            }, {
                label: "contact:",
                name: "contact"
            }, {
                label: "privacy:",
                name: "privacy"
            }
        ]
    } );
 
    $('#mytable').DataTable( {
        dom: "Bfrtip",
        ajax: "prq.php",
        columns: [
                        
            { data: "date" },
            { data: "name" },
            { data: "cell" },
            { data: "email" },
            { data: "prayer" },
            { data: "contact" },
            { data: "privacy" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );
    
</script>

Here is the php file.

<!doctype html>

<html>

<head>  
<title>View Current Prayer Requests</title>  

<script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="../DataTables/datatables.min.js"></script>
<script type="text/javascript" src="../DataTables/Editor-2017-02-26-1.6.1/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>


<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../DataTables/datatables.min.css" rel="stylesheet" type="text/css">
<link href="../DataTables/Editor-2017-02-26-1.6.1/css/editor.dataTables.min.css" rel="stylesheet" type="text/css">

</head> 
<body> 
</body>
</html>

<?php
date_default_timezone_set('America/Chicago');
/*
 * Example PHP implementation used for the index.html example
 */
// DataTables PHP library
include( "../DataTables/php/DataTables.php" ); 


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

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'prequest', 'rnu' )
    ->fields(
            Field::inst( 'date' )
                ->validator( 'Validate::dateFormat', array(
                    "format"  => Format::DATE_ISO_8601,
                    "message" => "Please enter a date in the format yyyy-mm-dd"
                ) )
                ->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
                ->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
        Field::inst( 'name' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'cell' ),
        Field::inst( 'email' ),
        Field::inst( 'prayer' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'contact' ),
        Field::inst( 'privacy' )

    )
    ->process( $_POST )
    ->json();
?>

allan · February 2017

Here is the php file.

Remove all of the HTML stuff from it. It should just be PHP in there. The files in the examples (/examples/php/) show what would typically be the contents of the file.

That would be making the JSON invalid on return.

I'd check, but the link above don't appear to be loading for me at the moment I'm afraid. Interestingly its not even timing out - it just tries to load forever!

Allan

wjm69 · February 2017

The link should be ok.
I pulled the html out of the script.

But no table.
Thanks, Wiley

allan · February 2017

The HTML doesn't appear to be valid in the page that is now loading. It is:


<!doctype html>

<html>

<head>  
<title>View Current Prayer Requests</title>  
<script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="../DataTables/datatables.min.js"></script>
<script type="text/javascript" src="../DataTables/Editor-2017-02-26-1.6.1/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>


<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../DataTables/datatables.min.css" rel="stylesheet" type="text/css">
<link href="../DataTables/Editor-2017-02-26-1.6.1/css/editor.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="../DataTables/Buttons-1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
</head>  

<body>  
</body>
</html>

<script>
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "prq.php",
        table: "#mytable",
        idSrc: "rnu",
        fields: [ {
                label: "date:",
                name: "date",
                type: "datetime"
            }, {
                label: "name:",
                name: "name"
            }, {
                label: "cell:",
                name: "cell"
            }, {
                label: "email:",
                name: "email"
            }, {
                label: "prayer:",
                name: "prayer"
            }, {
                label: "contact:",
                name: "contact"
            }, {
                label: "privacy:",
                name: "privacy"
            }
        ]
    } );
 
    $('#mytable').DataTable( {
        dom: "Bfrtip",
        ajax: "prq.php",
        columns: [
                        
            { data: "date" },
            { data: "name" },
            { data: "cell" },
            { data: "email" },
            { data: "prayer" },
            { data: "contact" },
            { data: "privacy" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );
    
</script>
        



<!--<table id="mytable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>cell</th>
            <th>email</th>
            <th>prayer</th>
            <th>contact</th>
            <th>privacy</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>date</th>
            <th>name</th>
            <th>cell</th>
            <th>email</th>
            <th>prayer</th>
            <th>contact</th>
            <th>privacy</th>
        </tr>
    </tfoot>
</table> -->

i.e. there is not table tag and you are closing the html document before actually using the script.

Have a look at the HTML that Generator creates to see how it might look for a working page.

Allan

wjm69 · February 2017

Sorry, I thought you wanted me to remove html from the script.

allan · February 2017

Up above you, immediately after:

Here is the php file.

That PHP file shouldn't have all that HTML in it. It should just be PHP. Generator will show you an example of PHP as well.

Allan

wjm69 · February 2017

OMG, Thank you so much.
I spent hours working on this.
Just a few comments from you and I got it working, or should I say you did.

This is an amazing tool. I will now start playing with customization.
I will purchase it today.

Thank YOU !!!!

I have been trying to use Editor. I have valid JSON but it wont load the data.

I have been trying to use Editor. I have valid JSON but it wont load the data.

Answers

Howdy, Stranger!

Categories

DataTables

I have been trying to use Editor. I have valid JSON but it wont load the data.

I have been trying to use Editor. I have valid JSON but it wont load the data.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables