jquery_ujs_extended 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +20 -0
- data/README.md +61 -0
- data/lib/assets/javascripts/jquery_ujs_extended.js.coffee +45 -0
- data/lib/jquery_ujs_extended.rb +4 -0
- data/test/ajax.html +5 -0
- data/test/config.ru +14 -0
- data/test/index.html +74 -0
- data/test/rails.js +429 -0
- data/test/spinner.gif +0 -0
- metadata +53 -0
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2012 Anthony Alberto
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,61 @@
|
|
1
|
+
jquery-ujs-extended
|
2
|
+
===================
|
3
|
+
|
4
|
+
Extend usage of html5 data attributes of the jquery UJS gem in the context of Ajax calls.
|
5
|
+
It's just global attributes listeners I find myself often needing to rewrite in my new projects to save time on javascript writing. I extracted it as a gem.
|
6
|
+
|
7
|
+
#Prerequisites
|
8
|
+
|
9
|
+
This has been tested on Rails 3.2.8 so far. Since it's just a collection of JS listeners, it should work on any version really.
|
10
|
+
|
11
|
+
Requires :
|
12
|
+
- Usage of asset pipeline
|
13
|
+
- Coffeescript
|
14
|
+
- jquery-rails
|
15
|
+
|
16
|
+
#Installation
|
17
|
+
|
18
|
+
Before it's released as a gem, you can open your Gemfile and in the asset group add :
|
19
|
+
|
20
|
+
gem 'jquery_ujs_extended', git: https://github.com/anthonyalberto/jquery-ujs-extended
|
21
|
+
|
22
|
+
#Usage
|
23
|
+
|
24
|
+
When specifying a target DOM element in custom data attributes, you have to use the [jQuery selector](http://api.jquery.com/category/selectors/) syntax. You can modify several elements on the DOM at once this way
|
25
|
+
|
26
|
+
##Ajax listeners
|
27
|
+
|
28
|
+
This applies to <form>, <a>, <input> and <select> elements. Needs to be used with `data-remote` from jquery-ujs
|
29
|
+
|
30
|
+
* data-update listener that automatically updates the DOM elements
|
31
|
+
|
32
|
+
link_to "Update", url_path, data: {remote: true, update: "#div1"}
|
33
|
+
form_for @object, data: {remote: true, update: "#div1"}
|
34
|
+
* data-destroy listener that automatically deletes the DOM elements
|
35
|
+
|
36
|
+
link_to "Destroy", url_path, data: {remote: true, destroy: ".class1"}
|
37
|
+
form_for @object, data: {remote: true, destroy: ".class1 .class2"}
|
38
|
+
* data-append listener that automatically appends to the DOM elements
|
39
|
+
|
40
|
+
link_to "Append", url_path, data: {remote: true, append: "#div1 span .class1"}
|
41
|
+
* data-loader. Takes a DOM element. Will show the DOM element before sending the request, and hide it when the request is completed. This is best used to show a spinner image during a request.
|
42
|
+
|
43
|
+
<%= link_to "Loader", url_path, data: {remote: true, append: ".loader"} %>
|
44
|
+
<%= image_tag "/my/image.jpg", style: {display:'none'}, class: 'loader' %>
|
45
|
+
* data-redirect. Takes a url. Redirects to the url on ajax success.
|
46
|
+
|
47
|
+
link_to "redirect", url_path, data: {remote: true, redirect: "/my/url"}
|
48
|
+
|
49
|
+
##Behaviour
|
50
|
+
|
51
|
+
* data-integer. If specified and applied to a text field, will prevent the field from being anything but an integer.Value: minimum value. Leave blank if you don't want one.
|
52
|
+
|
53
|
+
text_field_tag "quantity", 1, data: {integer: 1}
|
54
|
+
* data-float. If specified and applied to a text field, will prevent the field from being anything but a float.Value: minimum value. Leave blank if you don't want one.
|
55
|
+
|
56
|
+
text_field_tag "price", 1, data: {float: 0.01}
|
57
|
+
|
58
|
+
|
59
|
+
#Bugs? Thoughts? Ideas to make it better?
|
60
|
+
|
61
|
+
Don't hesitate to open an issue here and I'll see what I can do!
|
@@ -0,0 +1,45 @@
|
|
1
|
+
$ ->
|
2
|
+
ajaxSelectors = (attribute) ->
|
3
|
+
"input[#{attribute}], a[#{attribute}], form[#{attribute}], textarea[#{attribute}], select[#{attribute}]"
|
4
|
+
|
5
|
+
#Ugly ... there must be a better way to do it ...
|
6
|
+
updateNumberField = (element, min_value, value) ->
|
7
|
+
if(!isNaN(min_value) && ((value < min_value) || isNaN(value)))
|
8
|
+
element.val(min_value)
|
9
|
+
else if isNaN(min_value) && !isNaN(value)
|
10
|
+
element.val(value)
|
11
|
+
else if isNaN(value)
|
12
|
+
element.val('')
|
13
|
+
else
|
14
|
+
element.val(value)
|
15
|
+
|
16
|
+
|
17
|
+
$(document).on 'ajax:success', ajaxSelectors('data-update'), (evt, data) ->
|
18
|
+
$($(@).data 'update').html(data)
|
19
|
+
|
20
|
+
$(document).on 'ajax:success', ajaxSelectors('data-destroy'), (evt, data) ->
|
21
|
+
$($(@).data 'destroy').remove()
|
22
|
+
|
23
|
+
$(document).on 'ajax:success', ajaxSelectors('data-append'), (evt, data) ->
|
24
|
+
$($(@).data 'append').append(data)
|
25
|
+
|
26
|
+
$(document).on 'ajax:before', ajaxSelectors('data-loader'), (evt, data) ->
|
27
|
+
$($(@).data 'loader').show()
|
28
|
+
|
29
|
+
$(document).on 'ajax:complete', ajaxSelectors('data-loader'), (evt, data) ->
|
30
|
+
$($(@).data 'loader').hide()
|
31
|
+
|
32
|
+
$(document).on 'ajax:success', ajaxSelectors('data-redirect'), (evt, data) ->
|
33
|
+
window.location.replace($(@).data 'redirect')
|
34
|
+
|
35
|
+
$(document).on 'change', ajaxSelectors('data-integer'), (evt, data) ->
|
36
|
+
min_value = parseInt($(@).data('integer'))
|
37
|
+
value = parseInt($(@).val())
|
38
|
+
updateNumberField($(@), min_value, value)
|
39
|
+
|
40
|
+
$(document).on 'change', ajaxSelectors('data-float'), (evt, data) ->
|
41
|
+
min_value = parseFloat($(@).data('float'))
|
42
|
+
|
43
|
+
value = parseFloat($(@).val())
|
44
|
+
updateNumberField($(@), min_value, value)
|
45
|
+
|
data/test/ajax.html
ADDED
data/test/config.ru
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
require 'sprockets'
|
2
|
+
require 'coffee-script'
|
3
|
+
|
4
|
+
Root = File.expand_path("../..", __FILE__)
|
5
|
+
|
6
|
+
Assets = Sprockets::Environment.new do |env|
|
7
|
+
env.append_path File.join(Root, "lib", "assets", "javascripts")
|
8
|
+
end
|
9
|
+
|
10
|
+
map "/js" do
|
11
|
+
run Assets
|
12
|
+
end
|
13
|
+
|
14
|
+
run Rack::Directory.new(File.join(Root, "test"))
|
data/test/index.html
ADDED
@@ -0,0 +1,74 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<title>Home</title>
|
6
|
+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
7
|
+
<script type="text/javascript" src="/rails.js"></script>
|
8
|
+
|
9
|
+
|
10
|
+
<script type="text/javascript" src="/js/jquery_ujs_extended.js"></script>
|
11
|
+
<style>
|
12
|
+
div{background:#eee;float:left;margin-right:30px;padding:10px;margin-top:10px;}
|
13
|
+
#receiver{position:static;bottom:0;right:0;}
|
14
|
+
h2{margin:5px 0px;}
|
15
|
+
</style>
|
16
|
+
</head>
|
17
|
+
<body class="page-index">
|
18
|
+
|
19
|
+
<div>
|
20
|
+
<h2>Testing links data-*</h2>
|
21
|
+
<a href="/ajax.html" data-remote='true' data-update='#receiver'>update</a>
|
22
|
+
<a href="/ajax.html" data-remote='true' data-destroy='#destroyed'>destroy</a>
|
23
|
+
<a href="/ajax.html" data-remote='true' data-append='#receiver'>append</a><br/>
|
24
|
+
<a href="/ajax.html" data-remote='true' data-loader='#spinner'>loader</a>
|
25
|
+
<a href="/ajax.html" data-remote="true" data-redirect='/index.html?redirected=true'>redirect</a>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<div>
|
29
|
+
<h2>Testing forms data-*</h2>
|
30
|
+
<form data-remote='true' data-update='#receiver' method='get' action='/ajax.html'><input type="submit" value='update'/></form>
|
31
|
+
<form data-remote='true' data-destroy='#destroyed' method='get' action='/ajax.html'><input type="submit" value='destroy'/></form>
|
32
|
+
<form data-remote='true' data-append='#receiver' method='get' action='/ajax.html'><input type="submit" value='append'/></form>
|
33
|
+
<form data-remote='true' data-loader='#spinner' method='get' action='/ajax.html'><input type="submit" value='loader'/></form>
|
34
|
+
<form data-remote='true' data-redirect='/index.html?redirected=true' method='get' action='/ajax.html'><input type="submit" value='redirect'/></form>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<div>
|
38
|
+
<h2>Testing data-url</h2>
|
39
|
+
update <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-update='#receiver' data-type='html' name="quantity" data-integer='1'/><br/>
|
40
|
+
append <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-append='#receiver' data-type='html' name="quantity" data-integer='1'/><br/>
|
41
|
+
destroy <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-destroy='#destroyed' data-type='html' name="quantity" data-integer='1'/><br/>
|
42
|
+
loader <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-loader='#spinner' data-type='html' name="quantity" data-integer='1'/><br/>
|
43
|
+
redirect <input type="text" value='1' data-remote='true' data-url='/ajax.html' data-redirect='/index.html?redirected=true' data-type='html' name="quantity" data-integer='1'/><br/>
|
44
|
+
<br/>
|
45
|
+
update <select data-url='/ajax.html' data-remote='true' data-update='#receiver' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
46
|
+
append <select data-url='/ajax.html' data-remote='true' data-append='#receiver' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
47
|
+
destroy <select data-url='/ajax.html' data-remote='true' data-destroy='#destroyed' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
48
|
+
loader <select data-url='/ajax.html' data-remote='true' data-loader='#spinner' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select><br/>
|
49
|
+
redirect <select data-url='/ajax.html' data-remote='true' data-redirect='/index.html?redirected=true' data-type='html' name="quantity"><option value="1">1</option><option value="2" >2</option></select>
|
50
|
+
</div>
|
51
|
+
|
52
|
+
<div>
|
53
|
+
<h2>Testing data-integer</h2>
|
54
|
+
Integer minimum 5 <input type="text" data-integer='5'/><br/>
|
55
|
+
Integer no minimum <input type="text" data-integer=''/><br/>
|
56
|
+
</div>
|
57
|
+
|
58
|
+
<div>
|
59
|
+
<h2>Testing data-float</h2>
|
60
|
+
Float minimum 5.3 <input type="text" data-float='5.3'/><br/>
|
61
|
+
Float no minimum <input type="text" data-float=''/><br/>
|
62
|
+
</div>
|
63
|
+
|
64
|
+
<div id="receiver">I am the receiver</div>
|
65
|
+
<div id="destroyed">I'll be destroyed</div>
|
66
|
+
<img src="/spinner.gif" style='display:none;' id="spinner"/>
|
67
|
+
<span id="date_receiver"></span>
|
68
|
+
<script type="text/javascript">
|
69
|
+
$(document).on('ajax:success', "[data-loader]", function(){
|
70
|
+
alert('Alert to show that the spinner does show up')
|
71
|
+
})
|
72
|
+
</script>
|
73
|
+
</body>
|
74
|
+
</html>
|
data/test/rails.js
ADDED
@@ -0,0 +1,429 @@
|
|
1
|
+
(function($, undefined) {
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Unobtrusive scripting adapter for jQuery
|
5
|
+
*
|
6
|
+
* Requires jQuery 1.6.0 or later.
|
7
|
+
* https://github.com/rails/jquery-ujs
|
8
|
+
|
9
|
+
* Uploading file using rails.js
|
10
|
+
* =============================
|
11
|
+
*
|
12
|
+
* By default, browsers do not allow files to be uploaded via AJAX. As a result, if there are any non-blank file fields
|
13
|
+
* in the remote form, this adapter aborts the AJAX submission and allows the form to submit through standard means.
|
14
|
+
*
|
15
|
+
* The `ajax:aborted:file` event allows you to bind your own handler to process the form submission however you wish.
|
16
|
+
*
|
17
|
+
* Ex:
|
18
|
+
* $('form').live('ajax:aborted:file', function(event, elements){
|
19
|
+
* // Implement own remote file-transfer handler here for non-blank file inputs passed in `elements`.
|
20
|
+
* // Returning false in this handler tells rails.js to disallow standard form submission
|
21
|
+
* return false;
|
22
|
+
* });
|
23
|
+
*
|
24
|
+
* The `ajax:aborted:file` event is fired when a file-type input is detected with a non-blank value.
|
25
|
+
*
|
26
|
+
* Third-party tools can use this hook to detect when an AJAX file upload is attempted, and then use
|
27
|
+
* techniques like the iframe method to upload the file instead.
|
28
|
+
*
|
29
|
+
* Required fields in rails.js
|
30
|
+
* ===========================
|
31
|
+
*
|
32
|
+
* If any blank required inputs (required="required") are detected in the remote form, the whole form submission
|
33
|
+
* is canceled. Note that this is unlike file inputs, which still allow standard (non-AJAX) form submission.
|
34
|
+
*
|
35
|
+
* The `ajax:aborted:required` event allows you to bind your own handler to inform the user of blank required inputs.
|
36
|
+
*
|
37
|
+
* !! Note that Opera does not fire the form's submit event if there are blank required inputs, so this event may never
|
38
|
+
* get fired in Opera. This event is what causes other browsers to exhibit the same submit-aborting behavior.
|
39
|
+
*
|
40
|
+
* Ex:
|
41
|
+
* $('form').live('ajax:aborted:required', function(event, elements){
|
42
|
+
* // Returning false in this handler tells rails.js to submit the form anyway.
|
43
|
+
* // The blank required inputs are passed to this function in `elements`.
|
44
|
+
* return ! confirm("Would you like to submit the form with missing info?");
|
45
|
+
* });
|
46
|
+
*/
|
47
|
+
|
48
|
+
// Cut down on the number if issues from people inadvertently including jquery_ujs twice
|
49
|
+
// by detecting and raising an error when it happens.
|
50
|
+
var alreadyInitialized = function() {
|
51
|
+
var events = $._data(document, 'events');
|
52
|
+
return events && events.click && $.grep(events.click, function(e) { return e.namespace === 'rails'; }).length;
|
53
|
+
}
|
54
|
+
|
55
|
+
if ( alreadyInitialized() ) {
|
56
|
+
$.error('jquery-ujs has already been loaded!');
|
57
|
+
}
|
58
|
+
|
59
|
+
// Shorthand to make it a little easier to call public rails functions from within rails.js
|
60
|
+
var rails;
|
61
|
+
|
62
|
+
$.rails = rails = {
|
63
|
+
// Link elements bound by jquery-ujs
|
64
|
+
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]',
|
65
|
+
|
66
|
+
// Select elements bound by jquery-ujs
|
67
|
+
inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]',
|
68
|
+
|
69
|
+
// Form elements bound by jquery-ujs
|
70
|
+
formSubmitSelector: 'form',
|
71
|
+
|
72
|
+
// Form input elements bound by jquery-ujs
|
73
|
+
formInputClickSelector: 'form input[type=submit], form input[type=image], form button[type=submit], form button:not([type])',
|
74
|
+
|
75
|
+
// Form input elements disabled during form submission
|
76
|
+
disableSelector: 'input[data-disable-with], button[data-disable-with], textarea[data-disable-with]',
|
77
|
+
|
78
|
+
// Form input elements re-enabled after form submission
|
79
|
+
enableSelector: 'input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled',
|
80
|
+
|
81
|
+
// Form required input elements
|
82
|
+
requiredInputSelector: 'input[name][required]:not([disabled]),textarea[name][required]:not([disabled])',
|
83
|
+
|
84
|
+
// Form file input elements
|
85
|
+
fileInputSelector: 'input:file',
|
86
|
+
|
87
|
+
// Link onClick disable selector with possible reenable after remote submission
|
88
|
+
linkDisableSelector: 'a[data-disable-with]',
|
89
|
+
|
90
|
+
// Make sure that every Ajax request sends the CSRF token
|
91
|
+
CSRFProtection: function(xhr) {
|
92
|
+
var token = $('meta[name="csrf-token"]').attr('content');
|
93
|
+
if (token) xhr.setRequestHeader('X-CSRF-Token', token);
|
94
|
+
},
|
95
|
+
|
96
|
+
// Triggers an event on an element and returns false if the event result is false
|
97
|
+
fire: function(obj, name, data) {
|
98
|
+
var event = $.Event(name);
|
99
|
+
obj.trigger(event, data);
|
100
|
+
return event.result !== false;
|
101
|
+
},
|
102
|
+
|
103
|
+
// Default confirm dialog, may be overridden with custom confirm dialog in $.rails.confirm
|
104
|
+
confirm: function(message) {
|
105
|
+
return confirm(message);
|
106
|
+
},
|
107
|
+
|
108
|
+
// Default ajax function, may be overridden with custom function in $.rails.ajax
|
109
|
+
ajax: function(options) {
|
110
|
+
return $.ajax(options);
|
111
|
+
},
|
112
|
+
|
113
|
+
// Default way to get an element's href. May be overridden at $.rails.href.
|
114
|
+
href: function(element) {
|
115
|
+
return element.attr('href');
|
116
|
+
},
|
117
|
+
|
118
|
+
// Submits "remote" forms and links with ajax
|
119
|
+
handleRemote: function(element) {
|
120
|
+
var method, url, data, elCrossDomain, crossDomain, withCredentials, dataType, options;
|
121
|
+
|
122
|
+
if (rails.fire(element, 'ajax:before')) {
|
123
|
+
elCrossDomain = element.data('cross-domain');
|
124
|
+
crossDomain = elCrossDomain === undefined ? null : elCrossDomain;
|
125
|
+
withCredentials = element.data('with-credentials') || null;
|
126
|
+
dataType = element.data('type') || ($.ajaxSettings && $.ajaxSettings.dataType);
|
127
|
+
|
128
|
+
if (element.is('form')) {
|
129
|
+
method = element.attr('method');
|
130
|
+
url = element.attr('action');
|
131
|
+
data = element.serializeArray();
|
132
|
+
// memoized value from clicked submit button
|
133
|
+
var button = element.data('ujs:submit-button');
|
134
|
+
if (button) {
|
135
|
+
data.push(button);
|
136
|
+
element.data('ujs:submit-button', null);
|
137
|
+
}
|
138
|
+
} else if (element.is(rails.inputChangeSelector)) {
|
139
|
+
method = element.data('method');
|
140
|
+
url = element.data('url');
|
141
|
+
data = element.serialize();
|
142
|
+
if (element.data('params')) data = data + "&" + element.data('params');
|
143
|
+
} else {
|
144
|
+
method = element.data('method');
|
145
|
+
url = rails.href(element);
|
146
|
+
data = element.data('params') || null;
|
147
|
+
}
|
148
|
+
|
149
|
+
options = {
|
150
|
+
type: method || 'GET', data: data, dataType: dataType,
|
151
|
+
// stopping the "ajax:beforeSend" event will cancel the ajax request
|
152
|
+
beforeSend: function(xhr, settings) {
|
153
|
+
if (settings.dataType === undefined) {
|
154
|
+
xhr.setRequestHeader('accept', '*/*;q=0.5, ' + settings.accepts.script);
|
155
|
+
}
|
156
|
+
return rails.fire(element, 'ajax:beforeSend', [xhr, settings]);
|
157
|
+
},
|
158
|
+
success: function(data, status, xhr) {
|
159
|
+
element.trigger('ajax:success', [data, status, xhr]);
|
160
|
+
},
|
161
|
+
complete: function(xhr, status) {
|
162
|
+
element.trigger('ajax:complete', [xhr, status]);
|
163
|
+
},
|
164
|
+
error: function(xhr, status, error) {
|
165
|
+
element.trigger('ajax:error', [xhr, status, error]);
|
166
|
+
},
|
167
|
+
xhrFields: {
|
168
|
+
withCredentials: withCredentials
|
169
|
+
},
|
170
|
+
crossDomain: crossDomain
|
171
|
+
};
|
172
|
+
// Only pass url to `ajax` options if not blank
|
173
|
+
if (url) { options.url = url; }
|
174
|
+
|
175
|
+
var jqxhr = rails.ajax(options);
|
176
|
+
element.trigger('ajax:send', jqxhr);
|
177
|
+
return jqxhr;
|
178
|
+
} else {
|
179
|
+
return false;
|
180
|
+
}
|
181
|
+
},
|
182
|
+
|
183
|
+
// Handles "data-method" on links such as:
|
184
|
+
// <a href="/users/5" data-method="delete" rel="nofollow" data-confirm="Are you sure?">Delete</a>
|
185
|
+
handleMethod: function(link) {
|
186
|
+
var href = rails.href(link),
|
187
|
+
method = link.data('method'),
|
188
|
+
target = link.attr('target'),
|
189
|
+
csrf_token = $('meta[name=csrf-token]').attr('content'),
|
190
|
+
csrf_param = $('meta[name=csrf-param]').attr('content'),
|
191
|
+
form = $('<form method="post" action="' + href + '"></form>'),
|
192
|
+
metadata_input = '<input name="_method" value="' + method + '" type="hidden" />';
|
193
|
+
|
194
|
+
if (csrf_param !== undefined && csrf_token !== undefined) {
|
195
|
+
metadata_input += '<input name="' + csrf_param + '" value="' + csrf_token + '" type="hidden" />';
|
196
|
+
}
|
197
|
+
|
198
|
+
if (target) { form.attr('target', target); }
|
199
|
+
|
200
|
+
form.hide().append(metadata_input).appendTo('body');
|
201
|
+
form.submit();
|
202
|
+
},
|
203
|
+
|
204
|
+
/* Disables form elements:
|
205
|
+
- Caches element value in 'ujs:enable-with' data store
|
206
|
+
- Replaces element text with value of 'data-disable-with' attribute
|
207
|
+
- Sets disabled property to true
|
208
|
+
*/
|
209
|
+
disableFormElements: function(form) {
|
210
|
+
form.find(rails.disableSelector).each(function() {
|
211
|
+
var element = $(this), method = element.is('button') ? 'html' : 'val';
|
212
|
+
element.data('ujs:enable-with', element[method]());
|
213
|
+
element[method](element.data('disable-with'));
|
214
|
+
element.prop('disabled', true);
|
215
|
+
});
|
216
|
+
},
|
217
|
+
|
218
|
+
/* Re-enables disabled form elements:
|
219
|
+
- Replaces element text with cached value from 'ujs:enable-with' data store (created in `disableFormElements`)
|
220
|
+
- Sets disabled property to false
|
221
|
+
*/
|
222
|
+
enableFormElements: function(form) {
|
223
|
+
form.find(rails.enableSelector).each(function() {
|
224
|
+
var element = $(this), method = element.is('button') ? 'html' : 'val';
|
225
|
+
if (element.data('ujs:enable-with')) element[method](element.data('ujs:enable-with'));
|
226
|
+
element.prop('disabled', false);
|
227
|
+
});
|
228
|
+
},
|
229
|
+
|
230
|
+
/* For 'data-confirm' attribute:
|
231
|
+
- Fires `confirm` event
|
232
|
+
- Shows the confirmation dialog
|
233
|
+
- Fires the `confirm:complete` event
|
234
|
+
|
235
|
+
Returns `true` if no function stops the chain and user chose yes; `false` otherwise.
|
236
|
+
Attaching a handler to the element's `confirm` event that returns a `falsy` value cancels the confirmation dialog.
|
237
|
+
Attaching a handler to the element's `confirm:complete` event that returns a `falsy` value makes this function
|
238
|
+
return false. The `confirm:complete` event is fired whether or not the user answered true or false to the dialog.
|
239
|
+
*/
|
240
|
+
allowAction: function(element) {
|
241
|
+
var message = element.data('confirm'),
|
242
|
+
answer = false, callback;
|
243
|
+
if (!message) { return true; }
|
244
|
+
|
245
|
+
if (rails.fire(element, 'confirm')) {
|
246
|
+
answer = rails.confirm(message);
|
247
|
+
callback = rails.fire(element, 'confirm:complete', [answer]);
|
248
|
+
}
|
249
|
+
return answer && callback;
|
250
|
+
},
|
251
|
+
|
252
|
+
// Helper function which checks for blank inputs in a form that match the specified CSS selector
|
253
|
+
blankInputs: function(form, specifiedSelector, nonBlank) {
|
254
|
+
var inputs = $(), input, valueToCheck,
|
255
|
+
selector = specifiedSelector || 'input,textarea',
|
256
|
+
allInputs = form.find(selector);
|
257
|
+
|
258
|
+
allInputs.each(function() {
|
259
|
+
input = $(this);
|
260
|
+
valueToCheck = input.is(':checkbox,:radio') ? input.is(':checked') : input.val();
|
261
|
+
// If nonBlank and valueToCheck are both truthy, or nonBlank and valueToCheck are both falsey
|
262
|
+
if (!valueToCheck === !nonBlank) {
|
263
|
+
|
264
|
+
// Don't count unchecked required radio if other radio with same name is checked
|
265
|
+
if (input.is(':radio') && allInputs.filter('input:radio:checked[name="' + input.attr('name') + '"]').length) {
|
266
|
+
return true; // Skip to next input
|
267
|
+
}
|
268
|
+
|
269
|
+
inputs = inputs.add(input);
|
270
|
+
}
|
271
|
+
});
|
272
|
+
return inputs.length ? inputs : false;
|
273
|
+
},
|
274
|
+
|
275
|
+
// Helper function which checks for non-blank inputs in a form that match the specified CSS selector
|
276
|
+
nonBlankInputs: function(form, specifiedSelector) {
|
277
|
+
return rails.blankInputs(form, specifiedSelector, true); // true specifies nonBlank
|
278
|
+
},
|
279
|
+
|
280
|
+
// Helper function, needed to provide consistent behavior in IE
|
281
|
+
stopEverything: function(e) {
|
282
|
+
$(e.target).trigger('ujs:everythingStopped');
|
283
|
+
e.stopImmediatePropagation();
|
284
|
+
return false;
|
285
|
+
},
|
286
|
+
|
287
|
+
// find all the submit events directly bound to the form and
|
288
|
+
// manually invoke them. If anyone returns false then stop the loop
|
289
|
+
callFormSubmitBindings: function(form, event) {
|
290
|
+
var events = form.data('events'), continuePropagation = true;
|
291
|
+
if (events !== undefined && events['submit'] !== undefined) {
|
292
|
+
$.each(events['submit'], function(i, obj){
|
293
|
+
if (typeof obj.handler === 'function') return continuePropagation = obj.handler(event);
|
294
|
+
});
|
295
|
+
}
|
296
|
+
return continuePropagation;
|
297
|
+
},
|
298
|
+
|
299
|
+
// replace element's html with the 'data-disable-with' after storing original html
|
300
|
+
// and prevent clicking on it
|
301
|
+
disableElement: function(element) {
|
302
|
+
element.data('ujs:enable-with', element.html()); // store enabled state
|
303
|
+
element.html(element.data('disable-with')); // set to disabled state
|
304
|
+
element.bind('click.railsDisable', function(e) { // prevent further clicking
|
305
|
+
return rails.stopEverything(e);
|
306
|
+
});
|
307
|
+
},
|
308
|
+
|
309
|
+
// restore element to its original state which was disabled by 'disableElement' above
|
310
|
+
enableElement: function(element) {
|
311
|
+
if (element.data('ujs:enable-with') !== undefined) {
|
312
|
+
element.html(element.data('ujs:enable-with')); // set to old enabled state
|
313
|
+
// this should be element.removeData('ujs:enable-with')
|
314
|
+
// but, there is currently a bug in jquery which makes hyphenated data attributes not get removed
|
315
|
+
element.data('ujs:enable-with', false); // clean up cache
|
316
|
+
}
|
317
|
+
element.unbind('click.railsDisable'); // enable element
|
318
|
+
}
|
319
|
+
|
320
|
+
};
|
321
|
+
|
322
|
+
if (rails.fire($(document), 'rails:attachBindings')) {
|
323
|
+
|
324
|
+
$.ajaxPrefilter(function(options, originalOptions, xhr){ if ( !options.crossDomain ) { rails.CSRFProtection(xhr); }});
|
325
|
+
|
326
|
+
$(document).delegate(rails.linkDisableSelector, 'ajax:complete', function() {
|
327
|
+
rails.enableElement($(this));
|
328
|
+
});
|
329
|
+
|
330
|
+
$(document).delegate(rails.linkClickSelector, 'click.rails', function(e) {
|
331
|
+
var link = $(this), method = link.data('method'), data = link.data('params');
|
332
|
+
if (!rails.allowAction(link)) return rails.stopEverything(e);
|
333
|
+
|
334
|
+
if (link.is(rails.linkDisableSelector)) rails.disableElement(link);
|
335
|
+
|
336
|
+
if (link.data('remote') !== undefined) {
|
337
|
+
if ( (e.metaKey || e.ctrlKey) && (!method || method === 'GET') && !data ) { return true; }
|
338
|
+
|
339
|
+
var handleRemote = rails.handleRemote(link);
|
340
|
+
// response from rails.handleRemote() will either be false or a deferred object promise.
|
341
|
+
if (handleRemote === false) {
|
342
|
+
rails.enableElement(link);
|
343
|
+
} else {
|
344
|
+
handleRemote.error( function() { rails.enableElement(link); } );
|
345
|
+
}
|
346
|
+
return false;
|
347
|
+
|
348
|
+
} else if (link.data('method')) {
|
349
|
+
rails.handleMethod(link);
|
350
|
+
return false;
|
351
|
+
}
|
352
|
+
});
|
353
|
+
|
354
|
+
$(document).delegate(rails.inputChangeSelector, 'change.rails', function(e) {
|
355
|
+
var link = $(this);
|
356
|
+
if (!rails.allowAction(link)) return rails.stopEverything(e);
|
357
|
+
|
358
|
+
rails.handleRemote(link);
|
359
|
+
return false;
|
360
|
+
});
|
361
|
+
|
362
|
+
$(document).delegate(rails.formSubmitSelector, 'submit.rails', function(e) {
|
363
|
+
var form = $(this),
|
364
|
+
remote = form.data('remote') !== undefined,
|
365
|
+
blankRequiredInputs = rails.blankInputs(form, rails.requiredInputSelector),
|
366
|
+
nonBlankFileInputs = rails.nonBlankInputs(form, rails.fileInputSelector);
|
367
|
+
|
368
|
+
if (!rails.allowAction(form)) return rails.stopEverything(e);
|
369
|
+
|
370
|
+
// skip other logic when required values are missing or file upload is present
|
371
|
+
if (blankRequiredInputs && form.attr("novalidate") == undefined && rails.fire(form, 'ajax:aborted:required', [blankRequiredInputs])) {
|
372
|
+
return rails.stopEverything(e);
|
373
|
+
}
|
374
|
+
|
375
|
+
if (remote) {
|
376
|
+
if (nonBlankFileInputs) {
|
377
|
+
// slight timeout so that the submit button gets properly serialized
|
378
|
+
// (make it easy for event handler to serialize form without disabled values)
|
379
|
+
setTimeout(function(){ rails.disableFormElements(form); }, 13);
|
380
|
+
var aborted = rails.fire(form, 'ajax:aborted:file', [nonBlankFileInputs]);
|
381
|
+
|
382
|
+
// re-enable form elements if event bindings return false (canceling normal form submission)
|
383
|
+
if (!aborted) { setTimeout(function(){ rails.enableFormElements(form); }, 13); }
|
384
|
+
|
385
|
+
return aborted;
|
386
|
+
}
|
387
|
+
|
388
|
+
// If browser does not support submit bubbling, then this live-binding will be called before direct
|
389
|
+
// bindings. Therefore, we should directly call any direct bindings before remotely submitting form.
|
390
|
+
if (!$.support.submitBubbles && $().jquery < '1.7' && rails.callFormSubmitBindings(form, e) === false) return rails.stopEverything(e);
|
391
|
+
|
392
|
+
rails.handleRemote(form);
|
393
|
+
return false;
|
394
|
+
|
395
|
+
} else {
|
396
|
+
// slight timeout so that the submit button gets properly serialized
|
397
|
+
setTimeout(function(){ rails.disableFormElements(form); }, 13);
|
398
|
+
}
|
399
|
+
});
|
400
|
+
|
401
|
+
$(document).delegate(rails.formInputClickSelector, 'click.rails', function(event) {
|
402
|
+
var button = $(this);
|
403
|
+
|
404
|
+
if (!rails.allowAction(button)) return rails.stopEverything(event);
|
405
|
+
|
406
|
+
// register the pressed submit button
|
407
|
+
var name = button.attr('name'),
|
408
|
+
data = name ? {name:name, value:button.val()} : null;
|
409
|
+
|
410
|
+
button.closest('form').data('ujs:submit-button', data);
|
411
|
+
});
|
412
|
+
|
413
|
+
$(document).delegate(rails.formSubmitSelector, 'ajax:beforeSend.rails', function(event) {
|
414
|
+
if (this == event.target) rails.disableFormElements($(this));
|
415
|
+
});
|
416
|
+
|
417
|
+
$(document).delegate(rails.formSubmitSelector, 'ajax:complete.rails', function(event) {
|
418
|
+
if (this == event.target) rails.enableFormElements($(this));
|
419
|
+
});
|
420
|
+
|
421
|
+
$(function(){
|
422
|
+
// making sure that all forms have actual up-to-date token(cached forms contain old one)
|
423
|
+
csrf_token = $('meta[name=csrf-token]').attr('content');
|
424
|
+
csrf_param = $('meta[name=csrf-param]').attr('content');
|
425
|
+
$('form input[name="' + csrf_param + '"]').val(csrf_token);
|
426
|
+
});
|
427
|
+
}
|
428
|
+
|
429
|
+
})( jQuery );
|
data/test/spinner.gif
ADDED
Binary file
|
metadata
ADDED
@@ -0,0 +1,53 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: jquery_ujs_extended
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Anthony Alberto
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-10-05 00:00:00.000000000 Z
|
13
|
+
dependencies: []
|
14
|
+
description:
|
15
|
+
email: alberto.anthony@gmail.com
|
16
|
+
executables: []
|
17
|
+
extensions: []
|
18
|
+
extra_rdoc_files: []
|
19
|
+
files:
|
20
|
+
- lib/assets/javascripts/jquery_ujs_extended.js.coffee
|
21
|
+
- lib/jquery_ujs_extended.rb
|
22
|
+
- README.md
|
23
|
+
- MIT-LICENSE
|
24
|
+
- test/rails.js
|
25
|
+
- test/config.ru
|
26
|
+
- test/spinner.gif
|
27
|
+
- test/index.html
|
28
|
+
- test/ajax.html
|
29
|
+
homepage:
|
30
|
+
licenses: []
|
31
|
+
post_install_message:
|
32
|
+
rdoc_options: []
|
33
|
+
require_paths:
|
34
|
+
- lib
|
35
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
36
|
+
none: false
|
37
|
+
requirements:
|
38
|
+
- - ! '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
42
|
+
none: false
|
43
|
+
requirements:
|
44
|
+
- - ! '>='
|
45
|
+
- !ruby/object:Gem::Version
|
46
|
+
version: '0'
|
47
|
+
requirements: []
|
48
|
+
rubyforge_project:
|
49
|
+
rubygems_version: 1.8.23
|
50
|
+
signing_key:
|
51
|
+
specification_version: 3
|
52
|
+
summary: Extends html5 attributes capabilities of jquery-ujs
|
53
|
+
test_files: []
|