How to make javascript work (show div by select-box) in joomla 3.0

CMS & WordPress
,
1

I there, I have a javascript code that shows a div content depending on the select-box option value.
The code works fine in html, but in the Joomla 3.0 he doesn’t.

inside the php of Joomla i have this script:

 <?php


    //jQuery Framework in noConflict mode  

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

    $document = JFactory::getDocument();  

    $document->addScriptDeclaration('  

    jQuery(document).ready(function(){  

    jQuery("select").change(function(){  

    jQuery( "select option:selected").each(function(){  

        if($(this).attr("value")=="3"){  

        $(".box").hide();  

        $(".choose").show();  

        }  

         if($(this).attr("value")=="5"){  

         $(".box").hide();  

         $(".green").show();  

         }  

         if($(this).attr("value")=="6"){  

         $(".box").hide();  

         $(".blue").show();  

         }  

         if($(this).attr("value")=="7"){  

         $(".box").hide();  

         $(".red").show();  

         }  

         });  

         }).change();  
    });  


');    

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

  ?>

And this HTML:

<select id="profiletypes" name="profiletypes" class="select required pt-font-color">
            <option value="3">opção3</option>
            <option value="5">opção5</option>
            <option value="6">opção6</option>
            <option value="7">opção7</option>
        </select>

<div class="choose box">You have to select <strong>any one option</strong> so i am here</div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

With CSS:

> <style>
> 
> select {    margin-bottom:20px;    border: 1px solid #111;    width:
> 200px;    background:url("sports-5.png") 96% / 15% no-repeat #6d9dc0; 
> font-size: 16px;    border: 1px solid #ccc;    height: 34px;   
> -webkit-appearance: none;    -moz-appearance: none;    appearance: none;
>     color:#fff;
>     outline: none !important;
>     cursor:pointer;
>     font-family:cursive; }
> 
> 
> //select::-ms-expand { /* for IE 11 */
>     display: none; }
> 
> 
> div.registerProfileType .pt-font-color{       background:
> url(/images/sports-5.png) 96% / 15% no-repeat #6d9dc0;
>     color:#fff; }
> 
> .box{
>         padding: 20px;
>         display: none;
>         margin-top: 20px;
>         border: 1px solid #000;
>     }
>     .red{ background: #ff0000;
>     }
>     .green{ background: #00ff00;
>     }
>     .blue{ background: #0000ff;
>     }
>     .choose{background: #ffffff;
>     }
> 
> </style>

I know that in joomla 3.0 we need to use Jquery instead of $, i have tryed that, but it doesn´t work.
What am I possibly doing wrong?

2

Any errors in the console?

3

Hi Pullo, ty for ur attention. I only get some deprecated errors.

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; plgSystemSection has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/section/section.php on line 6

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; CApplications has a
deprecated constructor in /home/fanatic1/public_html/components/com_community/libraries/core.php on line 1118

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; plgSystemOfflajnParams has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/offlajnparams/offlajnparams.php on line 21

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP;
plgSystemOfflajnJoomla3compat has a deprecated constructor in /home/fanatic1/public_html/plugins/system/offlajnjoomla3compat/offlajnjoomla3compat.php on line 83

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; AzrulJXTemplate has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/jomsocial.system/pc_includes/template.php on line 22

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; AzrulJXCachedTemplate has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/jomsocial.system/pc_includes/template.php on line 71

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; plgSystemCentrora has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/centrora/centrora.php on line 32

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; plgSystemDojoloader has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/dojoloader/dojoloader.php on line 21

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; plgSystemModuleplant has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/moduleplant/moduleplant.php on line 23

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; JPlantContentPlugin has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/moduleplant/moduleplant/core/plugin/plugin.php on line 16

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; JAXResponse has a deprecated
constructor in /home/fanatic1/public_html/plugins/system/jomsocial.system/pc_includes/ajax.php on line 50

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; JAX has a deprecated
constructor in /home/fanatic1/public_html/plugins/system/jomsocial.system/pc_includes/ajax.php on line 208

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; Services_JSON has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/jomsocial.system/pc_includes/JSON.php on line 119

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; Services_JSON_Error has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/jomsocial.system/pc_includes/JSON.php on line 785

Deprecated: Methods with the same name as their class will not
be constructors in a future version of PHP; Services_JSON_Error has a
deprecated constructor in /home/fanatic1/public_html/plugins/system/jomsocial.system/pc_includes/JSON.php on line 799

4

Sry, I think you meant to say the erros of the firebug console. This is what I get;

ReferenceError: joms is not defined ___________________________________________ jomsocial.bootstrap.min.js:1:1
TypeError: $(…).attr is not a function___________________________________________ xipt:100:20

5

Try replacing the occurrences of $ with jQuery?

6

That´s it! Thank you Pullo. Solved!

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.