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

For those of you who have implemented the modification regarding the search panel in the list page of websites that created with PHPMaker (see this article: How to Beautify Your Search Panel in Website Created With PHPMaker 8.0.3), then we will now modify that modification again by adding the jQuery slideDown and slideUp effect into the search panel. As we know, PHPMaker by default has added the ability to collapse or expand the search panel 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. Please note that you have to implement the modification in that "How to Beautify Your Search Panel in Website Created With PHPMaker 8.0.3" article above before implementing the following modification below.

All we have to do is customizing the PHPMaker template files and adding some code into the Client Scripts section of PHPMaker. In other words, we do not modify any generated script files.

Please click on the following image below to watch the demo:

[hidepost]

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

   <!--## If PROJ.GetV("SearchPanelCollapsed") Then ##-->
   
   <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
   <script type="text/javascript">
   <!--
   ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
   //-->
   </script>
   <?php } ?>
   
   <!--## Else ##-->
   
   <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
   <script type="text/javascript">
   <!--
   ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
   //-->
   </script>
   <?php } ?>
   
   <!--## End If ##-->
   

   then replace it with this following code:

   <!--## If PROJ.GetV("SearchPanelCollapsed") Then ##-->
   
   <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
   <script type="text/javascript">
   <!--
   // ew_ToggleSearchPanel(cars_list); // Init search panel as collapsed
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phpimages/expand.gif" alt="" width="9" height="9" border="0">');
     $('div#<!--##=sPageObj##-->_SearchPanel').hide();
   });
   //-->
   </script>
   <?php } else { ?>
   <script type="text/javascript">
   <!--
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phpimages/collapse.gif" alt="" width="9" height="9" border="0">');
     $('div#<!--##=sPageObj##-->_SearchPanel').show();
   });
   //-->
   </script>
   <?php } ?>
   
   <!--## Else ##-->
   
   <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
   <script type="text/javascript">
   <!--
   // ew_ToggleSearchPanel(cars_list); // Init search panel as collapsed
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phpimages/expand.gif" alt="" width="9" height="9" border="0">');
     $('div#<!--##=sPageObj##-->_SearchPanel').hide();
   });
   //-->
   </script>
   <?php } else { ?>
   <script type="text/javascript">
   <!--
   $(document).ready(function() {
     $("a#searchPanelAnchor").html('<img src="phpimages/collapse.gif" alt="" width="9" height="9" border="0">');
     $('div#<!--##=sPageObj##-->_SearchPanel').show();
   });
   //-->
   </script>
   <?php } ?>
   
   <!--## End If ##-->
   

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

   <a href="javascript:ew_ToggleSearchPanel(<!--##=sPageObj##-->);" style="text-decoration: none;"><img id="<!--##=sPageObj##-->_SearchImage" src="phpimages/collapse.gif" alt="" width="9" height="9" border="0"></a><span class="phpmaker">&nbsp;<!--##@Search##--></span><br>
   <div id="<!--##=sPageObj##-->_SearchPanel">
   <form name="<!--##=sFormNameBasicSearch##-->" id="<!--##=sFormNameBasicSearch##-->" class="searchpanel" action="<?php echo ew_CurrentPage() ?>"<!--## If bExtendedBasicSearch Then ##--> onsubmit="return <!--##=sPageObj##-->.ValidateSearch(this);"<!--## End If ##-->>
   <input type="hidden" id="t" name="t" value="<!--##=gsTblVar##-->" />
   

   then replace it with this following code:

   <a href="#" style="text-decoration: none;" id="searchPanelAnchor"><img id="<!--##=sPageObj##-->_SearchImage" src="phpimages/collapse.gif" alt="" width="9" height="9" border="0"></a><span class="phpmaker">&nbsp;<!--##@Search##--></span><br>
   <div id="<!--##=sPageObj##-->_SearchPanel">
   <form name="<!--##=sFormNameBasicSearch##-->" id="<!--##=sFormNameBasicSearch##-->" class="searchpanel" action="<?php echo ew_CurrentPage() ?>"<!--## If bExtendedBasicSearch Then ##--> onsubmit="return <!--##=sPageObj##-->.ValidateSearch(this);"<!--## End If ##-->>
   <input type="hidden" id="t" name="t" value="<!--##=gsTblVar##-->" />
   

3. Make sure you have already activated the jQuery Library extension from your PHPMaker application. Click on the Tools -> Extensions menu, and then make sure you have already checked the jQuery Library item. Also, make sure you have already checked the LocaljQueryFiles from the Advanced tab when you select that jQuery Library item above.
4. Still from your PHPMaker application, copy this following code into your Server Events/Client Scripts -> Client Scripts -> Global -> Table-Specific -> List Page -> Client Script. Please note that you have to adjust the cars word below with the selected table name that related to that List Page -> Client Script (in this example below, I use the cars table name):

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

   Do this step for another tables as described above. This is very important since it will be the key to add the client scripts to the related tables and list pages, so you have to adjust the table name in each table's client script.

5. Re-generate all of your related script files using PHPMaker as usual.

[/hidepost]