rails 4.2.0.beta4 → 4.2.0.rc1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/guides/Rakefile +3 -1
- data/guides/bug_report_templates/action_controller_gem.rb +2 -2
- data/guides/bug_report_templates/action_controller_master.rb +2 -2
- data/guides/source/3_0_release_notes.md +2 -2
- data/guides/source/4_1_release_notes.md +1 -1
- data/guides/source/4_2_release_notes.md +250 -225
- data/guides/source/_welcome.html.erb +1 -1
- data/guides/source/action_controller_overview.md +6 -6
- data/guides/source/action_mailer_basics.md +26 -11
- data/guides/source/action_view_overview.md +0 -1
- data/guides/source/active_job_basics.md +29 -23
- data/guides/source/active_record_postgresql.md +2 -7
- data/guides/source/active_record_validations.md +1 -0
- data/guides/source/active_support_core_extensions.md +1 -1
- data/guides/source/active_support_instrumentation.md +5 -5
- data/guides/source/asset_pipeline.md +2 -2
- data/guides/source/association_basics.md +0 -2
- data/guides/source/command_line.md +6 -15
- data/guides/source/configuring.md +4 -4
- data/guides/source/documents.yaml +0 -1
- data/guides/source/engines.md +26 -15
- data/guides/source/form_helpers.md +10 -2
- data/guides/source/getting_started.md +9 -9
- data/guides/source/rails_on_rack.md +2 -2
- data/guides/source/ruby_on_rails_guides_guidelines.md +1 -0
- data/guides/source/security.md +1 -1
- data/guides/source/testing.md +80 -13
- data/guides/source/upgrading_ruby_on_rails.md +23 -20
- metadata +29 -229
- data/guides/output/2_2_release_notes.html +0 -724
- data/guides/output/2_3_release_notes.html +0 -870
- data/guides/output/3_0_release_notes.html +0 -773
- data/guides/output/3_1_release_notes.html +0 -740
- data/guides/output/3_2_release_notes.html +0 -797
- data/guides/output/4_0_release_notes.html +0 -523
- data/guides/output/4_1_release_notes.html +0 -806
- data/guides/output/4_2_release_notes.html +0 -728
- data/guides/output/Gemfile +0 -6
- data/guides/output/_license.html +0 -226
- data/guides/output/_welcome.html +0 -233
- data/guides/output/action_controller_overview.html +0 -1335
- data/guides/output/action_mailer_basics.html +0 -928
- data/guides/output/action_view_overview.html +0 -1509
- data/guides/output/active_job_basics.html +0 -546
- data/guides/output/active_model_basics.html +0 -438
- data/guides/output/active_record_basics.html +0 -594
- data/guides/output/active_record_callbacks.html +0 -592
- data/guides/output/active_record_migrations.html +0 -1123
- data/guides/output/active_record_postgresql.html +0 -675
- data/guides/output/active_record_querying.html +0 -1796
- data/guides/output/active_record_validations.html +0 -1301
- data/guides/output/active_support_core_extensions.html +0 -3450
- data/guides/output/active_support_instrumentation.html +0 -1121
- data/guides/output/api_documentation_guidelines.html +0 -498
- data/guides/output/asset_pipeline.html +0 -1167
- data/guides/output/association_basics.html +0 -2086
- data/guides/output/caching_with_rails.html +0 -553
- data/guides/output/command_line.html +0 -791
- data/guides/output/configuring.html +0 -1055
- data/guides/output/contributing_to_ruby_on_rails.html +0 -657
- data/guides/output/credits.html +0 -284
- data/guides/output/debugging_rails_applications.html +0 -1014
- data/guides/output/development_dependencies_install.html +0 -478
- data/guides/output/engines.html +0 -1438
- data/guides/output/form_helpers.html +0 -1074
- data/guides/output/generators.html +0 -838
- data/guides/output/getting_started.html +0 -2092
- data/guides/output/i18n.html +0 -1198
- data/guides/output/images/akshaysurve.jpg +0 -0
- data/guides/output/images/belongs_to.png +0 -0
- data/guides/output/images/book_icon.gif +0 -0
- data/guides/output/images/bullet.gif +0 -0
- data/guides/output/images/chapters_icon.gif +0 -0
- data/guides/output/images/check_bullet.gif +0 -0
- data/guides/output/images/credits_pic_blank.gif +0 -0
- data/guides/output/images/csrf.png +0 -0
- data/guides/output/images/edge_badge.png +0 -0
- data/guides/output/images/favicon.ico +0 -0
- data/guides/output/images/feature_tile.gif +0 -0
- data/guides/output/images/footer_tile.gif +0 -0
- data/guides/output/images/fxn.png +0 -0
- data/guides/output/images/getting_started/article_with_comments.png +0 -0
- data/guides/output/images/getting_started/challenge.png +0 -0
- data/guides/output/images/getting_started/confirm_dialog.png +0 -0
- data/guides/output/images/getting_started/forbidden_attributes_for_new_article.png +0 -0
- data/guides/output/images/getting_started/forbidden_attributes_for_new_post.png +0 -0
- data/guides/output/images/getting_started/form_with_errors.png +0 -0
- data/guides/output/images/getting_started/index_action_with_edit_link.png +0 -0
- data/guides/output/images/getting_started/new_article.png +0 -0
- data/guides/output/images/getting_started/new_post.png +0 -0
- data/guides/output/images/getting_started/post_with_comments.png +0 -0
- data/guides/output/images/getting_started/rails_welcome.png +0 -0
- data/guides/output/images/getting_started/routing_error_no_controller.png +0 -0
- data/guides/output/images/getting_started/routing_error_no_route_matches.png +0 -0
- data/guides/output/images/getting_started/show_action_for_articles.png +0 -0
- data/guides/output/images/getting_started/show_action_for_posts.png +0 -0
- data/guides/output/images/getting_started/template_is_missing_articles_new.png +0 -0
- data/guides/output/images/getting_started/template_is_missing_posts_new.png +0 -0
- data/guides/output/images/getting_started/undefined_method_post_path.png +0 -0
- data/guides/output/images/getting_started/unknown_action_create_for_articles.png +0 -0
- data/guides/output/images/getting_started/unknown_action_create_for_posts.png +0 -0
- data/guides/output/images/getting_started/unknown_action_new_for_articles.png +0 -0
- data/guides/output/images/getting_started/unknown_action_new_for_posts.png +0 -0
- data/guides/output/images/grey_bullet.gif +0 -0
- data/guides/output/images/habtm.png +0 -0
- data/guides/output/images/has_many.png +0 -0
- data/guides/output/images/has_many_through.png +0 -0
- data/guides/output/images/has_one.png +0 -0
- data/guides/output/images/has_one_through.png +0 -0
- data/guides/output/images/header_backdrop.png +0 -0
- data/guides/output/images/header_tile.gif +0 -0
- data/guides/output/images/i18n/demo_html_safe.png +0 -0
- data/guides/output/images/i18n/demo_localized_pirate.png +0 -0
- data/guides/output/images/i18n/demo_translated_en.png +0 -0
- data/guides/output/images/i18n/demo_translated_pirate.png +0 -0
- data/guides/output/images/i18n/demo_translation_missing.png +0 -0
- data/guides/output/images/i18n/demo_untranslated.png +0 -0
- data/guides/output/images/icons/README +0 -5
- data/guides/output/images/icons/callouts/1.png +0 -0
- data/guides/output/images/icons/callouts/10.png +0 -0
- data/guides/output/images/icons/callouts/11.png +0 -0
- data/guides/output/images/icons/callouts/12.png +0 -0
- data/guides/output/images/icons/callouts/13.png +0 -0
- data/guides/output/images/icons/callouts/14.png +0 -0
- data/guides/output/images/icons/callouts/15.png +0 -0
- data/guides/output/images/icons/callouts/2.png +0 -0
- data/guides/output/images/icons/callouts/3.png +0 -0
- data/guides/output/images/icons/callouts/4.png +0 -0
- data/guides/output/images/icons/callouts/5.png +0 -0
- data/guides/output/images/icons/callouts/6.png +0 -0
- data/guides/output/images/icons/callouts/7.png +0 -0
- data/guides/output/images/icons/callouts/8.png +0 -0
- data/guides/output/images/icons/callouts/9.png +0 -0
- data/guides/output/images/icons/caution.png +0 -0
- data/guides/output/images/icons/example.png +0 -0
- data/guides/output/images/icons/home.png +0 -0
- data/guides/output/images/icons/important.png +0 -0
- data/guides/output/images/icons/next.png +0 -0
- data/guides/output/images/icons/note.png +0 -0
- data/guides/output/images/icons/prev.png +0 -0
- data/guides/output/images/icons/tip.png +0 -0
- data/guides/output/images/icons/up.png +0 -0
- data/guides/output/images/icons/warning.png +0 -0
- data/guides/output/images/nav_arrow.gif +0 -0
- data/guides/output/images/oscardelben.jpg +0 -0
- data/guides/output/images/polymorphic.png +0 -0
- data/guides/output/images/radar.png +0 -0
- data/guides/output/images/rails4_features.png +0 -0
- data/guides/output/images/rails_guides_kindle_cover.jpg +0 -0
- data/guides/output/images/rails_guides_logo.gif +0 -0
- data/guides/output/images/rails_logo_remix.gif +0 -0
- data/guides/output/images/session_fixation.png +0 -0
- data/guides/output/images/tab_grey.gif +0 -0
- data/guides/output/images/tab_info.gif +0 -0
- data/guides/output/images/tab_note.gif +0 -0
- data/guides/output/images/tab_red.gif +0 -0
- data/guides/output/images/tab_yellow.gif +0 -0
- data/guides/output/images/tab_yellow.png +0 -0
- data/guides/output/images/vijaydev.jpg +0 -0
- data/guides/output/index.html +0 -354
- data/guides/output/initialization.html +0 -876
- data/guides/output/javascripts/guides.js +0 -59
- data/guides/output/javascripts/jquery.min.js +0 -4
- data/guides/output/javascripts/responsive-tables.js +0 -43
- data/guides/output/javascripts/syntaxhighlighter/shBrushAS3.js +0 -59
- data/guides/output/javascripts/syntaxhighlighter/shBrushAppleScript.js +0 -75
- data/guides/output/javascripts/syntaxhighlighter/shBrushBash.js +0 -59
- data/guides/output/javascripts/syntaxhighlighter/shBrushCSharp.js +0 -65
- data/guides/output/javascripts/syntaxhighlighter/shBrushColdFusion.js +0 -100
- data/guides/output/javascripts/syntaxhighlighter/shBrushCpp.js +0 -97
- data/guides/output/javascripts/syntaxhighlighter/shBrushCss.js +0 -91
- data/guides/output/javascripts/syntaxhighlighter/shBrushDelphi.js +0 -55
- data/guides/output/javascripts/syntaxhighlighter/shBrushDiff.js +0 -41
- data/guides/output/javascripts/syntaxhighlighter/shBrushErlang.js +0 -52
- data/guides/output/javascripts/syntaxhighlighter/shBrushGroovy.js +0 -67
- data/guides/output/javascripts/syntaxhighlighter/shBrushJScript.js +0 -52
- data/guides/output/javascripts/syntaxhighlighter/shBrushJava.js +0 -57
- data/guides/output/javascripts/syntaxhighlighter/shBrushJavaFX.js +0 -58
- data/guides/output/javascripts/syntaxhighlighter/shBrushPerl.js +0 -72
- data/guides/output/javascripts/syntaxhighlighter/shBrushPhp.js +0 -88
- data/guides/output/javascripts/syntaxhighlighter/shBrushPlain.js +0 -33
- data/guides/output/javascripts/syntaxhighlighter/shBrushPowerShell.js +0 -74
- data/guides/output/javascripts/syntaxhighlighter/shBrushPython.js +0 -64
- data/guides/output/javascripts/syntaxhighlighter/shBrushRuby.js +0 -55
- data/guides/output/javascripts/syntaxhighlighter/shBrushSass.js +0 -94
- data/guides/output/javascripts/syntaxhighlighter/shBrushScala.js +0 -51
- data/guides/output/javascripts/syntaxhighlighter/shBrushSql.js +0 -66
- data/guides/output/javascripts/syntaxhighlighter/shBrushVb.js +0 -56
- data/guides/output/javascripts/syntaxhighlighter/shBrushXml.js +0 -69
- data/guides/output/javascripts/syntaxhighlighter/shCore.js +0 -17
- data/guides/output/layout.html +0 -448
- data/guides/output/layouts_and_rendering.html +0 -1541
- data/guides/output/maintenance_policy.html +0 -257
- data/guides/output/migrations.html +0 -1360
- data/guides/output/nested_model_forms.html +0 -412
- data/guides/output/plugins.html +0 -644
- data/guides/output/rails_application_templates.html +0 -450
- data/guides/output/rails_on_rack.html +0 -547
- data/guides/output/routing.html +0 -1631
- data/guides/output/ruby_on_rails_guides_guidelines.html +0 -329
- data/guides/output/security.html +0 -935
- data/guides/output/stylesheets/fixes.css +0 -16
- data/guides/output/stylesheets/kindle.css +0 -11
- data/guides/output/stylesheets/main.css +0 -713
- data/guides/output/stylesheets/print.css +0 -52
- data/guides/output/stylesheets/reset.css +0 -43
- data/guides/output/stylesheets/responsive-tables.css +0 -50
- data/guides/output/stylesheets/style.css +0 -13
- data/guides/output/stylesheets/syntaxhighlighter/shCore.css +0 -226
- data/guides/output/stylesheets/syntaxhighlighter/shCoreDefault.css +0 -328
- data/guides/output/stylesheets/syntaxhighlighter/shCoreDjango.css +0 -331
- data/guides/output/stylesheets/syntaxhighlighter/shCoreEclipse.css +0 -339
- data/guides/output/stylesheets/syntaxhighlighter/shCoreEmacs.css +0 -324
- data/guides/output/stylesheets/syntaxhighlighter/shCoreFadeToGrey.css +0 -328
- data/guides/output/stylesheets/syntaxhighlighter/shCoreMDUltra.css +0 -324
- data/guides/output/stylesheets/syntaxhighlighter/shCoreMidnight.css +0 -324
- data/guides/output/stylesheets/syntaxhighlighter/shCoreRDark.css +0 -324
- data/guides/output/stylesheets/syntaxhighlighter/shThemeDefault.css +0 -117
- data/guides/output/stylesheets/syntaxhighlighter/shThemeDjango.css +0 -120
- data/guides/output/stylesheets/syntaxhighlighter/shThemeEclipse.css +0 -128
- data/guides/output/stylesheets/syntaxhighlighter/shThemeEmacs.css +0 -113
- data/guides/output/stylesheets/syntaxhighlighter/shThemeFadeToGrey.css +0 -117
- data/guides/output/stylesheets/syntaxhighlighter/shThemeMDUltra.css +0 -113
- data/guides/output/stylesheets/syntaxhighlighter/shThemeMidnight.css +0 -113
- data/guides/output/stylesheets/syntaxhighlighter/shThemeRDark.css +0 -113
- data/guides/output/stylesheets/syntaxhighlighter/shThemeRailsGuides.css +0 -116
- data/guides/output/testing.html +0 -1350
- data/guides/output/upgrading_ruby_on_rails.html +0 -1135
- data/guides/output/working_with_javascript_in_rails.html +0 -587
@@ -1,587 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
|
3
|
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
4
|
-
<head>
|
5
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
7
|
-
|
8
|
-
<title>Working with JavaScript in Rails — Ruby on Rails Guides</title>
|
9
|
-
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
|
10
|
-
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
|
11
|
-
|
12
|
-
<link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shCore.css" />
|
13
|
-
<link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shThemeRailsGuides.css" />
|
14
|
-
|
15
|
-
<link rel="stylesheet" type="text/css" href="stylesheets/fixes.css" />
|
16
|
-
|
17
|
-
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
|
18
|
-
</head>
|
19
|
-
<body class="guide">
|
20
|
-
<div id="topNav">
|
21
|
-
<div class="wrapper">
|
22
|
-
<strong class="more-info-label">More at <a href="http://rubyonrails.org/">rubyonrails.org:</a> </strong>
|
23
|
-
<span class="red-button more-info-button">
|
24
|
-
More Ruby on Rails
|
25
|
-
</span>
|
26
|
-
<ul class="more-info-links s-hidden">
|
27
|
-
<li class="more-info"><a href="http://rubyonrails.org/">Overview</a></li>
|
28
|
-
<li class="more-info"><a href="http://rubyonrails.org/download">Download</a></li>
|
29
|
-
<li class="more-info"><a href="http://rubyonrails.org/deploy">Deploy</a></li>
|
30
|
-
<li class="more-info"><a href="https://github.com/rails/rails">Code</a></li>
|
31
|
-
<li class="more-info"><a href="http://rubyonrails.org/screencasts">Screencasts</a></li>
|
32
|
-
<li class="more-info"><a href="http://rubyonrails.org/documentation">Documentation</a></li>
|
33
|
-
<li class="more-info"><a href="http://rubyonrails.org/community">Community</a></li>
|
34
|
-
<li class="more-info"><a href="http://weblog.rubyonrails.org/">Blog</a></li>
|
35
|
-
</ul>
|
36
|
-
</div>
|
37
|
-
</div>
|
38
|
-
<div id="header">
|
39
|
-
<div class="wrapper clearfix">
|
40
|
-
<h1><a href="index.html" title="Return to home page">Guides.rubyonrails.org</a></h1>
|
41
|
-
<ul class="nav">
|
42
|
-
<li><a class="nav-item" href="index.html">Home</a></li>
|
43
|
-
<li class="guides-index guides-index-large">
|
44
|
-
<a href="index.html" id="guidesMenu" class="guides-index-item nav-item">Guides Index</a>
|
45
|
-
<div id="guides" class="clearfix" style="display: none;">
|
46
|
-
<hr />
|
47
|
-
<dl class="L">
|
48
|
-
<dt>Start Here</dt>
|
49
|
-
<dd><a href="getting_started.html">Getting Started with Rails</a></dd>
|
50
|
-
<dt>Models</dt>
|
51
|
-
<dd><a href="active_record_basics.html">Active Record Basics</a></dd>
|
52
|
-
<dd><a href="active_record_migrations.html">Active Record Migrations</a></dd>
|
53
|
-
<dd><a href="active_record_validations.html">Active Record Validations</a></dd>
|
54
|
-
<dd><a href="active_record_callbacks.html">Active Record Callbacks</a></dd>
|
55
|
-
<dd><a href="association_basics.html">Active Record Associations</a></dd>
|
56
|
-
<dd><a href="active_record_querying.html">Active Record Query Interface</a></dd>
|
57
|
-
<dt>Views</dt>
|
58
|
-
<dd><a href="layouts_and_rendering.html">Layouts and Rendering in Rails</a></dd>
|
59
|
-
<dd><a href="form_helpers.html">Action View Form Helpers</a></dd>
|
60
|
-
<dt>Controllers</dt>
|
61
|
-
<dd><a href="action_controller_overview.html">Action Controller Overview</a></dd>
|
62
|
-
<dd><a href="routing.html">Rails Routing from the Outside In</a></dd>
|
63
|
-
</dl>
|
64
|
-
<dl class="R">
|
65
|
-
<dt>Digging Deeper</dt>
|
66
|
-
<dd><a href="active_support_core_extensions.html">Active Support Core Extensions</a></dd>
|
67
|
-
<dd><a href="i18n.html">Rails Internationalization API</a></dd>
|
68
|
-
<dd><a href="action_mailer_basics.html">Action Mailer Basics</a></dd>
|
69
|
-
<dd><a href="active_job_basics.html">Active Job Basics</a></dd>
|
70
|
-
<dd><a href="security.html">Securing Rails Applications</a></dd>
|
71
|
-
<dd><a href="debugging_rails_applications.html">Debugging Rails Applications</a></dd>
|
72
|
-
<dd><a href="configuring.html">Configuring Rails Applications</a></dd>
|
73
|
-
<dd><a href="command_line.html">Rails Command Line Tools and Rake Tasks</a></dd>
|
74
|
-
<dd><a href="asset_pipeline.html">Asset Pipeline</a></dd>
|
75
|
-
<dd><a href="working_with_javascript_in_rails.html">Working with JavaScript in Rails</a></dd>
|
76
|
-
<dt>Extending Rails</dt>
|
77
|
-
<dd><a href="rails_on_rack.html">Rails on Rack</a></dd>
|
78
|
-
<dd><a href="generators.html">Creating and Customizing Rails Generators</a></dd>
|
79
|
-
<dt>Contributing to Ruby on Rails</dt>
|
80
|
-
<dd><a href="contributing_to_ruby_on_rails.html">Contributing to Ruby on Rails</a></dd>
|
81
|
-
<dd><a href="api_documentation_guidelines.html">API Documentation Guidelines</a></dd>
|
82
|
-
<dd><a href="ruby_on_rails_guides_guidelines.html">Ruby on Rails Guides Guidelines</a></dd>
|
83
|
-
<dt>Maintenance Policy</dt>
|
84
|
-
<dd><a href="maintenance_policy.html">Maintenance Policy</a></dd>
|
85
|
-
<dt>Release Notes</dt>
|
86
|
-
<dd><a href="upgrading_ruby_on_rails.html">Upgrading Ruby on Rails</a></dd>
|
87
|
-
<dd><a href="4_1_release_notes.html">Ruby on Rails 4.1 Release Notes</a></dd>
|
88
|
-
<dd><a href="4_0_release_notes.html">Ruby on Rails 4.0 Release Notes</a></dd>
|
89
|
-
<dd><a href="3_2_release_notes.html">Ruby on Rails 3.2 Release Notes</a></dd>
|
90
|
-
<dd><a href="3_1_release_notes.html">Ruby on Rails 3.1 Release Notes</a></dd>
|
91
|
-
<dd><a href="3_0_release_notes.html">Ruby on Rails 3.0 Release Notes</a></dd>
|
92
|
-
<dd><a href="2_3_release_notes.html">Ruby on Rails 2.3 Release Notes</a></dd>
|
93
|
-
<dd><a href="2_2_release_notes.html">Ruby on Rails 2.2 Release Notes</a></dd>
|
94
|
-
</dl>
|
95
|
-
</div>
|
96
|
-
</li>
|
97
|
-
<li><a class="nav-item" href="contributing_to_ruby_on_rails.html">Contribute</a></li>
|
98
|
-
<li><a class="nav-item" href="credits.html">Credits</a></li>
|
99
|
-
<li class="guides-index guides-index-small">
|
100
|
-
<select class="guides-index-item nav-item">
|
101
|
-
<option value="index.html">Guides Index</option>
|
102
|
-
<optgroup label="Start Here">
|
103
|
-
<option value="getting_started.html">Getting Started with Rails</option>
|
104
|
-
</optgroup>
|
105
|
-
<optgroup label="Models">
|
106
|
-
<option value="active_record_basics.html">Active Record Basics</option>
|
107
|
-
<option value="active_record_migrations.html">Active Record Migrations</option>
|
108
|
-
<option value="active_record_validations.html">Active Record Validations</option>
|
109
|
-
<option value="active_record_callbacks.html">Active Record Callbacks</option>
|
110
|
-
<option value="association_basics.html">Active Record Associations</option>
|
111
|
-
<option value="active_record_querying.html">Active Record Query Interface</option>
|
112
|
-
</optgroup>
|
113
|
-
<optgroup label="Views">
|
114
|
-
<option value="layouts_and_rendering.html">Layouts and Rendering in Rails</option>
|
115
|
-
<option value="form_helpers.html">Action View Form Helpers</option>
|
116
|
-
</optgroup>
|
117
|
-
<optgroup label="Controllers">
|
118
|
-
<option value="action_controller_overview.html">Action Controller Overview</option>
|
119
|
-
<option value="routing.html">Rails Routing from the Outside In</option>
|
120
|
-
</optgroup>
|
121
|
-
<optgroup label="Digging Deeper">
|
122
|
-
<option value="active_support_core_extensions.html">Active Support Core Extensions</option>
|
123
|
-
<option value="i18n.html">Rails Internationalization API</option>
|
124
|
-
<option value="action_mailer_basics.html">Action Mailer Basics</option>
|
125
|
-
<option value="active_job_basics.html">Active Job Basics</option>
|
126
|
-
<option value="security.html">Securing Rails Applications</option>
|
127
|
-
<option value="debugging_rails_applications.html">Debugging Rails Applications</option>
|
128
|
-
<option value="configuring.html">Configuring Rails Applications</option>
|
129
|
-
<option value="command_line.html">Rails Command Line Tools and Rake Tasks</option>
|
130
|
-
<option value="asset_pipeline.html">Asset Pipeline</option>
|
131
|
-
<option value="working_with_javascript_in_rails.html">Working with JavaScript in Rails</option>
|
132
|
-
</optgroup>
|
133
|
-
<optgroup label="Extending Rails">
|
134
|
-
<option value="rails_on_rack.html">Rails on Rack</option>
|
135
|
-
<option value="generators.html">Creating and Customizing Rails Generators</option>
|
136
|
-
</optgroup>
|
137
|
-
<optgroup label="Contributing to Ruby on Rails">
|
138
|
-
<option value="contributing_to_ruby_on_rails.html">Contributing to Ruby on Rails</option>
|
139
|
-
<option value="api_documentation_guidelines.html">API Documentation Guidelines</option>
|
140
|
-
<option value="ruby_on_rails_guides_guidelines.html">Ruby on Rails Guides Guidelines</option>
|
141
|
-
</optgroup>
|
142
|
-
<optgroup label="Maintenance Policy">
|
143
|
-
<option value="maintenance_policy.html">Maintenance Policy</option>
|
144
|
-
</optgroup>
|
145
|
-
<optgroup label="Release Notes">
|
146
|
-
<option value="upgrading_ruby_on_rails.html">Upgrading Ruby on Rails</option>
|
147
|
-
<option value="4_1_release_notes.html">Ruby on Rails 4.1 Release Notes</option>
|
148
|
-
<option value="4_0_release_notes.html">Ruby on Rails 4.0 Release Notes</option>
|
149
|
-
<option value="3_2_release_notes.html">Ruby on Rails 3.2 Release Notes</option>
|
150
|
-
<option value="3_1_release_notes.html">Ruby on Rails 3.1 Release Notes</option>
|
151
|
-
<option value="3_0_release_notes.html">Ruby on Rails 3.0 Release Notes</option>
|
152
|
-
<option value="2_3_release_notes.html">Ruby on Rails 2.3 Release Notes</option>
|
153
|
-
<option value="2_2_release_notes.html">Ruby on Rails 2.2 Release Notes</option>
|
154
|
-
</optgroup>
|
155
|
-
</select>
|
156
|
-
</li>
|
157
|
-
</ul>
|
158
|
-
</div>
|
159
|
-
</div>
|
160
|
-
<hr class="hide" />
|
161
|
-
|
162
|
-
<div id="feature">
|
163
|
-
<div class="wrapper">
|
164
|
-
<h2>Working with JavaScript in Rails</h2><p>This guide covers the built-in Ajax/JavaScript functionality of Rails (and
|
165
|
-
more); it will enable you to create rich and dynamic Ajax applications with
|
166
|
-
ease!</p><p>After reading this guide, you will know:</p>
|
167
|
-
<ul>
|
168
|
-
<li>The basics of Ajax.</li>
|
169
|
-
<li>Unobtrusive JavaScript.</li>
|
170
|
-
<li>How Rails' built-in helpers assist you.</li>
|
171
|
-
<li>How to handle Ajax on the server side.</li>
|
172
|
-
<li>The Turbolinks gem.</li>
|
173
|
-
</ul>
|
174
|
-
|
175
|
-
|
176
|
-
<div id="subCol">
|
177
|
-
<h3 class="chapter"><img src="images/chapters_icon.gif" alt="" />Chapters</h3>
|
178
|
-
<ol class="chapters">
|
179
|
-
<li><a href="#an-introduction-to-ajax">An Introduction to Ajax</a></li>
|
180
|
-
<li><a href="#unobtrusive-javascript">Unobtrusive JavaScript</a></li>
|
181
|
-
<li>
|
182
|
-
<a href="#built-in-helpers">Built-in Helpers</a>
|
183
|
-
|
184
|
-
<ul>
|
185
|
-
<li><a href="#form_for">form_for</a></li>
|
186
|
-
<li><a href="#form_tag">form_tag</a></li>
|
187
|
-
<li><a href="#link_to">link_to</a></li>
|
188
|
-
<li><a href="#button_to">button_to</a></li>
|
189
|
-
</ul>
|
190
|
-
</li>
|
191
|
-
<li>
|
192
|
-
<a href="#server-side-concerns">Server-Side Concerns</a>
|
193
|
-
|
194
|
-
<ul>
|
195
|
-
<li><a href="#a-simple-example">A Simple Example</a></li>
|
196
|
-
</ul>
|
197
|
-
</li>
|
198
|
-
<li>
|
199
|
-
<a href="#turbolinks">Turbolinks</a>
|
200
|
-
|
201
|
-
<ul>
|
202
|
-
<li><a href="#how-turbolinks-works">How Turbolinks Works</a></li>
|
203
|
-
<li><a href="#page-change-events">Page Change Events</a></li>
|
204
|
-
</ul>
|
205
|
-
</li>
|
206
|
-
<li><a href="#other-resources">Other Resources</a></li>
|
207
|
-
</ol>
|
208
|
-
|
209
|
-
</div>
|
210
|
-
|
211
|
-
</div>
|
212
|
-
</div>
|
213
|
-
|
214
|
-
<div id="container">
|
215
|
-
<div class="wrapper">
|
216
|
-
<div id="mainCol">
|
217
|
-
<h3 id="an-introduction-to-ajax">1 An Introduction to Ajax</h3><p>In order to understand Ajax, you must first understand what a web browser does
|
218
|
-
normally.</p><p>When you type <code>http://localhost:3000</code> into your browser's address bar and hit
|
219
|
-
'Go,' the browser (your 'client') makes a request to the server. It parses the
|
220
|
-
response, then fetches all associated assets, like JavaScript files,
|
221
|
-
stylesheets and images. It then assembles the page. If you click a link, it
|
222
|
-
does the same process: fetch the page, fetch the assets, put it all together,
|
223
|
-
show you the results. This is called the 'request response cycle.'</p><p>JavaScript can also make requests to the server, and parse the response. It
|
224
|
-
also has the ability to update information on the page. Combining these two
|
225
|
-
powers, a JavaScript writer can make a web page that can update just parts of
|
226
|
-
itself, without needing to get the full page data from the server. This is a
|
227
|
-
powerful technique that we call Ajax.</p><p>Rails ships with CoffeeScript by default, and so the rest of the examples
|
228
|
-
in this guide will be in CoffeeScript. All of these lessons, of course, apply
|
229
|
-
to vanilla JavaScript as well.</p><p>As an example, here's some CoffeeScript code that makes an Ajax request using
|
230
|
-
the jQuery library:</p><div class="code_container">
|
231
|
-
<pre class="brush: plain; gutter: false; toolbar: false">
|
232
|
-
$.ajax(url: "/test").done (html) ->
|
233
|
-
$("#results").append html
|
234
|
-
|
235
|
-
</pre>
|
236
|
-
</div>
|
237
|
-
<p>This code fetches data from "/test", and then appends the result to the <code>div</code>
|
238
|
-
with an id of <code>results</code>.</p><p>Rails provides quite a bit of built-in support for building web pages with this
|
239
|
-
technique. You rarely have to write this code yourself. The rest of this guide
|
240
|
-
will show you how Rails can help you write websites in this way, but it's
|
241
|
-
all built on top of this fairly simple technique.</p><h3 id="unobtrusive-javascript">2 Unobtrusive JavaScript</h3><p>Rails uses a technique called "Unobtrusive JavaScript" to handle attaching
|
242
|
-
JavaScript to the DOM. This is generally considered to be a best-practice
|
243
|
-
within the frontend community, but you may occasionally read tutorials that
|
244
|
-
demonstrate other ways.</p><p>Here's the simplest way to write JavaScript. You may see it referred to as
|
245
|
-
'inline JavaScript':</p><div class="code_container">
|
246
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
247
|
-
<a href="#" onclick="this.style.backgroundColor='#990000'">Paint it red</a>
|
248
|
-
|
249
|
-
</pre>
|
250
|
-
</div>
|
251
|
-
<p>When clicked, the link background will become red. Here's the problem: what
|
252
|
-
happens when we have lots of JavaScript we want to execute on a click?</p><div class="code_container">
|
253
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
254
|
-
<a href="#" onclick="this.style.backgroundColor='#009900';this.style.color='#FFFFFF';">Paint it green</a>
|
255
|
-
|
256
|
-
</pre>
|
257
|
-
</div>
|
258
|
-
<p>Awkward, right? We could pull the function definition out of the click handler,
|
259
|
-
and turn it into CoffeeScript:</p><div class="code_container">
|
260
|
-
<pre class="brush: plain; gutter: false; toolbar: false">
|
261
|
-
paintIt = (element, backgroundColor, textColor) ->
|
262
|
-
element.style.backgroundColor = backgroundColor
|
263
|
-
if textColor?
|
264
|
-
element.style.color = textColor
|
265
|
-
|
266
|
-
</pre>
|
267
|
-
</div>
|
268
|
-
<p>And then on our page:</p><div class="code_container">
|
269
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
270
|
-
<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>
|
271
|
-
|
272
|
-
</pre>
|
273
|
-
</div>
|
274
|
-
<p>That's a little bit better, but what about multiple links that have the same
|
275
|
-
effect?</p><div class="code_container">
|
276
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
277
|
-
<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>
|
278
|
-
<a href="#" onclick="paintIt(this, '#009900', '#FFFFFF')">Paint it green</a>
|
279
|
-
<a href="#" onclick="paintIt(this, '#000099', '#FFFFFF')">Paint it blue</a>
|
280
|
-
|
281
|
-
</pre>
|
282
|
-
</div>
|
283
|
-
<p>Not very DRY, eh? We can fix this by using events instead. We'll add a <code>data-*</code>
|
284
|
-
attribute to our link, and then bind a handler to the click event of every link
|
285
|
-
that has that attribute:</p><div class="code_container">
|
286
|
-
<pre class="brush: plain; gutter: false; toolbar: false">
|
287
|
-
paintIt = (element, backgroundColor, textColor) ->
|
288
|
-
element.style.backgroundColor = backgroundColor
|
289
|
-
if textColor?
|
290
|
-
element.style.color = textColor
|
291
|
-
|
292
|
-
$ ->
|
293
|
-
$("a[data-background-color]").click (e) ->
|
294
|
-
e.preventDefault()
|
295
|
-
|
296
|
-
backgroundColor = $(this).data("background-color")
|
297
|
-
textColor = $(this).data("text-color")
|
298
|
-
paintIt(this, backgroundColor, textColor)
|
299
|
-
|
300
|
-
</pre>
|
301
|
-
</div>
|
302
|
-
<div class="code_container">
|
303
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
304
|
-
<a href="#" data-background-color="#990000">Paint it red</a>
|
305
|
-
<a href="#" data-background-color="#009900" data-text-color="#FFFFFF">Paint it green</a>
|
306
|
-
<a href="#" data-background-color="#000099" data-text-color="#FFFFFF">Paint it blue</a>
|
307
|
-
|
308
|
-
</pre>
|
309
|
-
</div>
|
310
|
-
<p>We call this 'unobtrusive' JavaScript because we're no longer mixing our
|
311
|
-
JavaScript into our HTML. We've properly separated our concerns, making future
|
312
|
-
change easy. We can easily add behavior to any link by adding the data
|
313
|
-
attribute. We can run all of our JavaScript through a minimizer and
|
314
|
-
concatenator. We can serve our entire JavaScript bundle on every page, which
|
315
|
-
means that it'll get downloaded on the first page load and then be cached on
|
316
|
-
every page after that. Lots of little benefits really add up.</p><p>The Rails team strongly encourages you to write your CoffeeScript (and
|
317
|
-
JavaScript) in this style, and you can expect that many libraries will also
|
318
|
-
follow this pattern.</p><h3 id="built-in-helpers">3 Built-in Helpers</h3><p>Rails provides a bunch of view helper methods written in Ruby to assist you
|
319
|
-
in generating HTML. Sometimes, you want to add a little Ajax to those elements,
|
320
|
-
and Rails has got your back in those cases.</p><p>Because of Unobtrusive JavaScript, the Rails "Ajax helpers" are actually in two
|
321
|
-
parts: the JavaScript half and the Ruby half.</p><p><a href="https://github.com/rails/jquery-ujs/blob/master/src/rails.js">rails.js</a>
|
322
|
-
provides the JavaScript half, and the regular Ruby view helpers add appropriate
|
323
|
-
tags to your DOM. The CoffeeScript in rails.js then listens for these
|
324
|
-
attributes, and attaches appropriate handlers.</p><h4 id="form_for">3.1 form_for</h4><p><a href="http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_for"><code>form_for</code></a>
|
325
|
-
is a helper that assists with writing forms. <code>form_for</code> takes a <code>:remote</code>
|
326
|
-
option. It works like this:</p><div class="code_container">
|
327
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
328
|
-
<%= form_for(@article, remote: true) do |f| %>
|
329
|
-
...
|
330
|
-
<% end %>
|
331
|
-
|
332
|
-
</pre>
|
333
|
-
</div>
|
334
|
-
<p>This will generate the following HTML:</p><div class="code_container">
|
335
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
336
|
-
<form accept-charset="UTF-8" action="/articles" class="new_article" data-remote="true" id="new_article" method="post">
|
337
|
-
...
|
338
|
-
</form>
|
339
|
-
|
340
|
-
</pre>
|
341
|
-
</div>
|
342
|
-
<p>Note the <code>data-remote="true"</code>. Now, the form will be submitted by Ajax rather
|
343
|
-
than by the browser's normal submit mechanism.</p><p>You probably don't want to just sit there with a filled out <code><form></code>, though.
|
344
|
-
You probably want to do something upon a successful submission. To do that,
|
345
|
-
bind to the <code>ajax:success</code> event. On failure, use <code>ajax:error</code>. Check it out:</p><div class="code_container">
|
346
|
-
<pre class="brush: plain; gutter: false; toolbar: false">
|
347
|
-
$(document).ready ->
|
348
|
-
$("#new_article").on("ajax:success", (e, data, status, xhr) ->
|
349
|
-
$("#new_article").append xhr.responseText
|
350
|
-
).on "ajax:error", (e, xhr, status, error) ->
|
351
|
-
$("#new_article").append "<p>ERROR</p>"
|
352
|
-
|
353
|
-
</pre>
|
354
|
-
</div>
|
355
|
-
<p>Obviously, you'll want to be a bit more sophisticated than that, but it's a
|
356
|
-
start. You can see more about the events <a href="https://github.com/rails/jquery-ujs/wiki/ajax">in the jquery-ujs wiki</a>.</p><h4 id="form_tag">3.2 form_tag</h4><p><a href="http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-form_tag"><code>form_tag</code></a>
|
357
|
-
is very similar to <code>form_for</code>. It has a <code>:remote</code> option that you can use like
|
358
|
-
this:</p><div class="code_container">
|
359
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
360
|
-
<%= form_tag('/articles', remote: true) do %>
|
361
|
-
...
|
362
|
-
<% end %>
|
363
|
-
|
364
|
-
</pre>
|
365
|
-
</div>
|
366
|
-
<p>This will generate the following HTML:</p><div class="code_container">
|
367
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
368
|
-
<form accept-charset="UTF-8" action="/articles" data-remote="true" method="post">
|
369
|
-
...
|
370
|
-
</form>
|
371
|
-
|
372
|
-
</pre>
|
373
|
-
</div>
|
374
|
-
<p>Everything else is the same as <code>form_for</code>. See its documentation for full
|
375
|
-
details.</p><h4 id="link_to">3.3 link_to</h4><p><a href="http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to"><code>link_to</code></a>
|
376
|
-
is a helper that assists with generating links. It has a <code>:remote</code> option you
|
377
|
-
can use like this:</p><div class="code_container">
|
378
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
379
|
-
<%= link_to "an article", @article, remote: true %>
|
380
|
-
|
381
|
-
</pre>
|
382
|
-
</div>
|
383
|
-
<p>which generates</p><div class="code_container">
|
384
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
385
|
-
<a href="/articles/1" data-remote="true">an article</a>
|
386
|
-
|
387
|
-
</pre>
|
388
|
-
</div>
|
389
|
-
<p>You can bind to the same Ajax events as <code>form_for</code>. Here's an example. Let's
|
390
|
-
assume that we have a list of articles that can be deleted with just one
|
391
|
-
click. We would generate some HTML like this:</p><div class="code_container">
|
392
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
393
|
-
<%= link_to "Delete article", @article, remote: true, method: :delete %>
|
394
|
-
|
395
|
-
</pre>
|
396
|
-
</div>
|
397
|
-
<p>and write some CoffeeScript like this:</p><div class="code_container">
|
398
|
-
<pre class="brush: plain; gutter: false; toolbar: false">
|
399
|
-
$ ->
|
400
|
-
$("a[data-remote]").on "ajax:success", (e, data, status, xhr) ->
|
401
|
-
alert "The article was deleted."
|
402
|
-
|
403
|
-
</pre>
|
404
|
-
</div>
|
405
|
-
<h4 id="button_to">3.4 button_to</h4><p><a href="http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to"><code>button_to</code></a> is a helper that helps you create buttons. It has a <code>:remote</code> option that you can call like this:</p><div class="code_container">
|
406
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
407
|
-
<%= button_to "An article", @article, remote: true %>
|
408
|
-
|
409
|
-
</pre>
|
410
|
-
</div>
|
411
|
-
<p>this generates</p><div class="code_container">
|
412
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
413
|
-
<form action="/articles/1" class="button_to" data-remote="true" method="post">
|
414
|
-
<div><input type="submit" value="An article"></div>
|
415
|
-
</form>
|
416
|
-
|
417
|
-
</pre>
|
418
|
-
</div>
|
419
|
-
<p>Since it's just a <code><form></code>, all of the information on <code>form_for</code> also applies.</p><h3 id="server-side-concerns">4 Server-Side Concerns</h3><p>Ajax isn't just client-side, you also need to do some work on the server
|
420
|
-
side to support it. Often, people like their Ajax requests to return JSON
|
421
|
-
rather than HTML. Let's discuss what it takes to make that happen.</p><h4 id="a-simple-example">4.1 A Simple Example</h4><p>Imagine you have a series of users that you would like to display and provide a
|
422
|
-
form on that same page to create a new user. The index action of your
|
423
|
-
controller looks like this:</p><div class="code_container">
|
424
|
-
<pre class="brush: ruby; gutter: false; toolbar: false">
|
425
|
-
class UsersController < ApplicationController
|
426
|
-
def index
|
427
|
-
@users = User.all
|
428
|
-
@user = User.new
|
429
|
-
end
|
430
|
-
# ...
|
431
|
-
|
432
|
-
</pre>
|
433
|
-
</div>
|
434
|
-
<p>The index view (<code>app/views/users/index.html.erb</code>) contains:</p><div class="code_container">
|
435
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
436
|
-
<b>Users</b>
|
437
|
-
|
438
|
-
<ul id="users">
|
439
|
-
<%= render @users %>
|
440
|
-
</ul>
|
441
|
-
|
442
|
-
<br>
|
443
|
-
|
444
|
-
<%= form_for(@user, remote: true) do |f| %>
|
445
|
-
<%= f.label :name %><br>
|
446
|
-
<%= f.text_field :name %>
|
447
|
-
<%= f.submit %>
|
448
|
-
<% end %>
|
449
|
-
|
450
|
-
</pre>
|
451
|
-
</div>
|
452
|
-
<p>The <code>app/views/users/_user.html.erb</code> partial contains the following:</p><div class="code_container">
|
453
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
454
|
-
<li><%= user.name %></li>
|
455
|
-
|
456
|
-
</pre>
|
457
|
-
</div>
|
458
|
-
<p>The top portion of the index page displays the users. The bottom portion
|
459
|
-
provides a form to create a new user.</p><p>The bottom form will call the <code>create</code> action on the <code>UsersController</code>. Because
|
460
|
-
the form's remote option is set to true, the request will be posted to the
|
461
|
-
<code>UsersController</code> as an Ajax request, looking for JavaScript. In order to
|
462
|
-
serve that request, the <code>create</code> action of your controller would look like
|
463
|
-
this:</p><div class="code_container">
|
464
|
-
<pre class="brush: ruby; gutter: false; toolbar: false">
|
465
|
-
# app/controllers/users_controller.rb
|
466
|
-
# ......
|
467
|
-
def create
|
468
|
-
@user = User.new(params[:user])
|
469
|
-
|
470
|
-
respond_to do |format|
|
471
|
-
if @user.save
|
472
|
-
format.html { redirect_to @user, notice: 'User was successfully created.' }
|
473
|
-
format.js {}
|
474
|
-
format.json { render json: @user, status: :created, location: @user }
|
475
|
-
else
|
476
|
-
format.html { render action: "new" }
|
477
|
-
format.json { render json: @user.errors, status: :unprocessable_entity }
|
478
|
-
end
|
479
|
-
end
|
480
|
-
end
|
481
|
-
|
482
|
-
</pre>
|
483
|
-
</div>
|
484
|
-
<p>Notice the format.js in the <code>respond_to</code> block; that allows the controller to
|
485
|
-
respond to your Ajax request. You then have a corresponding
|
486
|
-
<code>app/views/users/create.js.erb</code> view file that generates the actual JavaScript
|
487
|
-
code that will be sent and executed on the client side.</p><div class="code_container">
|
488
|
-
<pre class="brush: ruby; html-script: true; gutter: false; toolbar: false">
|
489
|
-
$("<%= escape_javascript(render @user) %>").appendTo("#users");
|
490
|
-
|
491
|
-
</pre>
|
492
|
-
</div>
|
493
|
-
<h3 id="turbolinks">5 Turbolinks</h3><p>Rails 4 ships with the <a href="https://github.com/rails/turbolinks">Turbolinks gem</a>.
|
494
|
-
This gem uses Ajax to speed up page rendering in most applications.</p><h4 id="how-turbolinks-works">5.1 How Turbolinks Works</h4><p>Turbolinks attaches a click handler to all <code><a></code> on the page. If your browser
|
495
|
-
supports
|
496
|
-
[PushState](<a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#The_pushState(%5C).C2.A0method">https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#The_pushState(\).C2.A0method</a>),
|
497
|
-
Turbolinks will make an Ajax request for the page, parse the response, and
|
498
|
-
replace the entire <code><body></code> of the page with the <code><body></code> of the response. It
|
499
|
-
will then use PushState to change the URL to the correct one, preserving
|
500
|
-
refresh semantics and giving you pretty URLs.</p><p>The only thing you have to do to enable Turbolinks is have it in your Gemfile,
|
501
|
-
and put <code>//= require turbolinks</code> in your CoffeeScript manifest, which is usually
|
502
|
-
<code>app/assets/javascripts/application.js</code>.</p><p>If you want to disable Turbolinks for certain links, add a <code>data-no-turbolink</code>
|
503
|
-
attribute to the tag:</p><div class="code_container">
|
504
|
-
<pre class="brush: xml; gutter: false; toolbar: false">
|
505
|
-
<a href="..." data-no-turbolink>No turbolinks here</a>.
|
506
|
-
|
507
|
-
</pre>
|
508
|
-
</div>
|
509
|
-
<h4 id="page-change-events">5.2 Page Change Events</h4><p>When writing CoffeeScript, you'll often want to do some sort of processing upon
|
510
|
-
page load. With jQuery, you'd write something like this:</p><div class="code_container">
|
511
|
-
<pre class="brush: plain; gutter: false; toolbar: false">
|
512
|
-
$(document).ready ->
|
513
|
-
alert "page has loaded!"
|
514
|
-
|
515
|
-
</pre>
|
516
|
-
</div>
|
517
|
-
<p>However, because Turbolinks overrides the normal page loading process, the
|
518
|
-
event that this relies on will not be fired. If you have code that looks like
|
519
|
-
this, you must change your code to do this instead:</p><div class="code_container">
|
520
|
-
<pre class="brush: plain; gutter: false; toolbar: false">
|
521
|
-
$(document).on "page:change", ->
|
522
|
-
alert "page has loaded!"
|
523
|
-
|
524
|
-
</pre>
|
525
|
-
</div>
|
526
|
-
<p>For more details, including other events you can bind to, check out <a href="https://github.com/rails/turbolinks/blob/master/README.md">the
|
527
|
-
Turbolinks
|
528
|
-
README</a>.</p><h3 id="other-resources">6 Other Resources</h3><p>Here are some helpful links to help you learn even more:</p>
|
529
|
-
<ul>
|
530
|
-
<li><a href="https://github.com/rails/jquery-ujs/wiki">jquery-ujs wiki</a></li>
|
531
|
-
<li><a href="https://github.com/rails/jquery-ujs/wiki/External-articles">jquery-ujs list of external articles</a></li>
|
532
|
-
<li><a href="http://www.alfajango.com/blog/rails-3-remote-links-and-forms/">Rails 3 Remote Links and Forms: A Definitive Guide</a></li>
|
533
|
-
<li><a href="http://railscasts.com/episodes/205-unobtrusive-javascript">Railscasts: Unobtrusive JavaScript</a></li>
|
534
|
-
<li><a href="http://railscasts.com/episodes/390-turbolinks">Railscasts: Turbolinks</a></li>
|
535
|
-
</ul>
|
536
|
-
|
537
|
-
|
538
|
-
<h3>Feedback</h3>
|
539
|
-
<p>
|
540
|
-
You're encouraged to help improve the quality of this guide.
|
541
|
-
</p>
|
542
|
-
<p>
|
543
|
-
Please contribute if you see any typos or factual errors.
|
544
|
-
To get started, you can read our <a href="http://edgeguides.rubyonrails.org/contributing_to_ruby_on_rails.html#contributing-to-the-rails-documentation">documentation contributions</a> section.
|
545
|
-
</p>
|
546
|
-
<p>
|
547
|
-
You may also find incomplete content, or stuff that is not up to date.
|
548
|
-
Please do add any missing documentation for master. Make sure to check
|
549
|
-
<a href="http://edgeguides.rubyonrails.org">Edge Guides</a> first to verify
|
550
|
-
if the issues are already fixed or not on the master branch.
|
551
|
-
Check the <a href="ruby_on_rails_guides_guidelines.html">Ruby on Rails Guides Guidelines</a>
|
552
|
-
for style and conventions.
|
553
|
-
</p>
|
554
|
-
<p>
|
555
|
-
If for whatever reason you spot something to fix but cannot patch it yourself, please
|
556
|
-
<a href="https://github.com/rails/rails/issues">open an issue</a>.
|
557
|
-
</p>
|
558
|
-
<p>And last but not least, any kind of discussion regarding Ruby on Rails
|
559
|
-
documentation is very welcome in the <a href="http://groups.google.com/group/rubyonrails-docs">rubyonrails-docs mailing list</a>.
|
560
|
-
</p>
|
561
|
-
</div>
|
562
|
-
</div>
|
563
|
-
</div>
|
564
|
-
|
565
|
-
<hr class="hide" />
|
566
|
-
<div id="footer">
|
567
|
-
<div class="wrapper">
|
568
|
-
<p>This work is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> License</p>
|
569
|
-
<p>"Rails", "Ruby on Rails", and the Rails logo are trademarks of David Heinemeier Hansson. All rights reserved.</p>
|
570
|
-
|
571
|
-
</div>
|
572
|
-
</div>
|
573
|
-
|
574
|
-
<script type="text/javascript" src="javascripts/jquery.min.js"></script>
|
575
|
-
<script type="text/javascript" src="javascripts/responsive-tables.js"></script>
|
576
|
-
<script type="text/javascript" src="javascripts/guides.js"></script>
|
577
|
-
<script type="text/javascript" src="javascripts/syntaxhighlighter/shCore.js"></script>
|
578
|
-
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushRuby.js"></script>
|
579
|
-
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushXml.js"></script>
|
580
|
-
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushSql.js"></script>
|
581
|
-
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushPlain.js"></script>
|
582
|
-
<script type="text/javascript">
|
583
|
-
SyntaxHighlighter.all();
|
584
|
-
$(guidesIndex.bind);
|
585
|
-
</script>
|
586
|
-
</body>
|
587
|
-
</html>
|