LostKobrakai

InputfieldChosenSelect

Recommended Posts

Thanks LostKobrakai,  I was trying to make it work with a Text Field instead of a Page Field. :-[  Working like a charm and I love it.  Thanks again.

Share this post


Link to post
Share on other sites

# Small Note
Installing the module via Somas ModulesManager (Lightbox) will only install InputfieldChosenSelect but not InputfieldChosenSelectMultiple. Would be helpful to have a note in the description and/or the error note (if InputfieldChosenSelect is selected for a multi Page Field) that this should be done manually.

Share this post


Link to post
Share on other sites

Updated the module with a newer chosen release (security related) and fixed the hardcoded admin location in the warning about wrongly configured fields.

@kixe

There's already a warning if you're using a multi-page field with the wrong inputfield (because it changed from the first versions of the module). I've added a note about installing it beforehand. But there's also no * in the inputfield select for the field, which should indicate that the inputfield is not meant to be used for a multi page field.

  • Like 1

Share this post


Link to post
Share on other sites

@LostKobrakai - see issue here: https://processwire.com/talk/topic/13164-http-error-500-when-opening-some-template-pages/

Described issue happens when script reaches allowed memory limits. I guess it is because ChosenSelect fails to handle too much pages (20000 pages in m case). Anyway, when I've changed inputfield to PageAutocomplete - issue dissapeared.

Share this post


Link to post
Share on other sites

That's expected. The chosen library was created to be a seemless enhanced select field (meaning it will be fully useable without js), which is why it does not have any ajax capabilities and therefore has the same problem as all other non ajaxy inputfields when loading a ton of pages.

  • Like 1

Share this post


Link to post
Share on other sites

Just a heads up that the newest version (ProcessWire 3.0.22 devns) breaks some things, one of which is module settings fields on some modules, this being one of them (the Placeholder Text field will not save any value). (Still looking into the cause and hope to discover fix soon as it also affects my inputfield modules).

**This is now fixed in 3.0.23 devns**

Edited by Macrura
issue resolved
  • Like 2

Share this post


Link to post
Share on other sites

thank you lostkobrakai, awesom module!

suggestion: could you add a css rule that hides the select input right from the beginning? it is hidden afterwards via jquery anyhow but as long as it is visible it leads to some ugly display of the unstyled select field.

do you understand what i mean? :)

Share this post


Link to post
Share on other sites

Chosen is a progressive enhancement for the plain select, which is why it doesn't do anything to the select until it's started by javascript. That behaviour is on purpose.

Share this post


Link to post
Share on other sites

hi lostkobrakai,

i think you didn't get me... see this screencast. i think it is much nicer to hide the select via css (after the reload) than having it show up and hide it afterwards:

chosen.gif

anyhow... if you do not like this enhancement i'll just leave my line css in place. but i don't see a reason not to add this by default for every chosen input field

#Inputfield_my_chosen_select { display: none; }

 

Share this post


Link to post
Share on other sites

I fully understand. Hiding the select essentially means the input is unusable if javascript does not work for whatever reason. That's exactly what you want to prevent with any progressive enhancement. It's true, that in the context of the backend it might not be a pressing issue, but I'm not really convinced that showing nothing before js kicks in is much better than showing the original select field. There will always be a layout update.

Share this post


Link to post
Share on other sites

Well you could hide with CSS add a CSS animation to unhide after a few seconds, which would ensure the select to be visible (in theory). Because of the few seconds delay the JavaScript will probably make changes to the DOM so the original select won't be visible. I've used this tecnhique in a site with a loader, to remove the loader even if there's something with JavaScript.

Anyway, I think this kind of FOUC doesn't matter too much in an admin.

  • Like 1

Share this post


Link to post
Share on other sites

I'm not sure if it works correctly, but by a quick glance in the code FieldtypeSelectExtOptions should let you choose InputfieldChosenSelect if installed.

  • Like 2

Share this post


Link to post
Share on other sites
20 hours ago, LostKobrakai said:

I'm not sure if it works correctly, but by a quick glance in the code FieldtypeSelectExtOptions should let you choose InputfieldChosenSelect if installed.

Nice, I am installing the module right now!

How come it cames in 2 separates modules? I see  InputfieldChosenSelect and InputfieldChosenSelectMultiple in my new modules list.

Share this post


Link to post
Share on other sites

I'm not sure what exactly you mean. It should show the selectable items and filter them if you start typing.

Share this post


Link to post
Share on other sites
7 minutes ago, LostKobrakai said:

I'm not sure what exactly you mean. It should show the selectable items and filter them if you start typing.

oh yeah, i was expecting to see the search bar and icon but that's only on single selects not multiple.

