Computer Tips and Tricks from Biniam: July 2014

Wednesday, July 23, 2014

jQuery - Enable and Disable Textbox (Make fields editable) and Update Button Value

Here is an example of making an input field editable by enabling/disabling it. The example also changes the Value of the submit button from 'Edit' to 'Update'.

You can test the code at this JSFiddle.

 <!DOCTYPE html>  
 <head>  
 <title>jQuery enable/disable button</title>  
 <script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>  
 <script type='text/javascript'>  
 $(function(){  
    $('#submitBtn').click(function(){  
           $('.enableOnInput').prop('disabled', false);  
           $('#submitBtn').val('Update');  
    });  
 });  
 </script>  
 <style type='text/css'>  
    /* Lets use a Google Web Font :) */  
    @import url(http://fonts.googleapis.com/css?family=Finger+Paint);  
    /* Basic CSS for positioning etc */  
    body {  
      font-family: 'Finger Paint', cursive;  
      background-image: url('bg.jpg');  
    }  
    #frame {  
      width: 700px;  
      margin: auto;  
      margin-top: 125px;  
      border: solid 1px #CCC;  
      /* SOME CSS3 DIV SHADOW */  
      -webkit-box-shadow: 0px 0px 10px #CCC;  
      -moz-box-shadow: 0px 0px 10px #CCC;  
      box-shadow: 0px 0px 10px #CCC;  
      /* CSS3 ROUNDED CORNERS */  
      -moz-border-radius: 5px;  
      -webkit-border-radius: 5px;  
      -khtml-border-radius: 5px;  
      border-radius: 5px;  
      background-color: #FFF;  
    }  
    #searchInput {  
      height: 30px;  
      line-height: 30px;  
      padding: 3px;  
      width: 300px;  
    }  
    #submitBtn {  
      height: 40px;  
      line-height: 40px;  
      width: 120px;  
      text-align: center;  
    }  
    #frame h1 {  
      text-align: center;  
    }  
    #frame div {  
      text-align: center;  
      margin-bottom: 30px;  
    }  
 </style>  
 </head>  
 <body>  
   <div id='frame'>    
           <div class='search'>  
                <h1>jQuery Enable and Disable button</h1>  
                <input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/>   
                <input type='submit' name='submit' id='submitBtn' value='Edit'/>  
     </div>  
   </div>  
 </body>  
 </html>

Tuesday, July 22, 2014

Grails: CreateCriteria with Projection

Here is an example of using createCriteria() function in grails using projection of sum.

This method returns the sum of Balance in from Finance model/domain.
You can put this code in Bootstrap.groovy to run it when the program starts.

 println Finance.createCriteria().list() {  
                eq('financeType', FinanceTypeEnum.SAVINGS)  
                projections {  
                     sum('balance')  
                }  
           }

Grails: Displaying image stored in the database on gsp

Here is a Grails implementation of displaying image stored in the database (as byte[]) on gsp.

Notes:

I have spring security core plugin configured
The image tag calls the controller's method directly and it uses the apps url and app.name from Config.groovy and application.properties

 FILE: Domain class - SecUser


 class SecUser extends User {  
      String firstName  
      String middleName  
      String lastName  
     byte [] userPhoto  
      Date dateCreated  
      Date lastUpdated  
      static constraints = {  
       firstName blank: false  
       middleName blank: false  
       lastName blank: false  
       userPhoto nullable: true, maxSize:1024000  
      }  
     String toString() {  
       if(firstName && middleName && lastName){  
         return "${firstName} ${middleName} ${lastName}"  
       } else {  
         return username  
       }  
   }  
 }

 FILE: MyController

 
      class DashboardController {  
           def springSecurityService  
           def index() {  
                render(view: 'index')  
           }  
           def displayAvatarForCurrentUser() {  
                User user = springSecurityService.getCurrentUser()  
                SartUser sartUser = SartUser.findByUsername(user.username)  
                response.outputStream << sartUser.userPhoto // write the photo to the outputstream  
                response.outputStream.flush()  
           }  
      }

 FILE: show.gsp

      <div>  
           <sec:ifLoggedIn>  
                <img src="${grailsApplication.config?.grails?.serverURL}/dashboard/displayAvatarForCurrentUser"/>  
           </sec:ifLoggedIn>  
           %{--If the user has logged in, then the avatar will be shown.--}%  
      </div>


 FILE: Config.groovy


      environments {  
           development {  
                grails.logging.jul.usebridge = true  
                grails.serverURL = "http://localhost:9090/${appName}"  
           }  
           test {  
                grails.serverURL = "http://localhost/${appName}"

           }  
           production {  
                grails.logging.jul.usebridge = false  
                // TODO: grails.serverURL = "http://www.changeme.com/${appName}"

           }  
      }

 
 FILE: application.properties


      app.name=samplegrailsappname

Wednesday, July 23, 2014

jQuery - Enable and Disable Textbox (Make fields editable) and Update Button Value

Tuesday, July 22, 2014

Grails: CreateCriteria with Projection

Grails: Displaying image stored in the database on gsp

Pages

Favourite Links