using ajax method... url: "/ajax/arrays.txt" as a server-side?

chessGuru64

@kthorngren,

In his ajax data option example:
http://live.datatables.net/hopepicu/1/edit

Does this example work for both client and server-side?
How is url: "/ajax/arrays.txt" getting the information? Is this snippet tied to a backend somewhere or a separate http: site?

I see if you comment it out and press refresh the table only shows the data (John Smith).
Anyway, I am trying to make my webpage use ajax.reload() but have NO idea where to store a link as a .text file. Webhost won't let me save anything as .text.

Sample project link if needed: https://datatables-ajax.000webhostapp.com/

kthorngren

The example is using the backend scripts available via the Datatbles JS Bin environment as described here:
https://datatables.net/manual/tech-notes/9

I don't remember the context of creating that example but its not using ajax.relaod(). When the reload button is clicked it is fetching the new data via ajax then clearing the existing Datatable and re-populating it using rows.add(). I would not think that this code would be useful in a server side processing Datatable.

You can experiment with server side scripts using one of the base JS Bin environments from here:
https://datatables.net/manual/tech-notes/9#Server-side-processing

Looks like you are trying to use ajax.reload() in the ajax methods you have for adding, editing or deleting rows.

When I try adding a record I get this error:
Uncaught TypeError: Cannot read property 'reload' of undefined

You have $('#example').ajax.reload(); but it should be $('#example').DataTable().ajax.reload();

When Editing it seems like the whole page is reloaded. Haven't look to see why that it.

There is a syntax error reported on the browser's console:
Uncaught SyntaxError: Unexpected token && (index):195

I noticed you are using table.ajax.reload();. I'm guessing you are getting an error indicated table is not found. I think its due to the scope of the table variable is in the $(document).ready(function() ready function where you init Datatables and not in the $(document).on('click','.delete_btn',function () events you created. I would move all the events into the same document ready function. Or, to use the table variable you will need to use this in each of the click events: var table = $('#example').DataTable();.

HTH,

Kevin

kthorngren

Here are a couple examples with different mechanisms to get the row data of the clicked button:
http://live.datatables.net/qemodapi/1/edit
http://live.datatables.net/xijecupo/1/edit

Notice they are inside the document ready function. So they can use the table variable instead of getting the API using var table = $('#example').DataTable();.

Kevin

chessGuru64

So it works it just seems to freeze afterwards. Like you cant click on the search box. Interesting! But glad I got it working.

kthorngren

No, ajax.reload() will reload the data from your ajax URL defined here:

"ajax": {
"url": "server.php",
"type": "POST",
},

It is all you need in your success functions of your ajax methods for adding, editing, deleting. If you want to stay on the same page when reloaded you will use this form of the command $('#example').DataTable().ajax.reload( null, false );.

Kevin

kthorngren

So it works it just seems to freeze afterwards. Like you cant click on the search box

You may have an error that stopped Javascript. Check your browser's console.

Kevin

chessGuru64

Ok. Well it adds now automatically (you can see it +1 on showing entries). it just "freezes" afterwards, (i.e you cannot click anything).

if you do a normal location.reload(); that problem does not happen like here:

EDIT: Just saw your comment. Ok will do. Thanks.

chessGuru64

I fixed the 3 JQuery errors. I did see this message in my console?
[Violation] 'load' handler took 2055ms on line 4: null==d?void 0:d))},attrHooks:{type:

Would this effect my refresh?

===================

chessGuru64

so in very good news, I just got both the edit and delete both working! the add for whatever reason still "freezes". i will look more into this tomorrow.

I am getting random console errors like these:

[Violation] 'setTimeout' handler took 85ms
[Violation] Forced reflow while executing JavaScript took 36ms

They look like processing speed errors potentially.

allan

They aren't errors, but rather warnings. Chrome shows debug information if it thinks a script is taking too long to execute a particular handler. If you link to a page showing that issue I can take a look to see what might be done to speed the handlers up, but sometimes it is unavoidable.

Allan

chessGuru64

https://datatables-ajax.000webhostapp.com/ after pressing add button on bottom-right. I just realized that my page freezes on click of the add button. the slow processing speed and the fact that my page freezes is probably linked due to the fact that I have a modal-boostrap error (it probably "pops" up after add click then does not go away). I have seen something similar to this. I will take a look into this more as well...

chessGuru64

As I thought changing: $('#insert_form').hide(); to $('#insert_form').modal('hide'); got my website to not freeze after adding to database.

Anyway, in regards to the Chrome performance warnings, here is my sample link: https://datatables-ajax.000webhostapp.com/

I could make a another topic post too if you want as this is definitely a separate issue now. Just let me know. Thanks!

chessGuru64

In regards to the warnings, I made a separate topic as this problem is mych different now. My original problem has been solved.

Here is that link:
https://datatables.net/forums/discussion/54136/violation-forced-reflow-while-executing-javascript-took-30ms-violation-settimeout-handler/p1?new=1