I have a menu using IFrame Wrapper so that I can link to my own coded php page. Inside the php file is just listing down the data on table and I have search box so that user can filter the data onkeyup. The javascript works if I put the javascript inside the html.

function doSearch() {
var searchtext = document.getElementById('searchTerm').value;
var targetTable = document.getElementById('table');
var targetTableColCount;

//Loop through table rows
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
    var rowData = '';

    //Get column count from header row
    if (rowIndex == 0) {
       targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
       continue; //do not execute further code for header row.

    //Process data rows. (rowIndex >= 1)
    for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
        rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;

    //If search term is not found in row data
    //then hide the row, else show
    if (rowData.indexOf(searchtext) == -1)
        targetTable.rows.item(rowIndex).style.display = 'none';
        targetTable.rows.item(rowIndex).style.display = 'table-row';
<form name="searchbox" id="searchbox" method="POST" action="#">
 <input type="text" id="searchTerm" placeholder=" search.." onkeyup="doSearch()" />
   echo "<br>";
   echo "<p style='color:red;'>You don't have any acccessible folders.</p>";
 else {
<table id="table">
    <th>No. </th>
    <th>Folders </th>
<?php for($a = 0; $a < count($folderlist); $a++){ ?>
    <?php echo $a+1; ?>.
        <a href="index.php?option=com_content&view=article&<?php echo $folderlist[$a]->getPath(); ?>" target="_top" ><?php echo $folderlist[$a]->getDesc(); ?><a>
  <?php }
 echo "</table>";

But I want to use external filter.js with the same javascript code instead of using internal js file like html file above. I declare below code on top of the html file but it does not work.

  define( '_JEXEC', 1 );
  define('JPATH_BASE', dirname(__FILE__) );//this is when we are in the root
  require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
  require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );

  $mainframe =& JFactory::getApplication('site');
  $doc = JFactory::getDocument();

I put the filter.js on the root folder in joomla.

  • 1
    $doc->addScript() includes a Javascript file in head tags. You can't do this outside of Joomla. If you need to include a JS file, simply use <script src="path/to/file"> like you would in HTML
    – Lodder
    Commented Oct 3, 2015 at 19:35
  • silly me, haha, it works as you suggested, thanks!!! I have another question tho, I realised the js code filter with sensitive case, if I put toLowerCase() in this line (rowData.indexOf(searchtext) == -1), it filters the list without case sensitive, but once I put capital letters, the results are zero, is there a way that I can filter both insensitive n sensitive case?
    – Annie
    Commented Oct 4, 2015 at 7:46
  • I'd suggest asking a new question on Stackoverflow for that ;)
    – Lodder
    Commented Oct 4, 2015 at 10:24

1 Answer 1


First of all, you are trying to add code without following Joomla! practices. Then, it is going to be difficult to achieve what your are looking for.

  • For instance, Javascript code is generally located in /media folder.
  • Also, a PHP file without "defined('_JEXEC') or die();" is a bad idea, not following the general security rule to prevent direct access to internal PHP files.
  • Finally, htaccess has several rules to block direct access to certain files.

To add raw code, it is better to install an extension following a controlled way. Please, check this JED category: Coding & Scripts Integration

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.