Manipulating pagetable field markup with Jquery

[Juergen]

Hello @all,

I use a pagetable field for events as children. For better visibility for active and cancelled events I use Jquery to manipulate the output of the pagetable field. Active events are green and cancelled events are red (see screenshot)

This is the Jquery code snippet:

jQuery(document).ready(function() {
$("#wrap_Inputfield_singleeventtable table tbody tr[data-filter*='aktiv'] td:nth-child(2) ul li").wrapInner('<span class="uk-badge active"></span>');
$("#wrap_Inputfield_singleeventtable table tbody tr[data-filter*='abgesagt'] td:nth-child(2) ul li").wrapInner('<span class="uk-badge cancelled"></span>');
});

This works well until I open a childpage via a link in the modal. After closing the modal the pagetable will be updated via Ajax. This is the point where the ready function has no longer impact on the manipulation.

I am not very familiar with coding Jquery. Has anyone an idea which event could be triggered after Ajax update to manipulate the markup once more or if there is a better solution than Jquery ready function in this case.

Best regards

[LostKobrakai]

How about hooking InputfieldPageTableAjax::checkAjax (and/or probably InputfieldPageTable::renderTable) and skipping all that hackish jquery?

[Robin S]

Simplest way is to put your jQuery into a function and call it on DOM ready and also on ajaxComplete:

$(function() {
    myPageTableFunction();
});

$(document).ajaxComplete(function() {
    myPageTableFunction();
});

 

But you could use a hook rather than the jQuery approach:

$this->addHookAfter('Fieldtype::markupValue', function($event) {
    $field = $event->arguments('field');
    $page = $event->arguments('page');
    if($field->name == 'my_text_field' && $page->template->name == 'my_pagetable_template') {
        $text = $event->return;
        if($text == 'aktiv') $event->return = "<span class='uk-badge active'>$text</span>";
        if($text == 'abgesagt') $event->return = "<span class='uk-badge cancelled'>$text</span>";
    }
});

 

[Juergen]

10 hours ago, Robin S said:

$this->addHookAfter('Fieldtype::markupValue', function($event) { $field = $event->arguments('field'); $page = $event->arguments('page'); if($field->name == 'my_text_field' && $page->template->name == 'my_pagetable_template') { $text = $event->return; if($text == 'aktiv') $event->return = "<span class='uk-badge active'>$text</span>"; if($text == 'abgesagt') $event->return = "<span class='uk-badge cancelled'>$text</span>"; } });

This hook works well on page load, but not after update of the pagetable field It is the same problem as the Jquery solution.

I have replaced my Jquery manipulation with this hook

[Robin S]

17 minutes ago, Juergen said:

This hook works well on page load, but not after update of the pagetable field

The hook needs to be in /site/init.php, not /site/ready.php

[Juergen]

Yep, this was the mistake!!!!!! Now it works as expected. Thousand thanks!!!!