To Examples

JQuery Examples

Directions

• Create a Rails project named JQuery.
• Generate a non-scaffold-based controller named Test with one view named page1.
• For each of the following examples, the source code in the indicated files.

JQuery1 Example

• Hide a paragraph on a form using JavaScript in an onclick attribute.

--- JQuery/app/views/test/view1.html.erb ----------------------
<h2>JQuery1 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><button id="btn" 
  onclick="document.getElementById('comment').style.visibility = 
          'hidden';">Hide Comment</button></p>

• Nested quote marks inside of double quotes must be single quotes.
• Change some other styles of the paragraph.

JQuery2 Example

• Increase the font size of a paragraph using JavaScript in an onclick attribute.

--- JQuery/app/views/test/view1.html.erb ----------------------
<h2>JQuery2 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><button id="btn" 
  onclick="document.getElementById('comment').style.fontSize = 
          '500%';">Hide Comment</button></p>

• The CSS style font-size becomes fontSize in JavaScript.

JQuery3 Example

• Use jQuery to hide the text in a paragraph.

--- JQuery/app/views/test/view1.html.erb ----------------------
<h2>JQuery3 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><button id="btn" onclick="$('#comment').hide( );")>
     Hide Comment</button></p>

• jQuery code is usually shorter than the equivalent JavaScript code.

JQuery4 Example

• Use JQuery to increase the font size of the paragraph.

--- JQuery/app/views/test/view1.html.erb ----------------------
<h2>JQuery4 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><button id="btn" 
           onclick="$('#comment').css('font-size', '200px');")>
    Hide Comment</button></p>

JQuery5 Example

• A JavaScript event handler function can be defined in a script.

--- JQuery/app/views/test/view1.html.erb ----------------------
<script type='text/javascript'>
hideComment = function( ) {
  document.getElementById('comment').style.visibility = 'hidden';
}
</script>

<h2>JQuery5 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><button id="btn" 
  onclick="hideComment( );">Hide Comment</button></p>

JQuery6 Example

• The equivalent jQuery function defined in a script as an anonymous event handler,
• Unfortunately, this function does not work.
• More effort is needed to get it to work in the JQuery7 Example.

--- JQuery/app/views/test/view1.html.erb ----------------------
<script type='text/javascript'>
$('#btn').click = function( ) {
  $('#comment').hide( );
});
</script>

<h2>JQuery6 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><button id="btn">Hide Comment</button></p>

JQuery7 Example

• The problem with theJQuery6 example is that the function is created before the page is fully loaded so that the DOM has not yet been constructed.
• By waiting to construct the click event handler until the page is ready, the DOM will be completely constructed so the paragraph with id='comment' will be found.

--- JQuery/app/views/test/view1.html.erb ----------------------
<script type='text/javascript'>
$('document').ready(function( ) {
  $('#btn').click(function( ) {
    $('#comment').hide( );
  });
});
</script>

<h2>JQuery7 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><button id="btn">Hide Comment</button></p>

JQuery8 Example

• This function also works with a button defined with the Rails button_tag helper method.

--- JQuery/app/views/test/view1.html.erb ----------------------
<script type='text/javascript'>
$('document').ready(function( ) {
  $('#btn').click(function( ) {
    $('#comment').hide( );
  });
});
</script>

<h2>JQuery8 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><%= button_tag 'Hide Comment', id: 'btn' </p>

JQuery9 Example

• The right place to place this script is in the application.js file in assets/javascripts.

--- JQuery/app/assets/javascripts/application.js ---------------
$('document').ready(function( ) {
  $('#btn').click(function( ) {
    $('#comment').hide( );
  });
});

--- JQuery/app/views/test/view1.html.erb ----------------------
<h2>JQuery9 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><%= button_tag 'Hide Comment', id: 'btn' </p>

JQuery10 Example

• This function can also be written in CoffeeScript and placed in the file test.coffee, also in assets/javascripts.
• CoffeeScript was inspired by Ruby, Python, and Haskell.

--- JQuery/app/assets/javascript/test.coffee ----------------
$('document').ready ->
  $('#btn').click ->
    $('#comment').hide( );

--- JQuery/app/views/test/view1.html.erb ----------------------
<h2>JQuery10 Example</h2>

<p id="comment">The weather has been getting colder lately.</p>

<p><%= button_tag 'Hide Comment', id: 'btn' </p>

• However, recently, CoffeeScript is no longer recommended
• It is not a complete implementation of JavaScript and jQuery.