inline editor hangs after submit

seth9009

ok so i've setup the inline editor and everything works fine, but it seems i have a problem with my custom server side scripting i guess, when i do validation and there is an error i return a JSON like this

{"fieldErrors":[{"name":"title","status":"No empty values."}],"data":[]}

but nothing happens the input still hangs on loading and does nothing ... any ideas ?

P.S. i'm using the latest editor and datatables

kthorngren

I'm new to this and have the same types of issues but will give you my guesses. I don't think you need the data object. The only other thing I can think of is to make sure "title" matches filed name in the Editor config. For example do you have something like "word.title"?

HTH
Kevin

seth9009

Hey Kevin,

I have tried without data too .. but same result .. and yes the title is the name of the edited field .. really odd because i'm following the docs ... wha the heck i'm doing wrong ..

i've even watched the examples on website in google chrome dev tools to see the json response and is exactly as mine .. of course except the field name but on my end it does not work ..

seth9009

P.S. i have a custom server side script not using the one that editor provides but if the JSON is valid and exactly as it should .. it should not be a problem i guess ...

kthorngren

I would start by posting your Editor init code.

I also use a custom backend and it works fine. Of course it took awhile to get everything right :-)

Kevin

seth9009

so if you have a field error it works ok on your side ? can u share your inline editor code ? here is mine ..

    var editor = new $.fn.dataTable.Editor({
      ajax: function(method, url, data, onSuccess, onError) {

        var formData = {};
        formData['inlineAjax'] = 1;
        formData['tableName'] = '<?php echo htmlencode($tableName) ?>';
        $.each(data['data'], function(index, value) {
          formData['recordNum'] = index;
          $.each(value, function(i, v) {
            formData['fieldName'] = i;
            formData['value'] = v;
          });
        });

        $.ajax({
          'type': 'POST',
          'url': "<?php echo $_SERVER['REQUEST_URI']; ?>",
          'data': formData,
          'dataType': 'json',
          'cache': false
        });

      },
      table: '.data.table',
      fields: <?php echo $editorColumns; ?>,
      formOptions: {
          inline: {
              onBlur: 'submit'
          }
      }
    });

seth9009

P.S. can u share your returned JSON on field error too if possible, thanks!

kthorngren

I see one difference. Here is my JSON response:
{fieldErrors: [{status: "Duplicate Contact Center name", name: "main.name"}]}

No quotes around status and name. This is copied from the Chrome Dev Tools.

Kevin

allan

No quotes around status and name.

That's not valid JSON if that is the raw data from the server. However, if that was the issue, you'd be getting an error stating that.

It sounds like there is a Javascript error occurring, but we'd really need a link to the page to be able to help debug and identify the issue.

Allan

seth9009

Hey Kevin, as Allan said not having quotes around the key of JSON is not valid response ... however i've found out what the problem was and why i did not get any error nothing ..

in my code i have this

`var editor = new $.fn.dataTable.Editor({
ajax: function(method, url, data, onSuccess, onError) {

var formData = {};
formData['inlineAjax'] = 1;
formData['tableName'] = '<?php echo htmlencode($tableName) ?>';
$.each(data['data'], function(index, value) {
  formData['recordNum'] = index;
  $.each(value, function(i, v) {
    formData['fieldName'] = i;
    formData['value'] = v;
  });
});

$.ajax({
  'type': 'POST',
  'url': "<?php echo $_SERVER['REQUEST_URI']; ?>",
  'data': formData,
  'dataType': 'json',
  'cache': false
});`

however i'm missing the onSuccess and onError ... now the updated code looks like this

` var editor = new $.fn.dataTable.Editor({
ajax: function(method, url, data, onSuccess, onError) {

        var formData = {};
        formData['inlineAjax'] = 1;
        formData['tableName'] = '<?php echo htmlencode($tableName) ?>';
        $.each(data['data'], function(index, value) {
          formData['recordNum'] = index;
          $.each(value, function(i, v) {
            formData['fieldName'] = i;
            formData['value'] = v;
          });
        });

        $.ajax({
          'type': 'POST',
          'url': "<?php echo $_SERVER['REQUEST_URI']; ?>",
          'data': formData,
          'dataType': 'json',
          'cache': false,
          success: function(json) {
            onSuccess(json);
          },
          error: function (xhr, error, thrown) {
            onError(xhr, error, thrown);
          }
        });

`

and now it works fine ...

thank you Kevin and Allan for taking the time to check it out!