Question

I’m trying to use atk4 in a project started some months ago. This project is a app that has a menu and load pages in a div via ajax. Menu is fixed and never reloaded.
I want to use atk4 to generate new pages and do the database work, leaving what is done as is by the moment.
Pages are generated and loaded ok, but components loaded via ajax are not enhaced, because the document ready event is not fired.
We have an event fired every time an ajax page is loaded in the corresponding div ¿can we call a function or functions from this event to have atk4 js system initialized and new components enhaced?

Our function:

$(document).bind('afterajaxload', function(){
    //here we need to call atk4 js initialization to enhace the ajax loaded page.
})

Thanks (and sorry for my bad english)!!

Answer 1

If you are writing JavaScript function directly into the template, you shouldn’t use standard jQuery construct $(function(){ .. }). This function is only fired once per page.

Agile Toolkit achieves a proper functionality by introducing alternative function $.atk4(function(){ … }) which is properly triggered after AJAX code is loaded. Any which happens to be loaded through AJAX will automatically be fired, so you don’t even need to wrap it.

For developers comfort, if you are writing your code in JavaScript, it’s super easy:

$object->js(true, 'your js here');

here is important note. The “$object” must be directly or indirectly reloaded, otherwise it’s JS code will not be re-executed automatically. You can always see script sequences through inspector/console in your browser.

It’s always suggested to create a library for your JavaScript routine instead of dumping functions into global namespace, but you can read that in JavaScript documentation.