2

It is on the details page (edit.php), when I change a value from another dropdown field, I want to change the options of another dropdown (later by AJAX). For now my test works if I look just to the select, with console log inspector (FF), but on the screen self the original value's are shown!!??

When I open the screen than is this in my console log I see:

<select id="jform_tsch__tsch1__lfld" name="jform[tsch][tsch1][lfld]" class="list_class fieldMedium" style="display: none;" wtx-context="B7F1102E-68EB-474C-8DB9-407DCA7FBDD4">
    <option value="">Select veld</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

This my jQuery code (part):

jQuery('select[id^=jform_tsch__tsch][id$=__tsch]').change(function () {
    var subID = target[0]+'__'+target[1] +'__lfld';

    var newOptions = {"Option 1": "value1",
                              "Option 2": "value2",
                              "Option 3": "value3"
                             };

    jQuery('#'+subID).children('option:not(:first)').remove();

            jQuery.each(newOptions, function(key, value) {
                jQuery('#'+subID)
                    .append(jQuery("<option></option>")
                    .attr("value",key)
                    .text(value));
            });
 });

After I change my value of another dropdown, the code is executed, when I look in the console log:

<select id="jform_tsch__tsch1__lfld" name="jform[tsch][tsch1][lfld]" class="list_class fieldMedium" style="display: none;" wtx-context="B7F1102E-68EB-474C-8DB9-407DCA7FBDD4">
    <option value="">Select veld</option>  
<option value="Option 1">value1</option><option value="Option 2">value2</option><option value="Option 3">value3</option></select>

So the new option value's are added at the select.!

But if I press on the dropdown arrow than still the old value's are shown and that is because of the

<div class=chz-search">

which does also have the original value's, see my screenshot enter image description here. Of course I can update the 'ul' as well by jQuery I think, but I'm thinking is this the way how it should be done in Joomla???

Is there a kind of default way how to replace the options of select in Joomla. Or is the alternative 'submit'? I read also something about the chosen.jQuery.js library, but I'm searching for an example how to use this.

BR.

Nico

2

Thats because of the chosen.js - i had the same question a few weeks ago :

Update List field rendering after ajax update

For chosen you can call:

jQuery('#jform_identificator').trigger("chosen:updated");

after you changed the options, this triggers the update.

Edit: in Joomla! V3.x and old version of chosen is used and the trigger is:

jQuery('#jform_identificator').trigger("liszt:updated");

kind regards Marco

4
  • Hi Marco, thanks for you're answer. I read you're other thread and it is exactly the same what I want. I have added: $document->addScript('/media/jui/js/chosen.jquery.js'); Is this than the ChosenJS library? I have tryed the update trigger for the select itself jQuery('#jform_tsch__tsch2__lfld').trigger("chosen:updated"); and the overlay div: jQuery('#jform_tsch__tsch2__lfld_chzn').trigger("chosen:updated");, still the same. It is I think due to the overlay div with the <u class=" chzn-results"> that I still see the old value's. Nothing is changed for the <u class=" chzn-results"> Jul 22 '20 at 14:45
  • sorry my fault - i had to use "jQuery('#jform_identificator').trigger("liszt:updated");" edited also in my answer
    – Marco
    Jul 22 '20 at 14:50
  • *** UPDATE *** I had copied something for a multitab details page, so that it returns on the tab of before the submit. What I said I copied it without exactly realizing what all does. I see now one of the lines is: JHtml::_('formbehavior.chosen', 'select');. Is this the famous chosenJS for a select in Joomla? Jul 22 '20 at 20:00
  • I had the same issue some weeks ago
    – FFrewin
    Jul 22 '20 at 21:15
2

It is working with this one:

jQuery('#jform_identificator').trigger("**liszt**:updated");

Even with the 'z' in liszt', I thought this must be a typo, but not!!!

I had the one which Marco mentioned tried earlier, but that one is not working, in my situation. Why is that one of Marco has mentioned, not working? I see that one regularly in other treads. It is also working without $document->addScript('/media/jui/js/chosen.jquery.js');!!

BR.,

Nico

2
  • nice! - idk in detail what i've found is: joomla uses an older version of the chosen library - old syntax... i've updated my answer below a few minutes ago. Can you please mark your question as solved (checkmark left of an answer) to help the community - thank you. BR Marco
    – Marco
    Jul 22 '20 at 15:14
  • I will accept my answer as the solution but that is possible after two days, not yet! Jul 22 '20 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.