Forums

Hello,

I am trying to setup an Chronoform that displays a single dropdown menu to select a single value (in this case, the name of a shop) from a list. I would like to use the Chosen or Select2 jQuery plugin to change the way the pulldown works. I tried Chosen first as that should be included in Joomla! 3.3 and tried Select2 later as well (For those not familiar with Chosen and Select2, here are 2 links with demo's: http://harvesthq.github.io/chosen/ and http://ivaynberg.github.io/select2/ ).

In my Chronoform, I have first included a Custom Code that runs the following code:

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

Then, I include a Load Javascript action before the HTML (Render Form) action:

 jQuery(document).ready(function(){
    jQuery("#pulldown-winkels").chosen();
});

I double checked that #pulldown-winkels is the corect id of the select I am trying to change.

When I then preview or run the form, the javascript console in my browser reports the following:

TypeError: jQuery(...).chosen is not a function

and the pulldown is shown as a normal pulldown, no Chosen formatting and/or behavior.

I tried the same with Select2 but I get the same error message. i coudble checked that both the .js and .css files are called correctly in the preceeding code and that these fields exist as well.

Can somebody understand why this error appear and explain to me how to solve it ?

Many thanks in advance,

Erik

I think it should be:

     jQuery(document).ready(function(){
        $("#pulldown-winkels").chosen();
    });  

or better:

jQuery(document).ready(function(JQ){
        jQ("#pulldown-winkels").chosen();
    });

Rob

Hello Rob,

Thank you for your suggestions. if I use the second code suggestion, I get this error:

ReferenceError: jQ is not defined

If I use the first of your suggestions, I get this error:

TypeError: $(...) is null

I tried the variant with the $ sign before but then it yielded an error as well.

Erik

Try the 2nd suggestion and use this line:

JQ("#pulldown-winkels").chosen();

Thank you Max. I inserted

jQuery(document).ready(function(JQ){
        JQ("#pulldown-winkels").chosen();
    });

but then the error

TypeError: JQ(...).chosen is not a function

appears.

It looks like the script is not loaded.
You can try to put a . in front of the path to include the site root like this:

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

Rob

Hello Rob,

I actually tried that already and checked wether the script was properly referenced, Without the preceeding dot, the page rendered shows the following line:

<link rel="stylesheet" href="/media/jui/css/chosen.css"

<script src="/media/jui/js/chosen.jquery.js"

with the preceeding dot, the page rendered shows these lines:

<link rel="stylesheet" href="/./media/jui/css/chosen.css"

<script src="/./media/jui/js/chosen.jquery.js"

Each of these four links actually work and show the contents of the correct files. The error message in the console remains the same, with or without the preceeding dot.

Erik

Hi Erik,

I got Chosen working at least as a demonstration here though I suspect that some of the examples are incomplete.

The dropdowns are all standard ChronoForms elements with chosen classes added.

The code was below was loaded from a Custom Code action in the On Load event of the form.

<?php
$doc = JFactory::getDocument();
JHtml::_('jquery.framework');
$doc->addStylesheet(JUri::root().'components/com_chronoforms5/extras/chosen/chosen.css');
$doc->addScript(JUri::root().'components/com_chronoforms5/extras/chosen/chosen.js');
$script = "
jQuery(document).ready(function(jQ) {
  var config = {
    '.chosen-select': {},
    '.chosen-select-deselect'  : {allow_single_deselect: true},
    '.chosen-select-no-single' : {disable_search_threshold: 10},
    '.chosen-select-no-results': {no_results_text: 'Oops, nothing found!'},
    '.chosen-select-width'     : {width: '95%'}
  }
  for (var selector in config) {
    jQ(selector).chosen(config[selector]);
  }
});
";
$doc->addScriptDeclaration($script);
?>

Note: I have put the chosen.js and chosen.css files into the components/com_chronoforms5/extras/chosen/ folder on my site. For some reason I had to rename the chosen.js file - it wouldn't load with the chosen.jquery.js name :-(

The $script snippet here is just replicating the options from the Chosen demo page in the installation package.

Bob

PS The country list is being loaded as dynamic data from an array with a little PHP:

<?php
$form->data['country_list'] = array(
  'United States' => 'United States',
 . . .
  'Zimbabwe' => 'Zimbabwe',
  );
foreach ( $form->data['country_list'] as $k => $v ) {
  $form->data['country_list'][$k] = array( 'value' => $k, 'text' => $v);
}
?>

Hi Erik,

I also got select2 working in essentially the same way. Here is the code, again I uploaded the select2 files to the components/com_chronoforms5/extras/select2/ folder on my site.

<?php
$doc = JFactory::getDocument();
JHtml::_('jquery.framework');
$doc->addStylesheet(JUri::root().'components/com_chronoforms5/extras/select2/select2.css');
$doc->addStylesheet(JUri::root().'components/com_chronoforms5/extras/select2/select2-bootstrap.css');
$doc->addScript(JUri::root().'components/com_chronoforms5/extras/select2/select2.js');

$script = "
jQuery(document).ready(function(jQ) {
  jQ('#dropdown2').select2();
  jQ('#dropdown3').select2();
});
";
$doc->addScriptDeclaration($script);
?>

The select2-bootstrap.css is added because without it there is some messy layout.

Bob

Hello Bob,

thank you for sorting that out. I spent quite a lot of time in figuring out why it doesn't work on my site and found the cullpritt. Thing is that Chronoform itself loads a jquery library. This, on top of a jquery library already loaded by my Joomla! site (and one of the many applications on it). This caused a jQuery conflit and Chosen not to work.

I found there is no elegant way you can tell or force Chronoforms 5 to NOT load it's jQuery library. I read this post
http://www.chronoengine.com/forums/posts/f2/t95894.html?page=2
and tried the change, but that removed all javascript from Chronoforms, including the Javescript I'm trying to insert via the form. So that didn't work either.

We finally found that in this file
/libraries/cegcore/libs/document.php
on line 114 the php script loads the 'extra' jquery file. By commenting out this line

$this->addJsFile(\GCore\C::get('GCORE_FRONT_URL').'assets/jquery/jquery.js');

Chronoforms stops loading this jquery library and all of a suddin the Chosne (and Selct2) plugins started to work with the expected result. Hurray !

I just wondered wether it would not be a good idea if there was an option in Chronoforms (possibly best on a per form base) to exclude the loading of the jquery.js library as an option. Man applications now use jQuery and conflicts can be expected. It would also make things easier as I have now performed a core hack which we all know is not the best way of doing it😟

Many thanks for the support all, it was very helpful and we got the syntax issues cleared very nicely !

Erik

Hi Erik,

Chronoforms jQuery should not conflict with any existing jQuery on page, and Bob is also using v5 in his example.

Did you test Bob's code exactly as its without any changes ?

Regards,
Max

Hello Max,

thank you for your clarification. I tested Bob's Chosen example on a clean Joomla! 3 install and that worked. However, in the actual website it did not and the only way to get Chosen working was by removing the ChronoForms jQuery by force.as described. I might add that the website in question is a Joomla + MageBridge + Magento complex, an is using a ProtoStar template as a base. The jQuery file called by Chonoforms actually conflicted with a jQuery file called earlier in the header.

Best regards from

Erik

Hi Erik,

I don't think this is the solution but you might try my code without the line

JHtml::_('jquery.framework');

That is there to force the loading of the Joomla! jQuery library and to avoid timing issues that happen otherwise (because Joomla! isn't clever enough to load jQuery first). It's just possible that including that loads a second jQuery file after some other component has loaded another.

Bob

Hi Erik,

But what was the error you had with the Chronoforms jQuery file ?

And what's your CF version ? you have J3.3.1, which may not have the latest jQuery, but the latest CF has the latest jQuery 1.11, so this may be the source of the conflict, please try updating both Joomla and CF

Regards,
Max

Hi Max,

I can not reproduce it exaclty anymore but it indicated that the call made was not a function. I checked your suggestions beforehand. i am already using the latest Joomla! and Chronforms. I specifically checked the jQuery version included in Joomla 3.3.x and it is version 1.11.1. So this was all done beforehand.

Best regards from

Erik

Hi Erik,

I don't think this is the solution but you might try my code without the line

JHtml::_('jquery.framework');

That is there to force the loading of the Joomla! jQuery library and to avoid timing issues that happen otherwise (because Joomla! isn't clever enough to load jQuery first). It's just possible that including that loads a second jQuery file after some other component has loaded another.

Bob

Hello Bob, I will try this later today. Thank you.

Erik