Showing posts with label JavaScript (JS) / JQuery. Show all posts
Showing posts with label JavaScript (JS) / JQuery. Show all posts

Friday, September 26, 2014

Using the asset pipeline grails plugin to write Page Specific Javascript

The Grails Asset-Pipeline is a plugin used for managing and processing static assets in Grails applications. 

Asset-Pipeline functions include processing and minification of both CSS and JavaScript files. It is also capable of being extended to compile custom static assets, such as CoffeeScript or LESS.

Here is one way of using the asset pipeline grails plugin to write Page Specific Javascript

specific.js // will be included by default

      var pageSpecific = function() {  
           console.log('Hello from specific page!)  
      });  
      $(document).ready(function({  
           if($(document.body).data('page') == 'specific') {  
                pageSpecific())  
           }  
      }));  

index.gsp

 <meta name='layout' content='main'/>  
 <body data-page="specific">  
      <h1>Hello from Specific!</h1>  
 </body>  

main.gsp // modify so that it passes the data-page attribute to the JS (since index.gsp uses main as a layout)

 <body data-page"${pageProperty(name:'body.data-page')}">  
      // main body content  
 </body>

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>