Integrating Custom CSS and Javascript

From JRapid

Jump to: navigation, search

Introduction

JRapid also allows you to include JavaScript that can edit the CSS, or run any other JavaScript code you wish. Live Event is a powerful JQuery feature that allows you to link an event listener to elements in your pages, and allows them to react to changed values of your elements. The defined function is then called whenever the specified event type occurs for the element.

Example

The following example includes custom Javascript and CSS to dynamically update the class for the form item. The company_name element below will turn red if the user attempts to input "None" as the value. The script includes the JQuery selector.

$('#company_name').live('change', function() {
   if($(this).val() == 'None') {
      $('#company_name').addClass('red_property');
   } else {
      $('#company_name').removeClass('red_property');
   }
});
.red_property {
   background-color: red;
   color: white;
}

The final result when you open the form for company and type "None" should look should look as it does below. Note, your function in this example is executed for every change in the value of company_name so it will be executed for every letter you type while inputting "None". This can be a performance issue if the method is sufficiently complex.


File:mixedresult.PNG


Note: when making multiple changes to the CSS and JavaScript files, they can become cached in your browser. If you are not seeing updates you make to these files and have synchronized with the file view showing your changes clearing your cache will probably help.

See also

Personal tools