make an ajax-call on'click' leads to never-ending re-load of table

MadMax76

I have a datatable all set and happy. I set a "on-click event" for the whole table with an alert

$('table tbody').on( 'click', 'td', function () {alert( '__plugName__' + ' ' + 'XSelectInvoice' + ' ' +  table.cell( this, 6 ).data()) } );

still everything happy!

But: I actually want to call a defined function. The function called e.g. per

<a href="#" style="color: #365784; text-decoration: none;" title="Freigeben"    onclick=" ajax_call(...)>

does workl
But I need it in the table, as I am passing table-values to the function:

$('table tbody').on( 'click', 'td', ajax_call('__plugName__', 'XSelectInvoice', table.cell( this, 7 ).data(), table.cell( this, 6 ).data(), ) );

Now the table is loading and without pause (or any chance to click it) reloading without end time after time.
Any idea what causes this behaviour?

Thanks
Max

kthorngren

I would start by looking at what the ajax_call() function is doing. Can you post a link to your page or provide a test case showing the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

MadMax76

For me the interesting point seems to be, that this ajax_call is never called - there is no click event.

I have installed a test possibility:
freigabe.kontura at
User: test@max.at password: Max

In "Erledigte Freigabe" it works with the alert.
In "Erledigte Freigabe 2" the only differene is the other "on-click" event, here it does not work.

Thanks!
Max

MadMax76

And you asked for the ajax_call - here it is:

    static function XSelectInvoice(AjaxResponse &$objResponse, Core &$core, $selectedStapelname, $selectedINP_ID) {
        $client = $core->getClient();

        $plugName = ErledigteFreigabeSetup::PLUGINNAME;
        $instance = $core->getPluginInstance();

        $settings = $core->getSettings();

        $settings[$plugName][$instance]["selectedStapelname"] = $selectedStapelname;
        $settings[$plugName][$instance]["selectedINP_ID"] = $selectedINP_ID;
        $core->setSettings($settings);

        session_start();

        $_SESSION["selectedStapelname"] = $selectedStapelname;
        $_SESSION["selectedINP_ID"] = $selectedINP_ID;

        return $core->xRefresh("all", $objResponse);
    }

kthorngren

I don't see a link to your test case.

And you asked for the ajax_call - here it is:

That looks like it might be your server script? I was suggesting that you look at the ajax_call() function in Javascript. But you are saying that its not called.

I'm confused by your problem description. Please post a link to your test case with specific steps needed to cause the issue.

Kevin

MadMax76

Hi Kevin,

here the test case:
I have installed a test possibility:
http://freigabe.kontura.at/
User: test@max.at password: Max

• "Erledigte Freigabe": works with an alert after on-click
• "Offene Freigabe": the list is build without datatable; here you have to click on the "Lief-Nr" e.g. 310111, then the ajax-call for the static function XSelectInvoice ist called by a "<a href=..."
• "Erledigte Freigabe 2" ist identical to "Erledigte Freigabe", only difference is the other "on-click" event, here it does not work.

Thanks
Max

kthorngren

This is an interesting page. Took awhile to understand how the page is working. Looks like you are fetching, via ajax, each page then using eval(v) to load the page contents.

I'm not sure why the page is continuously being reloaded but it doesn't seem to be specific to Datatables. I'm not sure what is initially calling ajax_call() but that is the place to start troubleshooting.

I placed a breakpoint on lines 51 and 66 in ajax.js to take a look. Maybe you can continue from here by setting those breakpoints. I did find some issues:

1. You are loading jquery.js and datatables.js (and others) multiple times. These should only be loaded once. For example starting at line 42:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="./DataTables/Editor-PHP-1.9.6/js/dataTables.editor.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js" charset="utf8"></script>

Then again at line 86:

    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="/DataTables/Editor-PHP-1.9.6/js/dataTables.editor.min.js"></script>

1. You are getting some Javascript errors when the main page is loaded, like this:

VM36317 dataTables.editor.min.js:14 Uncaught Error: Editor requires DataTables 1.10.7 or newer

In addition to not loading the .js files multiple time you need to load them in order. Looks like you are loading editor.js before datatables.js.

1. When opening Erledigte Freigabe you are getting this Javascript error:

Uncaught ReferenceError: editor is not defined

I wonder if that error is actually stopping this page from reloading continuously.

"Erledigte Freigabe 2" ist identical to "Erledigte Freigabe", only difference is the other "on-click" event, here it does not work.

Its not identical because it doesn't generate the editor is not defined error. Once the page is loaded without something triggers it to call ajax_call() and reload the page. Again I suggest you start with debugging the code that initially calls ajax_call() to see what it is doing. I'm not sure what it is.

Clean up the JS and CSS includes. Use the Download Builder to get the proper files. Clean up the Javascript errors and debug the function that call ajax_call(). Let us know what you find.

Kevin

kthorngren

It just clicked what the problem is. Copy your click event into a Javascript REPL and you will see the problem:

$('table tbody').on( 'click', 'td', ajax_call('ErledigteFreigabe2', 'XSelectInvoice', table.cell( this, 7 ).data(), table.cell( this, 6 ).data() ) );

Take a look here:
http://live.datatables.net/sozucajo/1/edit

It is executing the function when the statement is loaded.

EDIT: Take a look at the browser's console for an error stating ajax_call() can't be found.

You need to use an anonymous function like this:

$('table tbody').on( 'click', 'td',, function () {
        ajax_call('ErledigteFreigabe2', 'XSelectInvoice', table.cell( this, 7 ).data(), table.cell( this, 6 ).data() ) ;
    } );

This way it won't execute until the cell is clicked.

Kevin

MadMax76

you ARE GREAT from my point of view!!!! Problem solved!
Thanks Max

kthorngren

Glad to help. It was an interesting problem to debug

Kevin