trying to load jsonobject to ajax , console showing unexpected identifier near ajax , any clue

yadav46k

hi all ,

when i load the page only header name is getting displayed . tested my json format it is valid json format as per JSONLint . Any suggestions what might be the issue .

<script
                                src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
                            <link rel="stylesheet"
                                href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></link>

                            <script>
                    $(document).ready(function() {
                        $('#example').DataTable( {
                            "ajax": "#{jsonConversionAction.showDetails()}",
                            dataType: "json",

                            "columns": [
                                { "data": "name" }

                            ]
                        } );
                    } );
                    </script>
                            <table id="example" class="display" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                    </tr>
                                </thead>

                            </table>

colin

Hi @yadav46k ,

It looks like you only have a single column of data, is that correct? Also, I don't understand the Ajax settings, I suspect it should be:

ajax: {
  url: "ajax": "#{jsonConversionAction.showDetails()}",
  dataType: "json"
}

If that doesn't help, could you provide a link to your page or create a fiddle showing the problem, please.

Cheers,

Colin

yadav46k

hi @colin ,

for testing purpose i had taken only one column right now . #{jsonConversionAction.showDetails()} is a java method which will return my JSONObject . is this the problem ?

 $(document).ready(function() {
     $('#example').DataTable({
         "processing": true,
         "serverSide": true,
         destroy: true,

         url: "ajax": '#{jsonConversionAction.showDetails()}',
         dataType: "json",
         "type": "POST",
         "columns": [{
                 "data": "name"
             }

         ]
     });
 });

had made the changes which you had mentioned still it is the same error . One thing i observed is if it is '#{jsonConversionAction.showDetails()}', it is showing the layout of datatable and if it is "#{jsonConversionAction.showDetails()}" page is blank and in console it is showing Uncaught SyntaxError: Unexpected token : and only name is getting displayed , Am i missing any thing here .
please correct me ..

colin

No, if you look at my example, the ajax is an object, with the other options inside. Your one should look like:

$(document).ready(function() {
    $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        destroy: true,
         "ajax": {
            "url":  '#{jsonConversionAction.showDetails()}',
            dataType: "json",
            "type": "POST"
        },
        "columns": [{
                "data": "name"
            }
 
        ]
    });
});

yadav46k

it is showing as** Failed to load resource: the server responded with a status of 404 (Not Found)** it is not identifying my java method here @colin

Should i go with REST API creation ?

colin

I don't understand what this is supposed to be - '#{jsonConversionAction.showDetails()}' . I'm new to JS so it might be valid, but it looks curious to me. If it's supposed to be a function, look at this example here - that may get you going,

Cheers,

Colin

yadav46k

hi @colin ,

tried the way you had specified . The output is coming as attachment , any idea how to parse it . or is there any issue with my code .

 $(document).ready(function() {
  var table = $('#example').DataTable({
    processing: true,
    serverSide: true,
    destroy: true,
    ajax: function(data, callback, settings) {
      var out = '#{jsonConversionAction.showDetails()}';
      setTimeout(function() {
        callback({
          draw: data.draw,
          data: out,
          recordsTotal: 5000000,
          recordsFiltered: 5000000
        });
      }, 5000);
    }
  });
});

allan

Hi,

Could you add:

console.log( typeof out );
console.log( out );

in between lines 7 and 8 in the above code please? Then copy and paste the output on the console into here so we can take a look.

Thanks,
Allan

yadav46k

Hi @allen ,

     Thanks issue has been resolved !! Thanks for the support .