Developing (v7+)

Two page_selectors on a single form

Permalink June 26, 2014 at 8:45 PM

I had the need for two page selectors in a single form, but the last one was always the one that gets updated after the selection. The first callback seems to get redefined before the form is rendered. A workaround (w/o touching core files) is to specify your own callback for each call to selectPage() and then store the resulting ccm_selectSitemapNode function in your own var. Hopefully an update to C5 in the future will save having to do this and will break the code below:

<?php
   $ps = Loader::helper('form/page_selector');
   echo $form->label('myID1', t('Choose page #1'));
   print $ps->selectPage('myID1',($myID1 > 1 ? $myID1 : 1), 'myFunction1');
?>
<script type="text/javascript">
APP = APP ? APP : {};
// save the callback before the second selectPage() call redefines it
APP.ccm_selectSitemapNode1 = ccm_selectSitemapNode;
</script>
<?php
   echo $form->label('myID2',t('Choose page #2'));
   print $ps->selectPage('myID2',($myID2 > 1 ? $myID2 : 1), 'myFunction2');
?>
<script type="text/javascript">

Viewing 15 lines of 45 lines. View entire code block.

 
<?php
   $ps = Loader::helper('form/page_selector');
 
   echo $form->label('myID1', t('Choose page #1'));
   print $ps->selectPage('myID1',($myID1 > 1 ? $myID1 : 1), 'myFunction1');
?>
<script type="text/javascript">
APP = APP ? APP : {};
 
// save the callback before the second selectPage() call redefines it
APP.ccm_selectSitemapNode1 = ccm_selectSitemapNode;
</script>
<?php
   echo $form->label('myID2',t('Choose page #2'));
   print $ps->selectPage('myID2',($myID2 > 1 ? $myID2 : 1), 'myFunction2');
?>
<script type="text/javascript">
APP.ccm_selectSitemapNode2 = ccm_selectSitemapNode;
 
// save whichever anchor gets clicked
$('a.ccm-sitemap-select-page').bind('click', function(e) {
   APP.inputname = $(e.target).parent().find('input#[type="hidden"]').prop('name');
   APP.el = $(e.target);
});
 
// redefine this global called by cmm.app.js
ccm_selectSitemapNode = function(cID, cName) {
   if(APP.inputname === 'myID1') {
      APP.ccm_selectSitemapNode1(cID, cName);
   }
   if(APP.inputname === 'myID2') {
      APP.ccm_selectSitemapNode2(cID, cName);
   }
};
 
function myFunction1(myID1, name) {
   var context = APP.el.parent();
   $('input#[name=\'myID1\']').val(myID1);
   $('div.ccm-summary-selected-item-inner', context).html('<strong class="ccm-summary-selected-item-label">' +
      name + '</strong>');
 
   window.console && console.log('myFunction1 called');
}
 
function myFunction2(myID2, name) {
   var context = APP.el.parent();
   $('input#[name=\'myID2\']').val(myID2);
   $('div.ccm-summary-selected-item-inner', context).html('<strong class="ccm-summary-selected-item-label">' +
      name + '</strong>');
 
   window.console && console.log('myFunction2 called');
};
</script>

hutman replied on Jun 27, 2014 at 12:58 pm Permalink Reply

What type of form are you using this on and what version of c5?

I have used this on a block form and a dashboard page with no need for extra javascript within the page. As long as the ID of the elements are different it should update the correct one.

dennismoore replied on Jun 27, 2014 at 4:41 pm Permalink Reply

It was an add/edit form for a custom block in C5 v.5.6.3.1

hutman replied on Jun 27, 2014 at 7:11 pm Permalink Reply 1 Attachment

I created a quick package that has a block in it that has 2 page selectors, they stay separate and seem to work fine with 5.6.3.1 which is the newest release.

I hope that this can help you, your code looks like it is right though.

dennismoore replied on Jun 27, 2014 at 9:58 pm Permalink Reply

Your example works but you're not trying to do anything with js. Change your edit.php to below and it stops working:

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$pageSelector = Loader::helper('form/page_selector');
?>     
<div class="ccm-ui"> 
     <div class="control-group">
     <label class="control-label">Page 1</label>
     <div class="controls">
               <?php echo $pageSelector->selectPage('linkCID', $linkCID, 'ccm_selectSitemapNode'); ?>
     </div>
     </div>
     <div class="control-group">
     <label class="control-label">Page 2</label>
     <div class="controls">
               <?php echo $pageSelector->selectPage('testCID', $testCID, 'myfn1'); ?>

Viewing 15 lines of 26 lines. View entire code block.

 
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$pageSelector = Loader::helper('form/page_selector');
?>     
<div class="ccm-ui"> 
     <div class="control-group">
     <label class="control-label">Page 1</label>
     <div class="controls">
               <?php echo $pageSelector->selectPage('linkCID', $linkCID, 'ccm_selectSitemapNode'); ?>
     </div>
     </div>
 
     <div class="control-group">
     <label class="control-label">Page 2</label>
     <div class="controls">
               <?php echo $pageSelector->selectPage('testCID', $testCID, 'myfn1'); ?>
     </div>
     </div>
</div> 
 
<script type="text/javascript">
function myfn1(testCID, name) {
   $('input#[name=\'testCID\']').val(testCID);
   $('div.ccm-summary-selected-item-inner').html('<strong class="ccm-summary-selected-item-label">' +
      name + '</strong>');
   console.log('myfn1 called');
}
</script>

hutman replied on Jun 28, 2014 at 11:24 am Permalink Reply

I see what you are trying to do, it's not that the PageSelector isn't working, it's that the javascript callback isn't working. After looking at the core I don't know if there is any way to change that, but I did find that you could do something like below so that you can execute a call on the correct page selector.

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$pageSelector = Loader::helper('form/page_selector');
?>     
<div class="ccm-ui"> 
     <div class="control-group">
     <label class="control-label">Page 1</label>
     <div class="controls" id="linkCID">
               <?php echo $pageSelector->selectPage('linkCID', $linkCID, 'pageSelectFunction'); ?>
     </div>
     </div>
     <div class="control-group">
     <label class="control-label">Page 2</label>
     <div class="controls" id="testCID">
               <?php echo $pageSelector->selectPage('testCID', $testCID, 'pageSelectFunction'); ?>

Viewing 15 lines of 27 lines. View entire code block.

 
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$pageSelector = Loader::helper('form/page_selector');
?>     
 
<div class="ccm-ui"> 
     <div class="control-group">
     <label class="control-label">Page 1</label>
     <div class="controls" id="linkCID">
               <?php echo $pageSelector->selectPage('linkCID', $linkCID, 'pageSelectFunction'); ?>
     </div>
     </div>
 
     <div class="control-group">
     <label class="control-label">Page 2</label>
     <div class="controls" id="testCID">
               <?php echo $pageSelector->selectPage('testCID', $testCID, 'pageSelectFunction'); ?>
     </div>
     </div>
</div>
 
<script type="text/javascript">
     pageSelectFunction = function(cID, cName) {
     /* in order for this to work the field name needs to match the ID of the controls wrapper */
     var fieldName = $(ccmActivePageField).attr("dialog-sender");
     $("input#[name='"+fieldName+"']").val(cID);
     $("#"+fieldName+" .ccm-summary-selected-item-inner").html('<strong class="ccm-summary-selected-item-label">' + cName + '</strong>');
     alert(fieldName+' updated');
     }
</script>

Forums

Developing (v7+)

Two page_selectors on a single form

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?