Sensible way of realizing browsing in modals


Hi there,

Lets say I have a page tours.php which I can open inside a modal passing the uri parameter. Some JS code doing this would be:

            "uri": "tours.php?id="+$(this).attr("data-id")+"\x26render_in_modal=1",
            "title": "",
            "mode": "json",
            "uri_options": []

This opens a modal, the page tours.php returns JSON encoded data, this works fine.

Now there is a link to a Group inside this, and what I want is that linked page to open in the current modal. I am sure this is not hard, but my JS or that late time of the day permit success :slight_smile:

So in pseudo-code:

            "uri": "groups.php?id=58\x26render_in_modal=1",
            "title": "",
            "mode": "json",
            "uri_options": []

Hope you get what I mean, and thanks for a push in the right direction.

Best regards


The answer seems to be the .api() function of SUI of course. Its also used by some atk functions like modal and jsReload.

$.fn.inModalBrowsing = function() {
    $('').on('click', '.eoo-data-item', function(event) {
        $(' .atk-dialog-content').api({
            url: eooConfig.url+$(this).attr("href")+"\x26render_in_modal=1",
            on: 'now',

The only thing bothering now is some error message when this code is executed:

Unable to replace element with id: atk_eooadminlayout_tourlistandeditpage

This is the top level

of the answer, it does not exist in the original modals’ HTML.

So I will read some SUI JS and see if theres a restriction that the top level element has to exist already or so.


Hi there,
its inside ATKs ApiService, line 75ff:

      result = $('#';
      if (!result.length) {
        //TODO Find a better solution for long term.
        //Need a way to gracefully abort server request.
        //when user cancel a request by selecting another request.
        console.log('Unable to replace element with id: '+;

So It seems to use .api() to replace content the top-level element has to keep the same ID. Will check that.


Yes, new content’s top level html element needs to have the same ID as the old content’s top level element, then it works.