Share this post


Link to post
Share on other sites

Is it somehow possible to use this in the frontend? (I'm new to PW, sorry for the question) .

Feature Request: Also, i have the multiple field using pages that have children (nested categories). Would it be possible to visually clarify this relation? Right now all the pages are listed (which is a good thing) but the user can't tell the difference between main categories and sub categories…

BTW, love your module, it's the easiest to use to select relations imho.

Share this post


Link to post
Share on other sites
16 minutes ago, noelboss said:

Is it somehow possible to use this in the frontend? (I'm new to PW, sorry for the question) .

Feature Request: Also, i have the multiple field using pages that have children (nested categories). Would it be possible to visually clarify this relation? Right now all the pages are listed (which is a good thing) but the user can't tell the difference between main categories and sub categories…

BTW, love your module, it's the easiest to use to select relations imho.

Hi @noelboss

You can play with "Label field" options. Select Custom format and put something like {parent.title}.

Are you talking about front end editing? 

 

Share this post


Link to post
Share on other sites

Then i will also get the parent of all categories, and it's still not visually clear:

  • Categories - Cat 1
  • Categories - Cat 2
  • Cat 1 - Child Cat 1

I'm talking about using the input type in the frontend for editing yes, like in a firm that I build and using the type as input. I'm no yet sure how to do it the PW way.

Share this post


Link to post
Share on other sites

Frontend editing implies the native processwire functionality for that, not apropos building your own forms;
when you build your own forms you can use any jquery plugins that you want, so you can just load the chosen assets and init the field on your form.

Share this post


Link to post
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


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      Password Generator
      Adds a password generator to InputfieldPassword.

       
      Usage
      Install the Password Generator module.
      Now any InputfieldPassword has a password generation feature. The settings for the generator are taken automatically from the settings* of the password field.
      *Settings not supported by the generator:
      Complexify: but generated passwords should still satisfy complexify settings in the recommended range. Banned words: but the generated passwords are random strings so actual words are unlikely to occur.  
      https://modules.processwire.com/modules/password-generator/
      https://github.com/Toutouwai/PasswordGenerator
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
    • By matjazp
      A module for managing files and folders. Supports creating, opening (e.g. viewing, playing, editing), renaming, moving, copying, deleting and searching for files. You can also view and change (not supported on Windows) file and directory permissions. 
      https://github.com/matjazpotocnik/ProcessFileManager

      The author of FileManager component is (c) 2006 - 2018 Gerd Tentler, http://www.gerd-tentler.de/tools/filemanager/. I modified it to work with ProcessWire as a module. Please see license files on usage in commercial projects!
    • By Robin S
      An inputfield for displaying markup editable via CKEditor.
      The module is intended for use with the Form Builder module. Allows blocks of static text to be included within a form, which can be edited in the form settings using CKEditor.
      Usage
      Install the Markup CKEditor module.
      In the Form Builder module settings, add "MarkupCKEditor" to "Inputfield types to use with FormBuilder".
      In your form settings, add a new field of type "Markup CKEditor". Enter the text you want to show in this field using "Markup Text" on the "Details" tab.
      Screenshots


       
      http://modules.processwire.com/modules/inputfield-markup-ckeditor/
      https://github.com/Toutouwai/InputfieldMarkupCKEditor
    • By marcus
      Hi y'all! Long time no see. Here's a little module aiming to help you build accessible websites
      ProcessWire Accessibility Tools
      Download: http://modules.processwire.com/modules/pwat/
      Github: https://github.com/marcus-herrmann/PWAT
      A small, but hopefully growing toolkit for creating accessible ProcessWire sites. Right now it consists of the following little helpers:
      tota11y visualization toolkit by Khan Academy A toggle button to see view site in grayscale. The w3c recommends checking your page without colours to see if your design still works (accompanied by a colours contrast check, which is part of tota11y) A link to test your webpage with WAVE, webaim's Web Accessibility eValuation Tool. By the nature of this tool, the website under test must be available online, local hosts won't work.
      Installation
      Once you have downloaded PWAT, go to your module Install page and click "Check for new modules". Find "ProcessWire Accessibility Tools" and click "Install". During installation, PWAT creates a new role 'pwat_user'. To use the Accessibility Tools, you have to grant user this role.
      Following, you can start configuring the module.

      Usage
      PWAT starts with only the tota11y script activated. On the configuration page you can decide
      whether PWAT is visible on admin pages if tota11y is active if the grayscale toggle is active if the link to WAVE will be visible
      Credits
      The amazing tota11y visualization tool by Khan Academy Inspiration: Paul J. Adam's bookmarklets Inspiration: WordPress wa11y Plugin
      Best,
      marcus