EDITOR QUESTION

john.doe1

I am using DataTables Editor.

I have a certain field in the dialog:

{
"label": "Original",
"name": "original",
"type": "text"
},
Once the user has entered something in to this field and gone on to the next field I want to run a PHP script to check if what was entered in to this field is already present in the database.

I have a PHP function isExists() that returns true or false depending on if it's already present in the database but I can't understand how I can link everything up so that it runs once the user has entered something in to this field and gone on to the next field.

Also if it returns true then I need something to appear in the modal in DataTables Editor so the user sees it before he/she adds.

allan

Hi,

What you will likely need is the field().node() method. You can use that to get the input element (for example: $('input', editor.field('original').node())) and attach a standard jQuery event listener. Using that you can then make an Ajax call to the server to check if the input exists or not.

The field().message() or field().error() method could then be used for feedback.

Regards,
Allan

john.doe1

Hi Allan

First thanks for your reply, I really appreciate it!

I've spent nearly 8 hours trying to get something working today but I haven't had much luck so I thought I'd reply!

Here is the code I've written (my JavaScript is not the best by any means, and I think this is where the problem lies).

PHP

<?php
$dbh = new PDO('sqlite:database.db');

$stmt = $dbh->prepare("SELECT COUNT(*) FROM t1 WHERE invoice = :invoice");

foreach ($_POST as $key => $value) {
    $stmt->bindParam("$key", $_POST[$key]);
}

$stmt->execute();

$rows = $stmt->fetch(PDO::FETCH_NUM);

if ($rows[0] > 0) {
    echo json_encode(array('exists' => true));
}

<?php
>
```
?>


JavaScript
--

$('input', editor.field('invoice').node()).change(function() { $.post('checkinsert.php',{invoice: $('input', editor.field('invoice').node())).val()}, function(data){ if(data.exists){ editor.field( 'invoice' ).message( 'This invoice exists in database!' ) } }, 'JSON'); });

```

The problem is that it just doesn't work i.e. when a user puts an invoice number and goes to the next field in the modal, even if the invoice number exists in the database the message doesn't appear.

Thanks a lot for any help.

allan

Hi,

I guess the first question is, does your Ajax POST request get triggered? I wonder if it might be worth trying to bind on keyUp - change can be a bit funny with text inputs, it isn't triggered until you defocus the element.

Allan

john.doe1

Hi Allan

No, even a simple test doesn't work!

<script>
$('input', editor.field('invoice').node()).keyup(function(){
  alert("The text has been changed.");
});
</script>

Any idea?

john.doe1

Also Google Chrome Developer Tools shows an error message:

editor is not defined when I try to use any code that I've put here already. Editor works ok otherwise.

Here is what I've loaded using demo:

        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
        <link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
        <link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">

        <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.tableTools.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/table.accounts.js"></script>

allan

The above code for your simple test looks like it might run before the document has been loaded and the Editor variable created. Might that be the case? You want to put that code immediately after you initialise Editor (i.e. the new $.fn.dataTable.Editor( ... ); code).

Allan

john.doe1

Hi Allan

That's where the problem was!

I had this script running on the index. I moved it to the js/table.accounts.js and it works.

Thanks a lot for your help.

john.doe1

Hi Allan

Once the error is shown I can't seem to clear it. For example if a user puts a string that causes the error, and then clears the string, the error should go, but it doesn't.

I am using '' to clear the error as per the documentation.

      $('input', editor.field('invoice').node()).keyup(function() {
       $.post('checkinsert.php',{invoice: $('input', editor.field('invoice').node()).val()}, function(data){
        if(data.exists){
         editor.field('invoice').error('Invoice exists in database')
        }
        else{
         editor.field('invoice').error('')
        }
       }, 'JSON');
      });

allan

That should work. Can you link me to the page in question so I can take a look and see what is going wrong please.

Allan

john.doe1

Hi Allan

I've some some digging and it works as expected using some standard JavaScript like:

      $('input', editor.field('invoice').node()).change(function() {
      
      var test = "50";
      var currentvalue = $('input', editor.field('invoice').node()).val();
      
      if( test === currentvalue ){
        editor.field('invoice').error('Invoice exists in database')
      }
      else{
        editor.field('invoice').error('')
      }
      });

i.e. the error goes if the user clears the box and puts something else that doesn't cause the error.

But, I still can't get it working on my original code, that checks via the database.

Any idea?

allan

I'm afraid I would need a link to the page showing the error so I can try to debug what is going wrong.

Allan