Adding jQuery Auto Hide Message After 3 Seconds for the Success Message in Websites that Generated by PHPMaker 9.1.0

Today we are going to add jQuery auto-hide message after 3 seconds for the success message in the web applications that generated by PHPMaker 9.1.0. Actually, this customization is similar to the previous one that I made for version 8.0.3. There are some differences between the older one and this current customization. I added one constant in the configuration file, so you can disable or enable this feature in your web application.

After implementing the following customization, then you will see auto-hide message after 3 seconds only for the success message. When you enable this feature, then it will overide the PHPMaker javascript message box feature in your web application. In other words, if you have enabled the javascript message box from PHPMaker and you also enable this auto-hide message feature by setting up the related constant become TRUE, then the auto-hide message will overide and disable the javascript message box feature.

Please note that the default setting is FALSE. You have to change the value of FALSE become TRUE of the related constant below in order to enable this new auto-hide message feature.

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

[hidepost]

1. Open your \Script\ewcfg.php file, and find this code:

   // General
   

   before that line, please insert the following code:

   // Begin of modification Auto Hide Message, by Masino Sinaga, January 24, 2013
   define("MS_AUTO_HIDE_SUCCESS_MESSAGE", FALSE, TRUE); // default FALSE, so don't forget to change FALSE become TRUE if you want to enable it!
   // End of modification Auto Hide Message, by Masino Sinaga, January 24, 2013
   

2. Open your \Script\phpcommon-scripts.php file, and find this code:

   		$hidden = <!--##=ew_Val(bUseJavaScriptMessage)##-->;
   

   then replace it with the following code:

   		// Begin of modification Auto Hide Message, by Masino Sinaga, January 24, 2013
   		if (MS_AUTO_HIDE_SUCCESS_MESSAGE) {
   			$hidden = FALSE;
   		} else {
   			$hidden = <!--##=ew_Val(bUseJavaScriptMessage)##-->;
   		}
   		// End of modification Auto Hide Message, by Masino Sinaga, January 24, 2013
   

3. Still in that \Script\phpcommon-scripts.php file, find again this code:

   		if ($sSuccessMessage <> "") { // Message in Session, display
   			$html .= "<table class=\"ewMessageTable\"><tr><td class=\"ewSuccessIcon\"></td><td class=\"ewSuccessMessage\">" . $sSuccessMessage . "</td></tr></table>";
   			$_SESSION[EW_SESSION_SUCCESS_MESSAGE] = ""; // Clear message in Session
   		}
   

   then replace it with the following code:

   		if ($sSuccessMessage <> "") { // Message in Session, display
   		    // Begin of modification Auto Hide Message, by Masino Sinaga, January 24, 2013
   			if (MS_AUTO_HIDE_SUCCESS_MESSAGE) {
   			  $html .= "<p class=\"msSuccessMessage\" id=\"ewSuccessMessage\">" . $sSuccessMessage . "</p>";
   			} else {
   			  $html .= "<table class=\"ewMessageTable\"><tr><td class=\"ewSuccessIcon\"></td><td class=\"ewSuccessMessage\">" . $sSuccessMessage . "</td></tr></table>";
   			}
   			// End of modification Auto Hide Message, by Masino Sinaga, January 24, 2013
   			$_SESSION[EW_SESSION_SUCCESS_MESSAGE] = ""; // Clear message in Session
   		}
   

4. Open your \Script\template.php file, and find this code:

   ew_ShowMessage(); // Show message
   

   then replace it with the following code:

   <?php // Begin of modification Auto Hide Message, by Masino Sinaga, January 24, 2013 ?>
   <?php if (MS_AUTO_HIDE_SUCCESS_MESSAGE) { ?>
   <?php // do not call ew_ShowMessage() function ?>
   <?php } else { ?>
   ew_ShowMessage(); // Show message
   <?php } ?>
   <?php // End of modification Auto Hide Message, by Masino Sinaga, January 24, 2013 ?>
   

5. Open your .pmp project file, go to HTML -> Styles, and click on Edit styles button, then find this code:

   /* your CSS styles here */
   

   after that line, please insert the following code:

   /* Begin of modification Auto Hide Message, by Masino Sinaga, January 24, 2013 */
   .msSuccessMessage {
       font-family: Tahoma; /* font name */
       font-size: 8pt; /* font size */    
       color: green; /* message color */
       background-color: #390;
       background: #CFC url(../phpimages/info.gif) 5px 5px no-repeat;
       padding: 0.5em;
       padding-left: 25px;
       border-left: 1px solid #390;
       border-right: 1px solid #390;
       border-top: 1px solid #390;
       border-bottom: 1px solid #390;
       display: block;  
   }
   /* End of modification Auto Hide Message, by Masino Sinaga, January 24, 2013 */ 
   

6. Still in PHPMaker application, copy this following code into your Server Events/Client Scripts -> Client Scripts -> Global -> Pages with header/footer -> Client Script. Since this will be needed in all pages (that have header and footer), then we only add this following code into that section.

   // jQuery for auto hide message after 3 seconds, by Masino Sinaga, October 18, 2011
   $(document).ready(function() {
     $("p#ewSuccessMessage").show().delay(3000).queue(function(n) {
       $(this).hide('slow'); n();
     });  
   });
   // jQuery for auto hide message after 3 seconds, by Masino Sinaga, October 18, 2011
   

   Make sure you have done this step, otherwise you will not see any auto-hide effect for the success message.

7. Finally, re-generate your script files using PHPMaker as always.
8. Warning: Again, if you want to enable this auto-hide message feature, then don't forget to change the following code in your ewcfg9.php file:

   define("MS_AUTO_HIDE_SUCCESS_MESSAGE", FALSE, TRUE);
   

   become:

   define("MS_AUTO_HIDE_SUCCESS_MESSAGE", TRUE, TRUE);
   

[/hidepost]