Popup Search List in Forms ?

4 Posts
Marcet
5 years ago
4
Topic

Hello all,

I would like to know if there is a way to popup a search list in a modal window in order to populate a field in a form (picking one line) ?
As of now, I've used a Select Dynamic field, but my selection list could potentially grow up to 500 item, so it will become quite hard to find the item to select.

Basically, I'm looking to answer these two questions :

1) How can I display a modal popup (like when you create a field in Seblod) ?
2) How can I get a return value from the popup ?

But may be there is another way ?

Any suggestions ?

Thanks in advance.

####

Salut à tous,

J'aimerai savoir si il y a un moyen d'afficher une fenêtre modale dans laquelle serait affichée une Search List afin de permettre la sélection d'une ligne pour renseigner un champ dans le formulaire ?
Jusqu'à présent, j'utilisais un Select Dynamic, mais ma liste pour la sélection pourrait atteindre 500 éléments à terme et donc ça va devenir difficile de trouver un élément dans ces conditions.

J'aimerai principalement trouver la réponse à ces deux questions :

1) Comment afficher un popup modal (similaire à celui qu'affiche Seblod quand on crée un champ) ?
2) Comment récupérer une valeur de retour depuis un popup ?

Mais peut-être existe t'il une autre alternative ?

Des suggestions ?

Merci d'avance.

Get a Book for SEBLOD
1283 Posts
Bucklash
5 years ago
3
Level 1

Hi

In my form I would:

  1. Create a freetext filed to act as trigger for my modal window... or use button_free but freetext is my preferred way.
  2. Surround your filed using the div fields to create modal markup that is required.
  3. Use chosen.js on the select field.... or select2 etc....
  4. Make sure you load the chosen stuff... it comes with joomla fyi

4 Posts
Marcet
5 years ago
2
Level 2

Hi Bucklash,

Thanks a lot for your answer which helps a lot.
I was not aware of chosen.js which a much better solution than the modal box I had in mind.

As I never used jQuery, I struggled a bit to find my path.
So here is what I've done.

1) I assume jQuery is loaded by default with Joomla ?
I've tested it using a "Script (JS)" field in my form, which gave positive result.

if (window.jQuery)
{
// jQuery is loaded
alert("Yeah!");
}
else
{
// jQuery is not loaded
alert("Doesn't Work");
}


2) "chosen.js" was not loaded by default.
I choose to load it using a custom module which I find to be cleaner than modify my RocketTheme theme.
The code I used to load "chosen.js" is the same found in Joomla Article Manager.

<script src="/media/jui/js/chosen.jquery.min.js?d5b4774e823e9d58911aca2f942a7b50"></script>


Had a hard time figuring out that JCE was wiping out my code when saving, but with the right parameters, it worked.

3) I've used a "Script (JS)" field in the HIDDEN section of my form to load this code when Document Ready.

$("#name_of_my_select_field").chosen();


4) Now I need to style the field as it is not at all like in Joomla (see picture).
But the work is done and I'm happy with it :D

Big THANKS to you, you made my day !

1283 Posts
Bucklash
5 years ago
1
Level 3

I have two fields:

  1. "Chosen Load Files", a beforeRender plugin (from Code Pack)
  2. "Chosen Apply", a Script (JS) field

Load Files:

$document = JFactory::getDocument();
$document->addStyleSheet('/media/jui/css/chosen.css');
$document->addScript('/media/jui/js/chosen.jquery.min.js');<br>

I apply chosen to any field with this class

$('.fr-chosen').chosen({
search_contains: true,
single_backstroke_delete: false,
width: "100%"
});<br>

As for styling.... do what you can :D

I put these fields in to each search form that requires them

4 Posts
Marcet
5 years ago
0
Level 4

Thanks again.
Your method is even better.

And because you're loading the CSS file, styling problem is gone.

Get a Book for SEBLOD