Backend module does not run jQuery / JavaScript script?

Question

I have made a module that in the backend, the user selected from 2 dropdown multi select lists, some names and photos and in the frontend I print the selected names/photos.

To make it easier for user to track how many names he selected, i added a text box at the backend that i want it to keep the count ( with jquery ) of how many options the user selected. I wrote the script and it is working fine ( http://jsfiddle.net/u9dvmytn/10/ ).

But when i try to run it , inside my module jquery seems to not run at all ( consol.log is empty ). From what i can see, i did something wrong on " how to include the jquery library " or ( more likely, i really messed up on how to add/call the script inside the custom field ). I cant find anything at all , about how to properly add jquery inside custom fields and joomla backend at google,so could someone actualy help me to findout how i actually add a jquery script to backend, and what i did wrong in my module?

The js.js Script

<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
                var count =$("#\\#jform_params_foreignmanuf :selected").length;
                 $("#\\#jform_params_manucounter").val(count);
              });


    </script>

The multiselect dropdown list field type

<?php

defined('JPATH_PLATFORM') or die;
JFormHelper::loadFieldClass('list');
class JFormFieldManulist extends JFormFieldList
{

    protected $type = 'Manulist';


    protected function getOptions()
    {
    JHtml::_('jquery.framework');
     $db= JFactory::getDbo();
     $query = $db->getQuery(true);
        $query->select('*');
        $query->from('#__virtuemart_manufacturers_en_gb'); 
        $db->setQuery($query);
     $items = $db->loadObjectList();
         $options = array();
         if ($items)
         {
          foreach($items as $item)
          {
            $options[] = JHtml::_('select.option', $item->virtuemart_manufacturer_id , $item->mf_name,$item->slug);
          }
         }

         $options = array_merge(parent::getOptions(), $options);
         **JHtml::_('script', JUri::root() . 'modules/mod_manufacturers/js/js.js');**
         return $options;

    }


}

The Text box field type that will keep the count (i dont return something here. maybe is that the problem?)

<?php

defined('JPATH_PLATFORM') or die;
JFormHelper::loadFieldClass('Text');
class JFormFieldCountermanu extends JFormFieldText
{

    protected $type = 'Countermanu';


    protected function getOptions()
    {
    JHtml::_('jquery.framework');


    $doc = JDocument::getDocument();
       $js = '
             jQuery(document).ready(function($){
                var count =$("#\\#jform_params_foreignmanuf :selected").length;
                 $("#\\#jform_params_manucounter").val(count);
              });


       '; 
       JHtml::_('script', JUri::root() . 'modules/mod_manufacturers/js/js.js');
       $doc->addScriptDeclaration($js);

    }


}

Answer 1

Your code has several errors, here's a couple:

js.js

1. You can't load scripts using <script> inside a .js file
2. You shouldn't need to load jQuery at all, it's included in Joomla (and it's usually loaded by your template or other extensions). If not, use JHtml::_('jquery.framework'); to load it properly.
3. This entire file looks unnecessary to me, as you're loading the same code later in your code using $doc->addScriptDeclaration($js);

The multiselect dropdown list field type

1. Don't do this here. Remove the line:

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

2. Not sure what this line is for, and as your code is now, it shouldn't even be necessary to load this:

   **JHtml::_('script', JUri::root() . 'modules/mod_manufacturers/js/js.js');**
   

The Text box field type that will keep the count

1. Again this: JHtml::_('jquery.framework');. Don't do it inside your function.
2. Your JavaScript/jQuery code ($js) is basically working, but it is only triggered once, when the page is loaded. You're not triggering the code when the user selects another option. You need to use .on( "change", handler ).

Here's an example on what I think you're trying to do with jQuery:

jQuery(document).ready(function ($) {
    $(document).on('change', '#\\#jform_params_foreignmanuf', function () {
        var count = $("#\\#jform_params_foreignmanuf :selected").length;
        $("#\\#jform_params_manucounter").val(count);
    });
});

The text field will populate with the amount of selected items every time you select/deselect another item.

Example: http://jsfiddle.net/u9dvmytn/15/