How to Add jQuery slideDown and slideUp Effects into the Filter Panel in Websites that Created with PHP Report Maker 5.1

This time we are going to add jQuery slideDown and slideUp effects into Filter Panel in your report pages that generated by PHP Report Maker 5.1. As we know, up to PHP Report Maker version 5, by default, it has added the ability to collapse or expand the Filter Panel that located above the main table, by clicking the “minus” (-) or “plus” (+) button (toggle button) next to the “Search” text, but without using the slideDown and slideUp effects.

After implementing this modification, you will know how to implement the jQuery in websites that created with PHP Report Maker easily and quickly, especially adding the slideDown and slideUp effects. Your website will look more professional and the user will be happier to see this effect.

All we have to do is customizing the PHP Report Maker template files and adjusting some settings in PHP Report Maker application. In other words, we do not modify any generated script files.

[hidepost]

1. Open your \Script\rpt-extfilter.php file, and find this code:

   <?php
   if ($<!--##=sTblVar##-->->FilterPanelOption == 2 || ($<!--##=sTblVar##-->->FilterPanelOption == 3 && $<!--##=sPageObj##-->->FilterApplied) || $<!--##=sPageObj##-->->Filter == "0=101") {
   	$sButtonImage = "<!--##=ew_FolderPath("_images")##-->/collapse.gif";
   	$sDivDisplay = "";
   } else {
   	$sButtonImage = "<!--##=ew_FolderPath("_images")##-->/expand.gif";
   	$sDivDisplay = " style=\"display: none;\"";
   }
   ?>
   <a href="javascript:ewrpt_ToggleFilterPanel();" style="text-decoration: none;"><img id="ewrptToggleFilterImg" src="<?php echo $sButtonImage ?>" alt="" width="9" height="9" border="0"></a><span class="phpreportmaker">&nbsp;<!--##@Filters##--></span><br /><br />
   <div id="ewrptExtFilterPanel"<?php echo $sDivDisplay ?>>
   

   then replace it with the following code:

   <?php
   if ($<!--##=sTblVar##-->->FilterPanelOption == 2 || ($<!--##=sTblVar##-->->FilterPanelOption == 3 && $<!--##=sPageObj##-->->FilterApplied) || $<!--##=sPageObj##-->->Filter == "0=101") {
   	$sButtonImage = "<!--##=ew_FolderPath("_images")##-->/collapse.gif";
   	$sDivDisplay = "";
   // Begin of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, June 22, 2012
   ?>
   <script>
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phprptimages/collapse.gif" alt="" width="9" height="9" border="0">');
     $('div#ewrptExtFilterPanel').show();
   });
   </script>
   <?php
   // End of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, June 22, 2012
   } else {
   	$sButtonImage = "<!--##=ew_FolderPath("_images")##-->/expand.gif";
   	$sDivDisplay = " style=\"display: none;\"";
   // Begin of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, June 22, 2012
   ?>
   <script>
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phprptimages/expand.gif" alt="" width="9" height="9" border="0">');
     $('div#ewrptExtFilterPanel').hide();
   });
   </script>	
   <?php
   // End of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, June 22, 2012
   }
   ?>
   <?php // // Begin of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, June 22, 2012 ?>
   <a href="javascript:ewrpt_ToggleFilterPanel();" style="text-decoration: none;" id="searchPanelAnchor"><img id="ewrptToggleFilterImg" src="<?php echo $sButtonImage ?>" alt="" width="9" height="9" border="0"></a><span class="phpreportmaker">&nbsp;<!--##@Filters##--></span><br />
   <div id="ewrptExtFilterPanel" <?php echo $sDivDisplay ?>  class="msSearchPanel">
   <?php // // End of modification SlideDown/SlideUp Filter Panel, by Masino Sinaga, June 22, 2012 ?>
   

2. Open your PHP Report Maker project (.prp) file using PHP Report Maker, and then go to Server Events/Client Scripts tab -> Client Scripts -> Table-Specific -> Report Page -> Client Scripts, and then insert the following code into the right pane (code editor):

   // Begin of modification jQuery for slideDown and slideUp effect in search panel, by Masino Sinaga, May 14, 2012
   $(document).ready(function() {
     // trigger the function when clicking on an assigned element
     $('a#searchPanelAnchor').click(function ()
     {
      if ($('div#ewrptExtFilterPanel').is(':hidden')) {
       $('div#ewrptExtFilterPanel').slideDown(300, function () {
       $("a#searchPanelAnchor").html('<img src="phprptimages/collapse.gif" alt="" width="9" height="9" border="0">') });
      } else {
       $('div#ewrptExtFilterPanel').slideUp(300, function () {
       $("a#searchPanelAnchor").html('<img src="phprptimages/expand.gif" alt="" width="9" height="9" border="0">') });
      }  
     });
   });
   // End of modification jQuery for slideDown and slideUp effect in search panel, by Masino Sinaga, May 14, 2012
   

3. Still in the PHP Report Maker application, go to Tools -> Advanced Settings, and make sure you have already given checkmark to the following items:
   - Use jQuery
   - Local jQuery files
   afterwards, click on OK button to save the changes.
4. Finally, re-generate your script files using PHP Report Maker as always.

[/hidepost]