Sensible way of realizing browsing in modals


#1

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:

        $(this).atkCreateModal({
            "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:

          myCurrentModal.content({
            "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
Philipp


#2

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() {
    $('.atk-modal.active').on('click', '.eoo-data-item', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $('.atk-modal.active .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.


#3

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

      result = $('#'+response.id).replaceWith(response.html);
      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: '+ response.id);

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


#4

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.