javascript doesn´t work in joomla 3.0

Question

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 is the drop-down form:

<select id="profiletypes" name="profiletypes" class="select required pt-font-color">
            <option value="3">option3</option>
            <option value="5">option5</option>
            <option value="6">option6</option>
            <option value="7">option7</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>

Along with the CSS:

//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 $, if we call JQuery normally, i have tryed that, but it doesn´t work. What am I can possibly doing wrong? I shall be grateful for any help.

Answer 1

You are still using $ within the .each loop which is causing the issue. Another issue is the loop causes multiple redirects. If you use the below block of code in your PHP script, it should work as intended (option 3 selected by default but picking another option changes the colour of the div etc).

// jQuery Framework in noConflict mode  
JHtml::_('jquery.framework', false);  

$document = JFactory::getDocument();  
$js =<<<JS
jQuery(document).ready(function(){  
    jQuery("#profiletypes").change(function(){  
        if(jQuery(this).attr("value")=="3"){  
            jQuery(".box").hide();  
            jQuery(".choose").show();  
        }  

        if(jQuery(this).attr("value")=="5"){  
            jQuery(".box").hide();  
            jQuery(".green").show();  
        }  

        if(jQuery(this).attr("value")=="6"){  
            jQuery(".box").hide();  
            jQuery(".blue").show();  
        }  

        if(jQuery(this).attr("value")=="7"){  
            jQuery(".box").hide();  
            jQuery(".red").show();  
        }  
    }).change();  
});
JS;
// The above 'JS' must be at the start of the line, not tabbed in

// Add the JS
$document->addScriptDeclaration($js);