1

I'm working on a component in Jooomla 3, and I want to stick with the system version of Bootstrap to keep it as integrated looking as possible... so I'm not looking for answers saying to upgrade to BS 3 or 4. This also isn't directly related to Joomla, so I'm not posting it over there.

The select drop-down for country has a change event populate the available states. Technically it does work, but the state drop down doesn't actually display correctly, I can only see the browser console elements but the list doesn't show up visually. If I do this by using a div ID and create the whole select element then it works, but I feel like I'm just missing something in the way I should handle the populating.

Here's my JQuery:

$("select#registrant_country").change(function () {
        var selectedCountry = $("#registrant_country option:selected").val();
        $('#registrant_state').empty();
        $.getJSON("index.php?option=com_mycomponent&task=tools.countryState",
                {id: selectedCountry,
                    tmpl: "component"
                })
                .done(function (data) {
                    $.each(data, (val) => {
                        $("#registrant_state").append("<option value='" + val +"'>" + val + "</option>");
                    });
                });
    });

Here's the PHP tools.countryState method:

public function countryState() {
        JFactory::getDocument()->setMimeEncoding('application/json');
        JResponse::setHeader('Content-Disposition', 'attachment;filename="state-results.json"');
        $app = JFactory::getApplication();
        $country = $app->input->get('id', '', 'string');

        MysiteHelper::add('country-code', $country); //adds "country-code=US" to the query
        $result = MysiteHelper::getData('country/state-list.json'); // becomes https://API_PATH/country/state-list.json&country=US
        echo json_encode($result);
        jexit();
    }

And I have a simple select tag to append the results:

<label>State</label><select id="registrant_state"></select>

From the console, before change:

<select id="registrant_state" style="display: none;"></select><div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="registrant_state_chzn"><a class="chzn-single chzn-default"><span>Select an option</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chzn-results"></ul></div></div>

From the console after a change (note the Bootstrap set style="display: none;"):

<label>State</label>
<select id="registrant_state" style="display: none;">
<option value="Navassa Island">Navassa Island</option>
<option value="Howland Island">Howland Island</option>
<option value="Kingman Reef">Kingman Reef</option>
<option value="Jarvis Island">Jarvis Island</option>
<option value="Johnston Atoll">Johnston Atoll</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Wake Ialand">Wake Ialand</option>
<option value="Palmyra Atoll">Palmyra Atoll</option>
<option value="Baker Island">Baker Island</option></select>
<div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="registrant_state_chzn">
    <a class="chzn-single chzn-default"><span>Select an option</span><div><b></b></div></a>
    <div class="chzn-drop">
        <div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div>
        <ul class="chzn-results"></ul>
    </div>
</div>
James
  • 834
  • 7
  • 27
  • Please post your Joomla questions at [joomla.se] Stack Exchange. – mickmackusa Dec 27 '19 at 20:08
  • As I mentioned, this isn't directly related to Joomla, and that's why I didn't post over there. – James Dec 28 '19 at 00:23
  • https://joomla.stackexchange.com/a/14281/12352 , https://joomla.stackexchange.com/a/24378/12352 , https://joomla.stackexchange.com/a/13721/12352 , – mickmackusa Dec 28 '19 at 06:52
  • And? Do you see any of the issue I posted relating to a problem in Joomla? Or do you simply see the word Joomla, and assume it must belong in that category? If the former, you'd better take another look. If the latter, you have no business making any suggestions here. – James Dec 28 '19 at 08:24
  • If it has nothing to do with Joomla, then you can safely remove that tag from the question. – mickmackusa Dec 28 '19 at 10:04
  • It is my stance that any issues encountered while performing Joomla development are qualified to ask on JSE. There are many Joomla devs that cannot differentiate a Joomla-exclusive issue versus a non-exclusive issue that occured while working on their Joomla project. For that reason, I feel Joomla users should be able to post there. That said, if you always prefer to post here that is your prerogative and is perfectly valid/on-topic. I just find that many Joomla questions go unanswered and/or get downvoted here. – mickmackusa Dec 28 '19 at 12:59

1 Answers1

1

I figured it out. Joomla is using an older version of the jQuery plugin Chosen, and needs liszt:updated

The only changes I made below:

jQuery(function ($) {
    $("select#registrant_country").change(function () {
        var selectedCountry = $("#registrant_country option:selected").val();
        $('select#registrant_state').empty();
        $.getJSON("index.php?option=com_mycomponent&task=tools.countryState",
                {id: selectedCountry,
                    tmpl: "component"
                })
                .done(function (data) {
                $('select#registrant_state').empty();
                    $.each(data, (val) => {
                        $('select#registrant_state').append("<option value='" + val + "'>" + val + "</option>");
                      });
                $('select#registrant_state').trigger("liszt:updated");
                });
    });
});
James
  • 834
  • 7
  • 27