How to Add jQuery slideDown and slideUp Effects into the Search Panel in Websites that Created with PHPMaker 9.0.1

The following customization will add jQuery slideDown and slideUp effects into your Search Panel of web application that generated with PHPMaker 9. Please note that you have to implement the related modification I made first before doing the following modification. Warning: You cannot implement the modification below before implementing the modification I mentioned earlier. So, please be kind!

As we know, up to PHPMaker version 9, by default, it has added the ability to collapse or expand the Search 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 PHPMaker 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 PHPMaker template files and adjusting some settings in PHPMaker. In other words, we do not modify any generated script files.

Updated on May 30, 2012: This customization has been implemented in PHPMaker version 9.0.2, it matches to each other, and as a result, it works properly.

Updated on July 21, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.

Updated on September 5, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.

Updated on November 28, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.

Updated on February 9, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

Updated on June 17, 2013: This customization below has been handled by using MasinoSearchPanel extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.

[hidepost]

1. Open your \Script\ew_addon.js file, and find this code (PHPMaker version <= 9.0.2): [code lang="php"]
   
   // Init search panel as collapsed
   .InitSearchPanel = true;
   
   // Init search panel as expanded
   .InitSearchPanel = false;
   
   
   [/code]

   or if you are using PHPMaker version >= 9.0.3, then find this code:

   <!--## if ((bBasicSearch || bExtendedBasicSearch || bAdvancedSearch) && sId == "list") { ##-->
   <?php if (MS_SEARCH_PANEL_COLLAPSED) { ?>
   // Init search panel as collapsed
   if (<!--##=sFormNameSearch##-->) <!--##=sFormNameSearch##-->.InitSearchPanel = true;
   <?php } else { ?>
   // Init search panel as expanded
   if (<!--##=sFormNameSearch##-->) <!--##=sFormNameSearch##-->.InitSearchPanel = false;
   <?php } ?>
   <?php // End of modification Customizing Search Panel, by Masino Sinaga, May 1, 2012 ?>
   <!--## } ##-->
   

   then replace it with the following code (PHPMaker version <= 9.0.2): [code lang="php"]
   
   // Init search panel as collapsed
   .InitSearchPanel = true;
   // Begin of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012
   $(document).ready(function() {
   $("a#searchPanelAnchor").html('');
   $('div#_SearchPanel').hide();
   });
   // End of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012

   // Init search panel as expanded
   .InitSearchPanel = false;
   // Begin of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012
   $(document).ready(function() {
   $("a#searchPanelAnchor").html('');
   $('div#_SearchPanel').show();
   });
   // End of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012

   
   
   [/code]

   or if you are using PHPMaker version >= 9.0.3, then replace with the following code:

   <!--## if ((bBasicSearch || bExtendedBasicSearch || bAdvancedSearch) && sId == "list") { ##-->
   <?php if (MS_SEARCH_PANEL_COLLAPSED) { ?>
   // Init search panel as collapsed
   if (<!--##=sFormNameSearch##-->) <!--##=sFormNameSearch##-->.InitSearchPanel = true;
   // Begin of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phpimages/expand.gif" alt="" width="9" height="9" border="0">');
     $('div#<!--##=sFormNameSearch##-->_SearchPanel').hide();
   });
   // End of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012
   
   <?php } else { ?>
   // Init search panel as expanded
   if (<!--##=sFormNameSearch##-->) <!--##=sFormNameSearch##-->.InitSearchPanel = false;
   // Begin of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phpimages/collapse.gif" alt="" width="9" height="9" border="0">');
     $('div#<!--##=sFormNameSearch##-->_SearchPanel').show();
   });
   // End of modification SlideUp and SlideDown, by Masino Sinaga, May 14, 2012
   <?php } ?>
   <?php // End of modification Customizing Search Panel, by Masino Sinaga, May 1, 2012 ?>
   <!--## } ##-->
   

2. Open your \Script\list-script.php file, and find this code:

   <!--##=sFormName##-->.Init();
   </script>
   

   after the last line of that code, please insert the following code:

   <script type="text/javascript">
   // 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#<!--##=sFormNameSearch##-->_SearchPanel').is(':hidden')) {
       $('div#<!--##=sFormNameSearch##-->_SearchPanel').slideDown(300, function () {
       $("a#searchPanelAnchor").html('<img src="phpimages/collapse.gif" alt="" width="9" height="9" border="0">') });
      } else {
       $('div#<!--##=sFormNameSearch##-->_SearchPanel').slideUp(300, function () {
       $("a#searchPanelAnchor").html('<img src="phpimages/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
   </script>
   

3. Open your \Script\list-script-search.php file, and find this code:

   <a href="javascript:<!--##=sFormNameSearch##-->.ToggleSearchPanel();" style="text-decoration: none;">
   

   then replace it with the following code:

   <a href="javascript:<!--##=sFormNameSearch##-->.ToggleSearchPanel();" id="searchPanelAnchor" style="text-decoration: none;">
   

4. Open your .pmp (PHPMaker project) file, and go to Tools -> Advanced Settings, and make sure you have already given checkmark to the following item:
   - Use jQuery (only exists in PHPMaker version < 9.1.0) - Local YUI/jQuery files (PHPMaker version >= 9.1.0)
   afterwards, click on OK button.
5. Re-generate your script files using PHPMaker as always, and enjoy the result!

[/hidepost]