4

I am working on a site (custom component and template) where I want some links to have their content shown in a popup. The popup itself seems to work fine, but I noticed the select boxes aren't affected by formbehavior.chosen, when called with ajax.

I am applying chosen with JHtml::_('formbehavior.chosen', 'select'); in my component.php on the site part. AJAX content is loaded with format=raw, so I thought it might work if I put this in the actual component template file, but this didn't work. I thought their might be a function to reapply chosen to all it's set selectors, but haven't found one.

What would be the way to go to make my select menus chosen style on ajax load?

The components component.php file looks something like that:

<?php

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

// Require helper file
JLoader::register('ComponentHelper', JPATH_COMPONENT . '/helpers/component.php');

// Add Stylesheets
JHtml::stylesheet('com_component/style.css', array(), true);

// Add Scripts
JHtml::_('bootstrap.framework');
JHtml::script('com_component/script.js', false, true);

// Add chosen
JHtml::_('formbehavior.chosen', 'select');

// Get an instance of the controller
$controller = JControllerLegacy::getInstance('Component');

// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->get('task'));

// Redirect if set by the controller
$controller->redirect();

The popup is called with the templates template.js

jQuery(function($) {
    $('a.popup')
        .click(function() {
            event.preventDefault();

            var url = $(this).attr('href') + '&format=raw';

            $('#popupDialogue .popup-content').html('');
            $('#popup')
                .addClass('active')
                .addClass('loading');

            $.get( urlGet, function( data ) {
                $('#popupDialogue .popup-content').html(data);
                $('#popup')
                    .removeClass('loading');
            });
        });
});
  • have you checked with the browser inspector to see if it's a matter of markup or missing css/js? – FFrewin Mar 13 '17 at 14:26
  • I'm not quite sure how the inspector could help me with that. I built the HTML myself so I know there is a select. Actually I simplified the example so its .some-class select but that shouldn't matter. Chosen is working on the component. When working with format=default I have a perfectly chosen style select box. It just doesn't work on ajax calls. – Tom Mar 13 '17 at 19:13
  • Try adding &tmpl=component in addition to or perhaps instead of &format=raw in your modal window link to see if it helps. – Neil Robertson Mar 13 '17 at 22:29
1

Change below code:

$.get( urlGet, function( data ) {
  $('#popupDialogue .popup-content').html(data);
  $('#popup')
    .removeClass('loading');
});

to

$.get( urlGet, function( data ) {
  $('#popupDialogue .popup-content').html(data);
  $('#popup')
    .removeClass('loading');
  $('#popupDialogue .popup-content select').chosen();
});
  • I have to admit, I missed this option. On the other hand, I'm not sure if I want to mix it up. Currently I have chosen in my component, this ajax call is made from my template. So if i ever for some reason want to use this component with another template, that by chance loads this view with ajax, it will have different results in default than in raw output. Then again, it might be the best way to control chosen from template anyway and be fine with possibly ugly (especially usability wise) selects on other templates. – Tom Mar 13 '17 at 18:58

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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