Reloading datatable using ajax triggered by click
Reloading datatable using ajax triggered by click
jcarvalho
Posts: 13Questions: 3Answers: 0
Hi! I have an error of "Invalid JSON response"
When I click in button to send an ajax request to the same method that I use to populate the datatable the first time
code for the button click
$("#tblRecuperarEncomenda tbody").on('click','td button[class^="btnrecenc"]', function(){
alert("click!");
//var coiso = $(this).closest('tr').find('.escondido_artigos').val();
var coiso = '[{"ref":"PRI4223","qtd":"2"},{"ref":"PRI4224","qtd":"0"},{"ref":"PRI4224","qtd":"1"}]';
var coisas =JSON.parse(coiso);
$.ajax({
url: '<?php echo(base_url());?>clientes/getElementosFatura',
type: 'POST',
//dataType: 'json',
data: {coisas},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
$("#linhaFatura").DataTable().ajax.reload();
});
});
The console.log shows the values correctly
the datatable is done like this:
var table = $('#linhaFatura').DataTable({
"ajax": {
"url": "<?php echo(base_url());?>clientes/getElementosFatura",
"type":"POST",
"data":lista,
},
"processing": true,
//"serverSide": true,
"destroy":true,
columns:
[
{ data: "ref" },
{ data: "design" },
//{ data: "qtd" },
{ data: "", render: function ( data, type, row, meta )
{
return "<input type='text' class='form-control txtQdtLinhaFatura' value='"+ row.qtd + "'>";
},
},
{ data: "pvf" },
{ data: "iva" },
{ data: "pvf_total" },
{ data: "desconto" },
{ data: "PVF_Liq_Total" },
{ data: "", render: function ( data, type, row, meta )
{
return "<button class='btn btn-info btn-sm remove-linhafatura'><i class='fa fa-minus'></button>";
},
"bSortable": false
},
],
oLanguage: {
sSearch: "Procurar:",
oPaginate: {
sFirst: "Primeiro",
sLast: "Último",
sNext: "Seguinte",
sPrevious: "Anterior"
},
"sInfo": "A mostrar _START_ até _END_ registos de um total de _TOTAL_ registos",
"sLengthMenu": "Mostrar _MENU_ registos"
},
"iDisplayLength": 25,
sPaginationType : "full_numbers",
});
//obter os totais calculados no servidor
table.on('xhr', function() {
var totais_documento = table.ajax.json();
atualizar_totais_documento(totais_documento);
});
});
The method is like
function getElementosFatura()
{
$linhas_de_encomenda = $this->input->post();
//por causa do recupera encomenda
if (array_key_exists('coisas', $linhas_de_encomenda ))
{
$linhas_de_encomenda = $linhas_de_encomenda['coisas'];
}
//verifica se existem artigos para fatura, se não existir devolve vazio para a datatable linhafatura
if (count($linhas_de_encomenda) == 0 )
{
$linha_a_devolver=array();
$data = array (
'data' => $linha_a_devolver,
'total_pfv' => null,
'total_iva' => null,
'total_documento' => null,
);
echo(json_encode($data,JSON_UNESCAPED_UNICODE));
exit;
}
//obter as referencias de artigos
$referencias ='';
foreach ($linhas_de_encomenda as $key => $value)
{
$referencias .="'" . $value['ref'] ."',";
}
//remover a ultima virgula e adicionar parentesis
$referencias = "(" . substr( $referencias, 0, -1 ) . ")";
$artigos_com_preco = $this->st->getArtigosByRef( $referencias );
//correr o ciclo para fazer o match de qtd e valores por linha
foreach ($linhas_de_encomenda as $key => $value )
{
$linha_a_devolver[] = faz_match_ref_qtd($value['ref'], $value['qtd'],$artigos_com_preco);
}
//calculos de totais
$total_pvf = 0;
$total_iva = 0;
$total_documento = 0;
foreach ($linha_a_devolver as $key => $value)
{
$total_pvf += $value['PVF_Liq_Total'];
$total_iva += $value['PVF_Liq_Total'] * $value['iva']/100;
}
$total_documento = $total_iva + $total_pvf;
//preparar a saida para a datatable #linhaFatura
$data = array (
'data' => $linha_a_devolver,
'total_pvf' => round($total_pvf,2),
'total_iva' => round($total_iva,2),
'total_documento' => round($total_documento,2),
);
echo(json_encode($data,JSON_UNESCAPED_UNICODE));
//die();
//devolver à view os elementos
//$data = array( 'data' => $this->st->getArtigosAjax());
//echo(json_encode($data,JSON_UNESCAPED_UNICODE));
//print_r($data);
}
}
I recall that the method GetElementosFatura is 100% working when I first draw the datatable with ajax, just gives error invalid JSON on update with new data.
What am I doing wrong? Sorry my english, it is not my native language
Many thanks!
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi Colin, I can't do a test case, this part of the code is a small drop in the whole project(SQL Server, MySql, codeigniter,bootstrap) .
I have validated the json output with the tools suggested by datatables.net json lint and the other. Both validated the output json. I have also uncommented //dataType: 'json', in the ajax call but same problem, it says invalid json.
What I do when I first call the datatable is to pass an javascript object array with the keys ref that is the product ID and qtd that is the quantity. For testing I used that array for the click button update datatable to emulate what data should be sent to the ajax call method that is the same used to first build the datatable
Many thanks!
OK, please could you post the ajax that is being returned? Ideally, can you link to your page too?
Colin
Hi Colin, many thanks for your kindness.
Here it goes
payload from FF
{"data":[{"ref":"PRI4223","design":"Anilha PROTOTYPE AL Pratos Pedaleiro 12x8x1 (4pcs)","qtd":"2","pvf":"2.65","iva":"23.00","pvf_total":5.3,"desconto":".00","PVF_Liq_Total":5.3},{"ref":"PRI4224","design":"Aro PROTOTYPE MTB 26 - 28F","qtd":"1","pvf":"55.64","iva":"23.00","pvf_total":55.64,"desconto":".00","PVF_Liq_Total":55.64}]}
JSON separator thing in Firefox
XHRPOSThttp://local.ncpicking.pt/clientes/getElementosFatura
[HTTP/1.1 200 OK 306ms]
I have tried without "data" when doing php json_encode
Thanks for the JSON - everything looks as expected, so we'll need to see this. Are you able to link to your site so we can look, please?
Colin
Hi Colin, sorry for the delay. I am working on it. This project is hosted in my laptop
The button click event handler does this ajax request:
Which you don't seem to do anything with. In the same handler you have:
Which uses this ajax request:
They look similar. Is there a difference between the two?
Is this when clicking the button? Is it for the first ajax request using
data: {coisas}or the second using"data":listafrom Datatables?Kevin
Hi Colin! the payload from FF is the result when I click in the button. I send an javascript array to the ajax call, I named it "coisas" that means things in english.
so on button click I use $.ajax({
url: '<?php echo(base_url());?>clientes/getElementosFatura',
type: 'POST',
//dataType: 'json',
data: {coisas},
})
To try to reload the existing datatable that are lines on an invoice that was saved previously by the salesman.
When I use
"ajax": {
"url": "<?php echo(base_url());?>clientes/getElementosFatura",
"type":"POST",
"data":lista,
}, is when the salesman is building an invoice with the costumer, he selects the articles, the items goes to array lista when a modal is closed and the datatable is correctly populated.
The button that triggers the **coisas ** array is when the salesman wants to retrieve a saved list of articles so he can add more, both calls the method getElementosFatura (get Invoice item elements translated to english)
from the controller clientes (clients translated to english)
What I do is to save in Mysql table an array of itens and want to retrieve then to populate the datatable. What I store in database is this text [{"ref":"PRI4223","qtd":"2"},{"ref":"PRI4224","qtd":"0"},{"ref":"PRI4224","qtd":"1"}], then I convert to JSON var coisas =JSON.parse(coiso); And send to controller clientes/getElementosFatura.
So thats not the Ajax response for
$("#linhaFatura").DataTable().ajax.reload();since that executes after. What is the JSON response for the$("#linhaFatura").DataTable().ajax.reload();request?Kevin
Hi Kevin, when you click the button the response is {"data":[{"ref":"PRI4223","design":"Anilha PROTOTYPE AL Pratos Pedaleiro 12x8x1 (4pcs)","qtd":"2","pvf":"2.65","iva":"23.00","pvf_total":5.3,"desconto":".00","PVF_Liq_Total":5.3},{"ref":"PRI4224","design":"Aro PROTOTYPE MTB 26 - 28F","qtd":"1","pvf":"55.64","iva":"23.00","pvf_total":55.64,"desconto":".00","PVF_Liq_Total":55.64}]}
Because it is just a matter of retrieving some stored items and quantities. The datatable is working only when I add "fresh" items that I am going to choose from a list. I use another datatable only to list articles prices and articles ID's, when the seller finish the selection I grab all the itens and send to clientes/getElementosFatura. That generates JSON and populate the datatable.
When I have stored some itens I want to retrieve those by clicking in the button I grab those itens call clientes/getElementosFatura and got {"data":[{"ref":"PRI4223","design":"Anilha PROTOTYPE AL Pratos Pedaleiro 12x8x1 (4pcs)","qtd":"2","pvf":"2.65","iva":"23.00","pvf_total":5.3,"desconto":".00","PVF_Liq_Total":5.3},{"ref":"PRI4224","design":"Aro PROTOTYPE MTB 26 - 28F","qtd":"1","pvf":"55.64","iva":"23.00","pvf_total":55.64,"desconto":".00","PVF_Liq_Total":55.64}]}. I use those for testing and I have the invalid JSON error.
I have tried $("#linhaFatura").DataTable().clear().destroy() before
$("#linhaFatura").DataTable().ajax.reload();
Sounds like we are at a point of needing to see the problem. Please post a link to your page or a test case.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
The other thing you can try is to collect Debugger for the developers after clicking the button.
Kevin
Hi Colin, many thanks for your kindness.
Here it goes
payload from FF
{"data":[{"ref":"PRI4223","design":"Anilha PROTOTYPE AL Pratos Pedaleiro 12x8x1 (4pcs)","qtd":"2","pvf":"2.65","iva":"23.00","pvf_total":5.3,"desconto":".00","PVF_Liq_Total":5.3},{"ref":"PRI4224","design":"Aro PROTOTYPE MTB 26 - 28F","qtd":"1","pvf":"55.64","iva":"23.00","pvf_total":55.64,"desconto":".00","PVF_Liq_Total":55.64}]}
JSON separator thing in Firefox
XHRPOSThttp://local.ncpicking.pt/clientes/getElementosFatura
[HTTP/1.1 200 OK 306ms]
I have tried without "data" when doing php json_encode
Hi guys! I managed to put the site online
http://novoscanais.ddns.net/tester/
please login with rsismeiro and password ric++
To simulate the error please:
1- click in "Encomendas" on the left pannel
2- then click "Nova Encomenda"
3) Click in "Recuperar Encomenda"
4) In the modal click "Recuperar"
If you want to see the datatable working please click in "Artigo Representado" choose quantity and click in the + sign "the buttons have the disabled class" but for testing it will work
What happens if you change your event handler to this:
What is the JSON response after clicking the button?
Kevin
Hi guys! I managed to put the site online
http://novoscanais.ddns.net/tester/
please login with rsismeiro and password ric++
To simulate the error please:
1- click in "Encomendas" on the left pannel
2- then click "Nova Encomenda"
3) Click in "Recuperar Encomenda"
4) In the modal click "Recuperar"
If you want to see the datatable working please click in "Artigo Representado" choose quantity and click in the + sign "the buttons have the disabled class" but for testing it will work
Hi kthorngren, same thing, invalid Json error
Using the browser's debugger I found the following. when opening the modal you are initializing this Datatable:
This is the request URL:
Request URL: http://novoscanais.ddns.net/tester/clientes/recuperarEncomendaWith this response:
This happens when clicking the
Recuperarbutton:First this ajax request is sent:
This is the request URL:
Request URL: http://novoscanais.ddns.net/tester/clientes/getElementosFaturaThis is the JSON response:
However this is not the response that is causing the Datatables "Invalid JSON Response" error.
The next thing that happens is this:
This
ajax.reload()is using the URL from thedtClientesExistentesDatatable, which is:Request URL: http://novoscanais.ddns.net/tester/clientes/novaEncomenda?_=1592005190451The response is the web page:
This is the response that I've been trying to get you to show. The difference is the
?_=1592005190451added to the URL. This is a mechanism to prevent caching. Take a look at the first response from jLinux in this thread for a good response and a way to eliminate it if needed. I suspect your server is not setup for this and is having an error and simply returning the page. So you can try thecache: trueoption or debug and fix the issue with your server.Kevin
Hi Kevin!
I tried right now the cache:true in the ajax request with no luck 
What a mess
Did you try
cache:truewith this Datatable?If it doesn't work then you will need to debug your server code to fix the problem.
Kevin