1
I have a javascript code that reveals the contents of a variant div the selection made in a drop/down menu. This code works perfectly in HTML, however when trying to implement on a Joomla 3.0 site, it does not work.
Inside joomla php 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>
And the related 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>
In version 3.0 of joomla, we have to use the Jquery expression instead of $ by default, if Jquery loading is used by the normal method -> Jhtml::_('jquery.framework'); Which I also tried unsuccessfully. It will be the javascript structure that has to be placed differently?
I usually enter the index of the template and refer to jquery and my script in the traditional way, using the <script> html tag. It’s always worked well, I just don’t know if it’s ideal for development patterns in joomla.
– Joao Paulo