-1

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);

    }


}
  • If you are adding the code via a Custom HTML module, you need to use Sourcerer extensions.joomla.org/extensions/core-enhancements/… or similar to prevent the editor stripping out certain types of code. – Neil Robertson Dec 9 '14 at 10:40
  • its not a custom html mode – IseNgaRt Dec 9 '14 at 10:51
  • The JSFiddle isn't working – Lodder Dec 9 '14 at 11:20
  • jsfiddle for 2.1 is working fine for me. It should display 2 at the textbox and so does for me. is it different in your pc ? – IseNgaRt Dec 9 '14 at 11:35
  • Not working at all. I should point out that you do not need to add # to your element id's. So replace id="#jform_params_foreignmanuf" with id="jform_params_foreignmanuf" and same goes for the input – Lodder Dec 9 '14 at 11:39
4

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/

  • Thanks for the feedback, im trying one week straight to make it work, so i removed/added code and tried different aproaches thats why i had extra things. As for the jquery code you are right, altough i had some values preselect to cheack if the script will run, i swapped the jquery code but it doesnt work again. JHtml::_('jquery.framework'); included the libraries at the frontend right ? or im mistaken ? because then i dont include somewhere the lib so thats why it doesnt run. – IseNgaRt Dec 9 '14 at 14:39
  • Check the source code of your final output to see if jQuery is loaded, and use the Developer tools (press F12 in your browser) to check if you're getting any error messages. I just noticed you're using Joomla 2.5, so JHtml::_('jquery.framework'); won't work. This post shows how you can include jQuery in Joomla 2.5 if needed. – johanpw Dec 9 '14 at 15:14
  • i checked it with consol.log but the error tab is blank. How i understand from viewing the source code is jquery is loaded? I allready saw that post before but if im not mistaken this add the jquery at frontend : $document->addScript(JURI::root() . "templates/template_name/js/jquery.js") as it include it at the template right ? – IseNgaRt Dec 9 '14 at 22:38
  • Search for jquery.min.js in your source code to see if it is loaded. The path may vary. You have to modify the above addScript code with a valid path to your jQuery library, or use $document->addScript("http://code.jquery.com/jquery-latest.min.js") to load jQuery from an external server. – johanpw Dec 9 '14 at 23:00
  • It wasnt loaded somewhere. I used the method from the post you linked, using google cdn for external server, but after i searched source code i still didnt find any jquery lib include.Is there anything that could Prevent the include of jquery ? – IseNgaRt Dec 10 '14 at 7:28

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.