Page selector (block development)

Question

In Concrete 5.6 it was possible to create a JavaScript callback. I would like to know how this can be achieved in 5.7. I want to select a page and then do an ajax call to get the area names from that page.

I took al look at the core files and the option for the callback does not exist anymore. I have used the js method to create the page selector.

<div data-field="entry-link-page-selector" class="form-group">
   <label><?php echo t('Choose Page:') ?></label>
    <div data-field="entry-link-page-selector-select"></div>
</div>

<script>

$('div[data-field=entry-link-page-selector-select]').concretePageSelector({
    'inputName': 'cTargetID'
});

Old way

<?php echo $page_selector->selectPage('cTargetID', $cTargetID, 'pageChange'); ?>

-- update --
In the add.php and edit.php I include form.php. In this file I use the page_selector and the js to bind to the event. Still the event does not trigger the alert for some reason. I used the example as given in the answer below.

<?php
defined('C5_EXECUTE') or die (_("Acccess Denied"));

$al = Core::make('helper/concrete/asset_library');
$colorPicker = Core::make('helper/form/color');
$pageSelect= Core::make('helper/form/page_selector');
?>

<style>
    .ccm-hide{display:none;}
</style>

<div class="subbscribe-form">

    <div class="form-group">
        <?php echo $pageSelect->selectPage('displayPagesCID', $displayPagesCID); ?>
    </div>

</div>


<script>
    Concrete.event.bind('SitemapSelectPage', function(e, data) {
        alert('You selected "' + data.title + '", it\'s cID is ' + data.cID);
    });
</script>

Answer 1

I confirm that the option for the callback is gone which is a bummer frankly but you can easily do it yourself I think with a little bit of javascript.

<?php echo $page_selector->selectPage('cTargetID', $cTargetID); ?>
<script>
$('input[name=cTargetID]').on('change', function() {
    // Do something here
});
</script>

Edit: this doesn't work as the whole selector is removed and re-added through js so the change event is never triggered. Unfortunately I wasn't able to find an alternate solution

Answer 2

In version 7, concrete5 added things called "events". You can see all of the events that are fired when you select a page by opening your developer console and running Concrete.event.debug(true). Once you find the event you want to use, you can hook into it by using Concrete.event.bind for example:

Concrete.event.bind('SomeEvent', function(e, data) {
    // Do Stuff.
});

The event that you're going to want to hook into is SitemapSelectPage, it gives supplies the cID, title, and the sitemap instance.

EDIT: Due to a current core bug, the SitemapSelectPage event bindings get cleared just before the dialog opens, to get around this we just bind to the ConcreteSitemap event and bind there.

Here's a working example:

Concrete.event.bind('ConcreteSitemap', function(e, instance) {

    Concrete.event.bind('SitemapSelectPage', function(e, data) {
        if (data.instance == instance) {
            Concrete.event.unbind(e);

            alert("You've selected a page! " + data.cID);
        }
    });

});