[SOLVED] Chained Selects jQuery Plugin

More
10 years 10 months ago #36569 by brandonking
Hello,

I am trying to use FC select field as chained Select fields with jQuery plugin. Please check www.appelsiini.net/projects/chained

Current FC Select field Structure:
Code:
<select id="custom_ucfield21" name="custom[ucfield21]" class="use_select2_lib required select2-offscreen" required="required" aria-required="true" tabindex="-1" style="background-color: rgb(255, 255, 255);"> <option value="">SELECT</option> <option value="1">YES</option> <option value="2">NO</option> </select>

To be able to use select field as chained, we need to add class name(s) for each option.
Code:
<select id="mark" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select id="series" name="series"> <option value="">--</option> <option value="series-3" class="bmw">3 series</option> <option value="series-5" class="bmw">5 series</option> <option value="series-6" class="bmw">6 series</option> <option value="a3" class="audi">A3</option> <option value="a4" class="audi">A4</option> <option value="a5" class="audi">A5</option> </select>
Means that we have to add Field Elements in 3-columned.
value1::label1::classname1%% value2::label2::classname2%%
and classname should accept spaces.
Current FC select field only accept 2-columned, so maybe we just create new textarea parameter to add list of classnames.

Now, to make them as chained, we need to add jQuery.
So we need new textarea parameter for this.
Code:
<script type="text/javascript" charset="utf-8"> $(function(){ $("#series").chained("#mark"); }); </script>

I know that you are very busy but I see people talking about this feature in forum. So If you don't mind, please tell me how to add class name for each option.
Not sure, somewhere around here I guess.
Code:
// Create field's HTML display for item form // Display as drop-down select $options = array(); if ($usefirstoption) $options[] = JHTML::_('select.option', '', JText::_($firstoptiontext)); foreach ($elements as $element) { $options[] = JHTML::_('select.option', $element->value, JText::_($element->text)); } $field->html = JHTML::_('select.genericlist', $options, $fieldname, $attribs, 'value', 'text', $field->value, $elementid);

Hope you can add this feature with a little effort in near future! :D

Regards,
Brandon

Please Log in or Create an account to join the conversation.

More
10 years 10 months ago #36618 by brandonking
Hello ggppdk,

Finally, found how to add class name in option's tag.
It took about 6hours to find this solution :D .

Under this $elements
Code:
$elements = FlexicontentFields::indexedField_getElements($field, $item, self::$extra_props);

Add
Code:
///////////Added by Brandon/////// foreach ($elements as $element) { if (preg_match('/{([^}]*)}/', $element->text, $matches)) { $element->classname = $matches[1]; $element->text = preg_replace('#\{.*?\}#s', '', $element->text); } ///To be able to add ID, you can create another IF statement like above. } //////////////////////////////////
Code:
//Edited by Brandon //From: //foreach ($elements as $element) { // $options[] = JHTML::_('select.option', $element->value, JText::_($element->text)); //} //Change To foreach ($elements as $element) { $options[] = JHTML::_('select.option', $element->value, JText::_($element->text), array('option.attr' => 'attributes', 'attr' => 'class='.$element->classname)); } //Edited by Brandon //From: //$field->html = JHTML::_('select.genericlist', $options, $fieldname, $attribs, 'value', 'text', $field->value, $elementid); //Change To $field->html = JHtml::_('select.genericlist', $options, $fieldname, array('id' => $elementid, 'option.attr' => 'attributes', 'list.attr' => $attribs));

I have tested this and see class names in option tag without any error.
Now I need to add jQuery to make select fields to be chained.
@ggppdk I have mentioned adding jQuery for each TYPE in other post and I need this to work.
Hope you apply this in core select field.
Brandon

Please Log in or Create an account to join the conversation.

More
10 years 10 months ago #36689 by ggppdk
Hello,
this is very useful, we will use what you suggested probably the way you suggested (we will see about this),

just i think that your original suggestion to use:

value1::label1::classname1%% value2::label2::classname2%%

is better


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
10 years 10 months ago #36692 by brandonking
Actually, You use Select2 replacement for FC select field so that I couldn't succeed to make them as chained.
Because the jQuery.chained.js requires to use pure html select tag and option tag.

But I have found another site that you might be interested in.
tutorialzine.com/2011/11/chained-ajax-selects-jquery/
They use Chosen jQuery plugin to make selects into the fancy widgets.

Please let me know.

Best regards,
Brandon

Please Log in or Create an account to join the conversation.

More
10 years 10 months ago #36693 by ggppdk
Hello, even if chained does not work with
jQuery.chained and jQuery.select2 ...
because of ...

we could
1. solution A: try to fix with some extra jquery statements
2. solution B: when chained FC select fields are used we will not use select2

Thanks for 2nd link, will check this tomorrow, still work for J3.x is priority (but chained selects are high in our list now ;) )

PS:
-- v2.0.3 beta is on SVN,
with new item form layouts:
-- now our item forms (especially frontend form) have a more professional look + more responsive design + frontend form is now tab-compacted ... but being able to focus multiple inner TABs when an invalid field is detected

also, it has a few minor bug-fixes (see SVN)


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
10 years 10 months ago #36694 by brandonking
Thanks for accepting as high priority :D
I will test v2.0.3 beta now.

Thanks

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.503 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline