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.
<html>
<script>
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';
else
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
}
</script>
<body>
<form name="searchbox" id="searchbox" method="POST" action="#">
<input type="text" id="searchTerm" placeholder=" search.." onkeyup="doSearch()" />
</form>
<?php
if(empty($folderlist))
{
echo "<br>";
echo "<p style='color:red;'>You don't have any acccessible folders.</p>";
}
else {
?>
<table id="table">
<thead>
<tr>
<th>No. </th>
<th>Folders </th>
</tr>
</thead>
<tbody>
<?php for($a = 0; $a < count($folderlist); $a++){ ?>
<tr>
<td>
<?php echo $a+1; ?>.
</td>
<td>
<a href="index.php?option=com_content&view=article&<?php echo $folderlist[$a]->getPath(); ?>" target="_top" ><?php echo $folderlist[$a]->getDesc(); ?><a>
</td>
</tr>
</tbody>
<?php }
echo "</table>";
}
?>
</body>
</html>
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
define( 'DS', DIRECTORY_SEPARATOR );
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
$mainframe =& JFactory::getApplication('site');
$mainframe->initialise();
$doc = JFactory::getDocument();
$doc->addScript(JURI::root().'filter.js');
I put the filter.js on the root folder in joomla.
$doc->addScript()includes a Javascript file inheadtags. 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