Jump to content

InputfieldSelector for multiple pages in lister module


SharQ
 Share

Recommended Posts

Hi, 

I've been trying to figure this out for two days now, but I cant seem to solve the issue without core modification, which is not the good way to go for sure. 

  • I have nested hidden pages under a page called groups, and
  • I customised the page lister module a bit extending the ProcessUser class (called processOffers)
  • I have a custom JSTree module to select from these groups, so multiple selection is possible.

My problem is,when click on the filters, and select groups in the lister module, I can see only the first level (which is a parent directory), but not the nested ones what I need. 

I tried to catch the ajax call in my processOffers module, but seems like the control never reach my module, instead it goes to the InputfieldSelector::renderOpval straight, so I have no way to override it or write a hook or anything. 

One thing I noticed is if I copy the ajax query and paste it into my browser url, it invokes my processOffers class, but it doesn't do it if I do it via ajax!
( ...backend/offers/?InputfieldSelector=opval&field=groups&type=&name=filters)

 > Update: Okay, so this one is because of the X-Requested-With:XMLHttpRequest header. 

How could I list the nested pages as a flat list or

how could I interact with this ajax call to override the result? 

Link to comment
Share on other sites

Okay.... With this, I can override the output in my module. :)

/**
 * ProcessWire Selector Inputfield JS - Override
 *
 * ProcessWire 2.x
 * Copyright (C) 2015 by Ryan Cramer
 * This file licensed under Mozilla Public License v2.0 http://mozilla.org/MPL/2.0/
 *
 * https://processwire.com
 *
 */


$(document).ready(function() {
    
    if( InputfieldSelector ){
    
        //disable XHR header on these fields
        InputfieldSelector.noXHR = ['groups'];

        //disable XHR header
        InputfieldSelector.removeXHR = function(){
            $.ajaxSettings.beforeSend=function(xhr){
                xhr.setRequestHeader('X-Requested-With', {toString: function(){ return ''; }});
            };
        }

        //enable XHR header
        InputfieldSelector.addXHR = function(){
            $.ajaxSettings.beforeSend=function(xhr){
                xhr.setRequestHeader('X-Requested-With', {toString: function(){ return 'XMLHttpRequest'; }});
            };
        }

        //override changefield function
        InputfieldSelector.changeField = function($select) {

            //console.log('changeField'); 
            var $select = $(this); 
            var field = $select.val();
            if(!field || field.length == 0) return;
            if(field == 'toggle-names-labels') return InputfieldSelector.changeFieldToggle($select);
            var $row = $select.parents('.selector-row'); 
            var action = 'opval';
            $row.children('.opval').html(''); 
            $select.attr('data-selected', field); // so we can remember previous value

            var $hiddenInput = $select.parents('.InputfieldSelector').find('.selector-value'); // .selector-value intentional!
            var name = $hiddenInput.attr('name'); 
            var type = $select.attr('data-type'); 

            if(field.match(/\.$/)) {
                action = 'subfield';
                if(field.indexOf('@') > -1) field = field.substring(1, field.length-1); 
                    else field = field.substring(0, field.length-1); 
                $row.addClass('has-subfield'); 
            } else if(field.match(/\.id$/)) {
                field = 'id';
                action = 'opval';
                type = 'selector';
            } else if($select.is(".select-field")) { 
                $row.children('.subfield').html(''); 
                $row.removeClass('has-subfield'); 
            }

            //on certain fields disable XHR
            if( -1 != InputfieldSelector.noXHR.indexOf(field) ){
                InputfieldSelector.removeXHR();
            }

            var url = './?InputfieldSelector=' + action + '&field=' + field + '&type=' + type + '&name=' + name; 
            var $spinner = $(InputfieldSelector.spinner); 

            $row.append($spinner); 

            $.get(url, function(data) {	
                $spinner.remove();
                var $data = $(data); 
                $data.hide();

                if(action == 'opval') {
                    var $opval = $row.children('.opval'); 
                    $opval.html('').append($data);
                    $opval.children(':not(.input-or)').fadeIn('fast'); 

                    //$data.fadeIn('fast');
                    InputfieldSelector.changeAny($select);
                    var $ac = $opval.find(".input-value-autocomplete"); 
                    if($ac.length > 0) InputfieldSelector.setupAutocomplete($ac, field, name); 
                } else {
                    var $subfield = $row.children('.subfield');
                    $subfield.html('').append($data); 
                    $data.fadeIn('fast'); 
                    //$row.children('.subfield').html(data); 	
                }

                InputfieldSelector.normalizeHeightRow($row); 

                //ensure to add XHR back in
                InputfieldSelector.addXHR();

                // this ensures that datepickers don't get confused with each other
                $row.closest('.InputfieldContent').find(".hasDatepicker").datepicker('destroy').removeAttr('id').removeClass('hasDatepicker'); 
            }); 
        };
    
    }
    
}); 
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...